cronで文字化けするときの対処について紹介します。 １．cronで文字化けする原因 cronでスクリプトを時間指定で実行することがあると思いますが、cronはユーザーのシェルで起動しないため、ユーザーの環境変数は引き継がれません。 つまり、cron起動時には文字コードの環境変数LANGの設定などが行われておらず、デフォルトの文字コード以外の文字を標準出力するスクリプトやプログラムを実行すると、文字化けが発生します。 0 0 * * * /home/foo/foo.sh ２．cronで文字化けしないようにする cronで実行したときに文字化けしないようにするには、cronの中でexport（sh・bash）またはset（csh・tcsh）を実行します。 例えば、bashの場合「crontab -e」で編集画面を開き、プログラムやスクリプトの実行前にexportコマンドを実行します。 0 0

先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル（リンクは２項） 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 １．はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま

ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」の使い方を紹介します。 jQuery Masonry ブラウザの幅に応じてカラムレイアウトをある程度調節してくれるので、レスポンシブデザインウェブ制作にも使えそうです（これだけでは厳しいですが）。 このエントリーは「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」の便乗記事です。 2012/10/20追記 jQuery MasonryをレスポンシブWebデザイン制作で使うためのノウハウをまとめた「レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント」も是非ご覧ください。 １．サンプル 配布サイトのトップページでも確認できますが、より簡単なサンプルを作ってみましたのでお試しください。 サンプル ２．jQuery Ma

jQuery.ajax()の非同期通信で実行順序を保証する方法を紹介します。 具体的には、jQuery.ajax()による非同期通信を連続して実行する場合やjQuery.ajax()メソッドによる非同期通信と他の処理を続けて実行する場合、お互いの実行順序を保証する方法です。 本エントリーではjQuery1.8を使って解説します。その関係で、done()メソッドを使っています。done()がサポートされていないバージョンであればsuccess()に読み替えてください。 １．jQuery.ajax()の仕様 「仕様」という表現は適切でないかもしれませんが、例えばjQuery.ajax()による非同期通信を連続実行した場合、実行結果の順序は不定です。 簡単なサンプルとして、for文の中でjQuery.ajax()を実行するコードを用意しました。 <meta charset="utf-8" />

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 ２．「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N

Movable Typeの記事一覧画面に本文の文字数を表示する「BodyLengthListingプラグイン」を公開します。 １．機能 ブログ記事一覧画面、ウェブページ一覧画面に「本文の文字数」をオプションで表示します。 文字数によるソートやフィルタも可能です。 動作はMT5.14で確認しています。MT5.1x以上であれば動作すると思います。 ２．プラグインのダウンロード・インストール 下記のリンクをクリックして、プラグインアーカイブをダウンロードします。 変更履歴 2012.09.14 v0.01 初版 2012.09.14 v0.02 ソート機能を追加 BodyLengthListing_0_02.zip プラグインアーカイブを展開し、中にあるBodyLengthListingフォルダごと、Movable Type のアプリケーションディレクトリのpluginsディレクトリにアップロー

ウェブサイトを閲覧しているとき、ページのトップに戻りたいことがあると思います。また、ページの一番下に移動したいこともあると思います。 トップに戻る場合、「トップに戻る」ボタンを表示しているウェブサイトも増えてきましたがそうでないものもありますし、戻りたいときにボタンが表示されていないケースもあります。また一番下に移動するボタンを備えているウェブサイトはほぼ皆無かと思います。 ということで、ページのトップに戻る（または一番下に移動する）方法をいろいろ調べてみました。 １．トップに戻る Windowsの場合、「HOME」でページの先頭に移動することができます。IE/Firefox/Google Chrome/Safari/Opera共通です。 Macの場合、「Command」+「↑」でページの先頭に移動することができるようです。 ２．一番下に移動する Windowsの場合、「End」でページの

Movable Typeで最適な画像ファイルタイプを選択する「ImageTypeOptimizerプラグイン」を公開します。 ちょっと変わったプラグインですが、要はSEO対策用です。 １．機能 このプラグインでは、記事本文に埋め込まれたimg要素の画像について、異なる画像タイプがサーバ上に存在する場合、最適なサイズの画像タイプを選択します。 例えば、サーバ上に次のような「img1」「img2」という画像ファイルがあり、それぞれjpgとpngの2種類の画像タイプがあると仮定します。 これとは別に、ブログ記事本文で次のようなimg要素を記述しているとします。 「img2」のファイルサイズはpngの方が小さいので、「img2」のimg要素には「img2.png」を設定した方がページ表示速度が速くなります。 が、それをひとつひとつ手作業で行うのは現実的ではありません。 このプラグインを適用すれば、

