はじめてのスマートフォンサイト制作「jQuery Mobile を使った制作編」
前回の基礎知識や開発環境の準備編で、基本的な勉強や開発環境は揃えましたので、本記事では具体的な制作に入っていきます。 どんな風に作るのか ハイクオリティで広範囲のプラットフォームに対応したスマートフォンサイトを作りあげるにあたって jQuery Mobile を使用していきます。また URL は統一して（スマホサイトを別 URL で作成せず）スマホアクセス時にスマホ用の出力に最適化します。そのため、サイトの構造に変更は加えませんが、全てのページにおいてスマホ用のレイアウトを出力できるように変更を加えていきます。 jQeury Mobile について スマホサイトの作成に jQuery Mobile について学んでいきます。今まで jQuery Mobile を使用したことがありませんので、今回一から全て勉強しました。といっても、基本的なことは全て下記サイトにありますので、jQuery Mo
はじめてのスマートフォンサイト制作「基礎知識や開発環境の準備編」
今までスマホサイトを制作したことが無いので、サイト設計から基礎知識、デザインの知識など一から全て勉強していきますので、その点についてまとめて行きます。 用語整理 まず初めてに新しい用語などについて整理していきます。用語については自信ある方はこの項目は飛ばして下さい。 「スマホ」と「スマフォ」どっちが一般的なのか 今まで「スマホ」だと思っていたのですが、最近「スマフォ」と呼称する人を見かけるようになりました。確かに「スマートフォン」を略すなら「スマフォ」の方が正しそうな気がしますが、Google で調べた所検索ボリュームの数が「スマホ」の方が圧倒的に多いので、私は略す場合は「スマホ」で通していくことにします。 フィーチャーフォン (ガラパゴスケータイ) 日本独自の進化を遂げた携帯をガラパゴス携帯、略してガラケーと呼びます。個人的にはガラケーという言葉を使っていたのですが、ガラケーではなく「フ
jQuery でフォームを簡単に Ajax に対応させてしまう jQuery Form Plugin が凄く便利
以下のようなポップアップしたボックス上に Ajax フォームを構築して画面遷移させずに処理させるようなサイトを構築する際に便利です。 このような Ajax で動作するフォームを jQuery Form Plugin を使えば簡単に構築することができたので、具体的な方法を解説させて頂きます。英語で良ければ以下のページに使い方が乗っていますので参考にしましょう。 jQuery Form Plugin Ajax 対応のフォームを作成する方法 即興でフォームを作ってみます。comment.php をフォームのページとして話をすすめます。PHP と HTML と JS を理解していないと意味不明になるかもしれないですが、出来る限りの範囲で解説してみます。ちなみに、分かりやすいコードにするために、実際に動作確認せずに必要なコードのみを書いて掲載していますので（PHPの部分まで書くとキリがないので）実際
MySQL の root パスワードを忘れた際にコマンドラインで新しく設定・リセットする方法
use mysql; select host, User, Password from user; update user set password=password('hogepassword') where user='root'; select host, User, Password from user; flush privileges;
PHP で簡単にサーバーを監視して一定ラインを超えたらメール通知するコード
ロードアベレージ通知するだけなら負荷監視ツールを入れるより、PHP なりで書くほうが楽で簡単とのことで友達に教えてもらいましたので、ひとつ書いてみました。以下のコードを loadave.php など適当な名前で保存して cron で定期実行すれば良いです。 <?php mb_language("ja"); mb_internal_encoding("UTF-8"); date_default_timezone_set('Asia/Tokyo'); $servername = 'localhost '; // サーバー名(任意) $mail1 = 'info@example.com'; // 通知先1 $mail2 = 'alert@example.com'; // 通知先2 $notice1 = '3.00'; // 通知ライン1 $notice2 = '5.00'; // 通知ライン2
PHP が分からない人でも WordPress のカスタムフィールドを使ってカスタマイズする方法
カスタムフィールドの使い方をシンプルに教えます。一度覚えれば一生使えますので一緒に勉強していきましょう。 カスタムフィールドとは ブログの今日の一言とかを作るのに良いです。ブログ記事の抜粋部分とかサブタイトルを入れたりと、別枠で好きな枠組みを作れるのでアイディア次第でいろいろ作れます。分からない方はこれを読むとカスタムフィールドが何かに着いて理解できるかもしれません。 簡単なカスタムフィールドの使い方 管理画面のどこにカスタムフィールドを使うところがあるの？ デフォルトで表示されてたり、されてないかもしれません、まずは画像のように表示オプションからカスタムフィールドが有効になっていることを確認します。 下に行くとカスタムフィールド欄が出現 これがカスタムフィールド欄です。 カスタムフィールドに何か入力します 左側はカスタムフィールドの名前、右側は値を入れます。今日の一言を実装するなら画像の
Google Analytics で Twitter や RSS からの訪問を簡単に見れて凄く便利にする方法
新 Google Analytics を弄っていたところ、RSS や Twitter のアクセスも簡単に見れるようになっていてとても便利です。昔からできたのかは分かりませんが、便利なので紹介します。 Twitter や RSS の訪問者を見る方法 まず新 Google Analytics の管理画面から何かプロファイルを選択します。そして、上のオレンジバーのホームをクリックすると以下のような画面が出てくると思います。 上にウィジェットを追加と灰色で書いてあるところをクリックするとウィジェットを追加できます。今回の Twitter と RSS のアクセスを簡単に見るには以下のような設定をします。 すると以下のように表示されます。 直接調べたりして見るより、このように表示されると見やすくて便利です。Twitter のアクセスってもっと多くを占めてると思っていましやが、RSS に遠く及ばない程だ
HTML からリンクのタイトルと URL を PHP Simple HTML DOM Parser を使って取得する
PHP Simple HTML DOM Parser で HTML からリンクを取得することができます。以下のサイトが参考になりました。この記事では具体的に HTML からリンクを取得する方法を解説します。 PHPでHTMLをパースする | zaru blog PHP Simple HTML DOM Parser をダウンロード PHP Simple HTML DOM Parser というライブラリを使うとできます。以下のサイトからライブラリをダウンロードしてきます。 PHP Simple HTML DOM Parser リンクのタイトルと URL を取得する リストなどにリンクが含まれているような HTML からリンクを取り出す例です。 $output = <<< DOC <ul> <li><a href="http://example.com/1">Title1</a></li> <l
はじめての MySQL で100万件のデータを管理する時に行ったチューニングまとめ
MySQL の勉強をせずにフレームワーク等で SQL を書かずに Web サイトを構築していました。データ数も2万件程度でしたので、そこまで困ることはありませんでしたが、今回100万弱の商品データを扱う機会ができたので、MySQL のチューニングや発行する SQL について見直す機会がありました。 この記事では MySQL を高速化するのに行った対策など勉強したものを自分用にメモしておきました。 条件式で比較するカラムにインデックスを使用して高速化 商品コードで存在しない商品を見つけて、商品をDBに登録するという処理を行っている場合、4万件超えたころから処理に2秒以上かかるようになってきます。12万件超えた頃には10秒程度かかるようになってしまいましたが、商品コードのフィールドに対してカラムインデックスを貼ることで0.2秒に短縮することができました。 MySQL のリファレンスにも以下のよ
Google Analytics Data Export API で簡単に人気記事一覧を作成する方法
Google Analytics Data Export API を使えば Web サイトの PV などを読み込むことができます。さらには GAPI という Data Export API を扱う PHP ライブラリを使えばもっと簡単に人気記事ランキングなんかを作ることができます。 gapi-google-analytics-php-interface – GAPI – Google Analytics API PHP Interface – Google Project Hosting 人気記事のURLとPV数を配列で返すコード 以下は私がサンプルで書いたコードです。テスト用にお使いください。 include 'gapi-1.3/gapi.class.php'; $ga = new gapi( 'test@gmail.com', 'password' ); $ga->requestRep
HTML と CSS のみでタブを作るサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 ul.tab { margin: 0; padding: 0; border-bottom: 2px #ddd solid; } ul.tab li { float: left; margin: 0 0 0 5px; position: relative; bottom: -2px; list-style-type: none; border: 1px #ddd solid; border-top: none; border-bottom: 2px #ddd solid; } ul.tab
WordPress で jQuery などの外部ファイルを読み込む wp_enqueue_script()
なお、wp_enqueue_script() は functions.php やプラグイン内で書くと良いです。 WordPress にデフォルトで含まれているライブラリ WordPress には以下のライブラリがデフォルトで同梱されているので、以下のライブラリは一番最初に紹介したように jquery とするだけで読み込むことができます。 scriptaculous-root, scriptaculous-builder, scriptaculous-dragdrop, scriptaculous-effects, scriptaculous-slider, scriptaculous-sound, scriptaculous-controls, scriptaculous, Image cropper (not used in core, see jcrop), Image copper,
WordPress と OAuth 認証を使って会員向け Web サービスを作る
WordPress で主に Twitter の OAuth を使ったり、データベースに会員情報を持っておく方法を紹介します。すべて説明していると返って分かりにくくなりますので、ポイントを押さえて説明していきますので読んでみてください。今回メインで参考にさせて頂いた記事は以下です。 PHPでTwitter APIのOAuthを使う方法まとめ – 頭ん中 WordPress のデータベースにメンバーテーブルを作成 id を WordPress 側で使い、user_id は Twitter の user_id です。user_name は Twitter での screen_name です。access_token_key と access_token_secret を保存しておけばサイト側からツイートなどを行うこともできます。 CREATE TABLE IF NOT EXISTS `wp_me
WordPress でゲストに記事投稿させるフォームが作れる wp_insert_post()
wp_insert_post() で WordPress に記事を投稿できます。上手い具合にフォームなどと連携させて叩けばコンテンツを不特定多数の人たちで作っていくサイトを作ることができます。 関数リファレンス/wp insert post – WordPress Codex 日本語版 例えば歌詞をみんなで投稿するサイトを作ったり、今日の日記をみんなで書くサイトを作ったりすることができます。 記事投稿を最も簡単に行うサンプル なかなかサンプルがないので、シンプルなサンプルを作っておきました。 $postarr = Array( 'post_status' => 'publish', 'post_category' => '1', 'post_title' => '記事タイトル', 'post_content' => '記事の内容' ); wp_insert_post($postarr);
WordPress で細かいところまで手動で SSL 対応させる方法
WordPress で細かいところまで手動で SSL 対応させる方法です。 functions.php への記述 SSL の際に CSS や JS ファイルなども SSL 経由で読み込めるようにするのが主な作業です。SSL を全体を通して使ったサイトを作るのは考えてみたら初めてなので、抜けがあるかもしれませんのでご了承ください・ 以下の記述で WordPress で自動的に出力される URL などのドメイン部分を削除して、/ から始まる絶対パスにすることで http の時は通常の、https の時は SSL 経由でファイルの読み込みを狙います。 function wbsSSLURL($args) { $args = preg_replace("/s?https?:\/\/([A-Z0-9][A-Z0-9_-]*(?:\.[A-Z0-9][A-Z0-9_-]*)+):?(\d+)?/i",
PHP で凄く簡単に GET/POST 送信ができる関数を作りました | ウェブル
以前こちらの URL で GET/POST を簡単にできるコードを書きましたが、問題があるとのことで多くの指摘を頂きました。zaru さんに正しいコードを書いて頂きましたので下記の記事をご覧ください。 PHP で凄く簡単に GET/POST 送信ができる関数を勝手に改良した | zaru blog 下記にコードを引用させて頂きます。いくらか稼働させた所 curl の方が安定していることが分かりましたので、こちらを引用させて頂きます。curl がインストールできない環境等では zaru さんの記事の別のコードを使用してください。 function wbsRequest2($method, $url, $params = array()) { $data = http_build_query($params); if($method == 'GET') { $url = ($data != '
jQuery で要素の CSS のプロパティの値を取得する方法
toggle() で開いた時と閉じた時にそれぞれ別のアクションを実行したい。しかし toggle() にそのような機能はないため、click() 時に要素の display プロパティの値を取得して、それを比較していろいろなアクションを実行することにしました。 というわけで特定の CSS プロパティの値を取得するコード。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress で簡単にオリジナルのショートコードを作る方法
WordPress でメールを送信する際は wp_mail() が便利
WordPress 初心者にも分かるデフォルトテーマ twentyten の functions.php を解体して学ぶ基本設定編