カラーパターン、マッチングのテスト
5月ぐらいのリリースを目指して、仕事の合間と週末でひたすら作っているサイトで使う色？キーカラーのテスト用に作ったドットのカラーパターン。
1秒ごとにランダムに切り替わる用にプログラムを組んでいるのでずっと見ているとチカチカシマス。
どんな内容のサイトかは、まだ公表できませんが、今のところスマホ向けに考えております。
興味のある方は連絡いただければベータ版リリース時にお知らせします。
EvernoteからWordPressに投稿する方法。
Evernoteにブログのネタを書き溜めたりする方は多いと思うのですが、共有からブログへアップロードといった機能がないのでどうしようかと思っていたところ、とりあえずコピペで記事だけでも出来ないかと思い、試してみました。
結論としてはあっさりコピペで記事を貼付けることが出来るようで、この記事もEvetnoteからコピペで更新してみました。
欠点としては文章が<p>ではなく<div>で区切られるため、レイアウトを考慮するためには、投稿記事の表示エリアの<div>に対してCSSで指定をする必要があるところ。
それ以外は画像も表示されているので問題なさそうでした。
もしかするとアメブロなども可能かもしれません（試していないのでわかりませんが・・・）
普段はMarsEditを使って記事を書いているのですが、Evernoteがあれば思いついたときにすぐ記事を書き始めることが出来便利ですね。
スマートフォン向けサイトのブラウザー確認でinitial-scaleを考慮する
スマートフォン向けサイトを作る際、手間がかかるのがブラウザーでの確認。
実機で見るのが一番なのですが、すぐ見たいときはFireFoxのアドオン、FireMobileSimulatorとDefault Full Zoom Levelを使って確認をしています。
FiremobileSimulatorでUserAgent偽装とウインドウ幅の指定ができ、これだけでも十分なことがほとんどなのですが、パソコンのブラウザー内ではViewportのinitial-scale、画面の拡大縮小の設定が考慮されないため、Default Full Zoom Levelを使って表示幅を拡大、縮小させて確認しています。
FiremobileSimulatorの説明は検索をするといろいろ出てくるので割愛して今回はDefault Full Zoom Levelについて少し触れたいと思います。
FireFoxのアドオンサイトからインストールしたあと、そのままではブラウザーのツールなどに表示されないので、FireFoxの表示→ツールバー→カスタマイズを押してツールバーのアイコンを設置するためのウインドウを開きます。
その後、Default Full Zoom Levelのアイコンをツールバーにドラッグして適用すればすぐに使える状態になります。
一般的なスマートフォン向けサイトではintial-scaleを1~0.6で設定するので必要な場合は必要な設定を追加した上で表示を確認します。
パソコンでの確認をベースに制作と進めてしまうと完成後にフォントサイズに違和感を感じたり、文字の改行がおかしくなったりしやすいので、それを未然に防ぐ意味でも拡大、縮小を、できればスマートフォン上でも文字のサイズ変更ができるので(Androidの場合など)一度形になった時点で確認することをお勧めします。
Webページのテスト表示にDropBoxをつかう
昨年末から本格的にDropBoxを使い始め、Web制作で何かと便利な代物だということに気づいてしばらく、Webページで使うjQueryなどの動作確認にDropBoxのPublicフォルダを活用してみることにしました。
DropBox Automatorというツールを使えば、自動的にアップすることもできるのですが、常に更新されるわけではないので、難しいことは一切せず、デフォルト機能のpublicフォルダに制作しているページと使っているデータ一式をコピペ。あとはコピペしたページを右クリック→DropBox→「パブリックリンクのコピー」。
そしてアドレスバーに貼り付ければ確認することができます。
CSSなどで絶対パスを使っていると同じディレクトリ構成にしないといけないので見れない場合もありますが、jQueryなどでデザイン、レイアウトを整形している場合などに活躍してくれます。
余談ですが、DropBoxに日ごろ入れているのは、
- 複数の端末で使いたいダウンロードファイル
- 制作中の制作データ
- 制作、更新が必要なWebサイトのデータ
- HTML5ベースのテンプレート(HTML5,js,cssのセット)
- 外出先で使うこまごまとしたデータや画像（地図やQRコードなど）
- スマホで使う着信用の音楽データ など
デザインは大画面のデスクトップですることがほとんどですが、コードはラップトップでやることが多くなり、記事のまとめなどはほとんどEvernoteでするようになりました。
Dropbox ×Evernote があれば外出先や移動中でもラップトップがあれば作業できるので重宝しています。ちなみにドコモのスマホユーザーならEvernoteのプレミアムプランが１年間無料で使えます。
http://db.tt/Jcjoz049 このアドレスからDropboxを登録してもらうともれなく2GB＋250MBの容量で始めることができるのでこれからという人はぜひ！
2011年のWebデザイン関連ブックマークまとめのまとめ。
2011年のWebデザイン関連で役立ちそうな記事やブックマークを集めたサイトをいくつか見たのでブックマーク的に記事にしました。
今後も見つけ次第、時折更新すると思います。
2011年総まとめ：ウェブ制作に役立つエントリーBest 20（coliss）
2011年・個人的に参考になったWeb制作向けの国内記事リスト（かちびと.net）
2011年よくブックマークされた15のエントリー（Webpark）
ツイッター9月~12月のつぶやき まとめ 9/1 ~ 12/31 2011（Web Design RECIPES）
合間で見つけたので取り急ぎ。
Google Readerにはてブのタグ検索結果を登録しておくとトレンド的な記事はつかみやすいと思います。
このほかにもこんな記事あるよ！といったところはコメントorこの記事のTweetにRTでコメントなどしていただければと思います。