このブログや公開テンプレート（というか「すちゃらかCSS素材集」より頂いた時の設定をそのまま使ってます）のスタイルシートのフォントには font-family: Verdana, Arial, sans-serif; という指定がされています。各フォントがカンマで区切られて3つ並んでいるのは、優先順位（最初のフォントがみつからなかった場合、次のフォントを使用）を示しています。 このエントリーでは青字で示している Verdana という、よくみかけながらもその存在についてあまりよく分かっていなかったフォントについて調べてみました。 欧文フォントは主に2種類の書体が用いられます。デザイン関係の方ならご存知と思いますが、1つはセリフ（Serif）体、もう1つはサンセリフ（Sans Serif）体です。「セリフ」とは「活字の始点または終点にあるひげ飾り」という意味で、サンセリフは「セリフがない」と

ブラウザから実行可能な画像形式一括変換ツールをPerlで作ってみました。 １．機能 指定したディレクトリにある「変換前の拡張子（ピリオドは不要）」の画像ファイルを、「変換後の拡張子（ピリオドは不要）」のファイルに一括変換して、同じディレクトリに出力します。 変換状況は下のスクリーンショットのように順次表示します。 ディレクトリは絶対パス・相対パスのいずれも可能です。ディレクトリは再帰的に検索するので、指定したディレクトリ配下のすべての画像ファイルが対象になります。 変換後の同名ファイルがある場合、上書きします。 必要に迫られてとりあえず作ったものなので、細かいチェックはできていません。レンタルサーバによっては長時間実行すると500エラーになるかもしれません。 ２．実行環境 このツールの実行には、PerlとImageMagick（PerlMagick）が必要です。 余談ですが、ImageMa

TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue

Googleのスマホ最適化支援サービス「GoMo」を使って、サイト診断をやってみました。 GoMo １．GoMoとは GoMoは、「Go Mobile!」の略で、ビジネスサイトのスマートフォン最適化促進のグーグルの新しいグローバルキャンペーンです。 GoMoサイトでは、スマートフォンサイトに関する情報や 最適化に必要なソリューションの他、スマートフォンサイト構築をサポートできる企業のリストも掲載しています。 ２．サイト診断 ページ左下にある「サイトを診断する」をクリック。 「スマートフォン最適化診断レポート」をクリック。 診断したいサイトのアドレスを入力。 「サイトを診断する」をクリック。 サイトを読み込みます。 次のページ右側にスマホで見たサイトが表示されます。 それはおいといて、ページ左にある5つのカテゴリから該当するものを選択。 選択したら、その下に表示された質問に回答します。 すべ

Firefoxで間違って閉じたウィンドウやタブを復元する方法を紹介します。チョイネタです。 １．問題 「ツール」→「オプション」→「一般」で「前回終了時のウィンドウとタブを表示する」を選択しておけば、Firefoxのウィンドウをすべて閉じたあとの次回起動時、閉じる直前のウィンドウとタブをすべて復元します。 ところが一斉に終了せずに、いつも使っているウィンドウを閉じたときにたまたま一時的に開いていたウィンドウが残っていて、それを一番最後に閉じてしまうと、次回起動時にはそのウィンドウしか開かなくなります。 ２．対処方法 「履歴」→「最近閉じたウィンドウ」→「すべてのウィンドウを復元」で先に閉じてしまったウィンドウを復元することができます。 間違って閉じたタブも、同じ要領で「履歴」→「最近閉じたタブ」をたどっていけば開き直すことができます。 ということでお試しください。

Movable Typeのブログ記事から削除したカテゴリのアーカイブページを再構築する「DeleteCategoryRebuilderプラグイン」を公開します。 １．基本 Movable Typeでは、ブログ記事にカテゴリを割り当てて投稿すると、カテゴリアーカイブページが生成され、該当のブログ記事が掲載されます。 ただしその後、ブログ記事からカテゴリを削除して更新しても、カテゴリアーカイブページから該当のブログ記事は削除されません。 ２．機能 本プラグインを適用すれば、ブログ記事更新時に削除カテゴリがある場合、該当カテゴリのアーカイブページを再構築し、ブログ記事をカテゴリアーカイブページから削除します。またオプション機能で、削除したカテゴリの親カテゴリアーカイブも再構築対象にすることができます。 削除カテゴリの有無は、ブログ記事のリビジョンから取得して判断します。ブログ記事更新時のカテゴリ

jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括ってますが、必要に応じて「$(function(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 １．$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える（配列の基本メソッドが使える訳ではない）ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i

Movable Typeの旧バージョンを入手する方法を紹介します。 2015.1.31追記 MT3およびMTOS4/MTOS5の旧バージョンは下記のURLからダウンロードできます。 https://movabletype.org/downloads/archives/ １．Githubからダウンロードする Movable Typeのgithubにアクセス movabletype/movabletype · GitHub ページ左側にある「branch: master」をクリック。 開いたダイアログの「Tags」タグをクリック。 ダウンロードしたいバージョンをクリック。 「branch: master」が「tag:バージョン」に変更されたことを確認して、すぐ上にある「ZIP」をクリック。 これで指定したバージョンのアーカイブをダウンロードします。 ２．１項でダウンロードできないプロダクト・バ