まずはじめに用意するものとして挙げるのは「スマートフォン」です。 制作自体はPCでやるし、表示確認もPCでだいたいできますが、やっぱり実機で確認しないと使用感覚が分かりませんよね! スマホ自体の情報はこちら↓が参考になりそう。
そもそもの話として、私、スマホ持ってなかったんです。 いわゆる普通の携帯電話しか持ってませんでした。 しかし、スマホ対応サイトを制作するにあたってやはり実機が必要!ということで買いました(正確には買ってもらいました)。 スマホ対応サイトを作る人がスマホ触った事無いとかお話しになりませんしね(;^ω^) なので制作の打ち合わせまでにひたすらスマホをいじりまくって、ユーザーがどんな使い方をするのか、スマホで見る各Webサイトの使用感などを研究します。
スマホ実機で確認するとは言っても、やっぱり作業中の細かい表示確認はPC上でやりますよね。 ってことでその環境を整えます。
私ははじめての技術を導入する際は、手元に参考書等を持ってやりたい人なので、スマホサイト制作に関する基礎などを調べるのに本「iPhone & Android スマートフォンサイト制作の教科書(MdN)」を買いました。 これは基本的な知識から実制作の技術的なことまで、私みたいにはじめてスマホサイトを作る人にとってはかなり重宝する本ですので、超オススメです!
知識収集ならWebでいいべ。って人には、 この辺↓のサイトがなんだか参考になりそうです。
iPhoneもAndroidも他のスマホも搭載されている初期ブラウザがHTML5とCSS3に対応しているということから、スマホサイトの構築にはHTML5+CSS3が使われていることが多いようです。 IEのこととか気にしなくていいんですものね! これでやっと気兼ねなくHTML5+CSS3を使える!と喜び勇んでHTML5を使っているWeb屋の皆さんの顔が目に浮かぶようですw
スマホでは従来の携帯電話と違ってjavascriptが使えます。 flashはiPhoneが対応してないため、動きを付けたいときはjavascriptが使えます。 PCサイトでは「jQuery」や「Prototype」などのフレームワークが主流になってますが、スマホでJSフレームワークといえば「jQuery Mobile」が主流でしょうか! PCでjQueryを使ってた流れから入りやすい気がします。(個人的に)
何かのプラグインとかではなくこれ単独で使えます。 スマホでスムーズなスワイプエフェクトを実装してくれるjavascript。
jQuery Mobileのプラグインも一緒にまとめようと思ったのですが、長くなりそうなのでまた今度!
フォーム右下の矢印をクリック ↓ 「新しいクイック操作」 ↓ 「フォルダへ移動」を選択します。
すでに設定があった場合の編集画面は↓こんな感じ。 この場合は、「フォルダーへ移動」の下にあるフォルダ名のプルダウンから任意のフォルダを選びます。 初めて設定するときは↓こんな感じ。 この場合は、「フォルダーの選択」と書いてあるプルダウンから任意のフォルダを選びます。 そして、、、、、次が重要!これは役立ちそう!
日本の優れたデザインのサイトを集めているギャラリーサイト。
かちびと.netさんが改良してくれたというSocial Metricsの日本版。 ブログ記事のTweet数やブクマ、いいね!の数を管理画面に一覧表示するWordPressプラグインです。 WordPressのプラグインは基本英語だから日本向けにしてくれると助かりますね!
Stocker.jpさんのWordPressのレスポンスを向上させるプラグイン。
プログラマーじゃなくても簡単にWordPressをカスタマイズハックできるプラグイン。
かなり細かく解説されてるのでこれは分かりやすそう!
プラグイン開発とかそういうときに重宝できそうなローカルインストールのレポート。 私に使う機会があるのかは不明ですがとりあえずメモ。
これらをインストールしている人は気をつけてっ!
なるほどー。ここまでカスタマイズしとくとユーザーに親切ですね。
アメブロのテンプレートでも作ろうかなーと思った事もあるのでメモ。
HTML5を覚えていく上で参考になりそうなのでメモ。
面白法人カヤックの橋本雄也氏、本多大和氏が書いたコラム。
“HTML5+CSS3時代の”というよりは少し前から“プログレッシブ・エンハンスメント”とやらは徐々に使われ始めていた気が…ゲフンゲフン、まぁこれはこれまでの進化系のお話だと思います。
私もWeb Creatersとかの雑誌で読んで目からウロコを出して以来(2年くらい前かな?)、「すべてのブラウザで完全に表示を一致させる」ことはしなくなりました。
だってすべて統一しようとすると(主に某IEのせいで)膨大な時間がかかるし、微細な部分になると無理に近いことだし。
それにしても“プログレッシブ・エンハンスメント”って舌噛みそうなくらい長いからもっと手軽な言い方がないものだろうか…?
HTML5+CSS3のフレームワークを配布してる。HTML5を使ったサイト作りの参考にもいいかも。
まとめのまとめ。制作のお供に、参考に、使えそうです。
ドラッグ&ドロップでファイルをアップロードできるHTML5製のオープンソース。
本家配布先はどうやら英語でもないようなので下記の参考ページが日本語で解説してくれていてわかりやすい。
こちらでもダウンロードが可能。英語の解説も。
html5uploader – Drag & drop files to browser using HTML 5, PHP and JS – Google Project Hosting
各ブラウザがHTML5やCSS3に対応しているか否かがまとめられている。しばらくは重宝しそう!
こちらはフォーム関連のブラウザ対応表。
『HTML5 WOW!』を紹介しています。が、『HTML5 WOW!』はChromeからじゃないと見れないとな・・。
自宅の今の環境では見れないので未来へ向けてメモ。
HTML5を駆使したしょうこおねえさん画スプーのモーフィング。仕事中や外でこれを見ようという方は要注意!(爆笑するかもという意味でw)
ブラウザ上でEscapeキーを押したときの処理を簡単にかけるプラグイン
オフィシャルのプラグイン一覧ページ(WordPress Plugins Directory [英語] )がありますが、英語でよくわかんないのでw日本語で解説してくれているサイトを探しました。