2015年11月28日(土) 12時14分38秒 [仕事]

HTMLソースの記述順に関係なく掲載順序を指定できるCSS3「flexbox」を解説

CSSを使うと(段組構造を作る際などで)ある程度はブロックごとの表示順を自由に指定できますが、それでも限界がありますよね。レスポンシブなデザインを作成する際には特に、「HTMLソースに記述した順序」と「実際に表示したい順序」が一致しなくなるケースがあります。

そんな場合に便利なのが、CSS3の「Flexible Box」(flexbox／フレキシブルボックス)です。
これを使えば、HTMLソース内の記述順に影響されずに、かなり柔軟に表示順を指定できます。
Flexible Boxの記述方法の基礎と、実際に使えそうなレイアウト例2つを使って解説してみました。

◆HTMLの記述順に関係なく自由に表示順を変更できるCSS（＠All About ホームページ作成）

flexboxの自由さは、なかなか感動します。
連続する複数のブロックに対して、1つ1つ表示順を指定できるわけですから、もう本当に好きな順番に掲載できます。指定方法も、orderプロパティを使って「order: 1」、「order: 2」……のように指定するだけです。ちょう簡単！

これが使えれば、「PC用レイアウト」をベースにして作成されたデザインをモバイル対応する際に、「モバイルではこの順序で表示されると困るから、仕方なくボタンタップで表示・非表示を切り替えるように……」みたいなアクロバットな解決策を採る必要が（たぶん）なくなります。少なくとも減るとは思います。^^;

ぜひ、試してみて下さい。CSS3のFlexible Box。
便利です！

2015年11月27日(金) 10時55分03秒 [仕事]

Chart.jsを使って折れ線・棒・円グラフなどをウェブ上で簡単に表示する方法

ウェブページ上で円グラフ・棒グラフ・折れ線グラフなどの各種グラフを簡単に掲載できるスクリプト「Chart.js」の簡単な使い方を解説した記事を、All Aboutで公開しました。

◆Chart.jsで折れ線・円・棒グラフを簡単に表示する方法（＠All About ホームページ作成）

グラフをウェブ上に掲載したいとき、Excelとかのローカルソフトで作成したものを画像化して掲載すると、修正が面倒だったり、拡大したときに解像度が足りなくなったりして不便です。それよりも、HTML5のCanvas機能を使ってグラフを描画する方が綺麗で便利です。グラフの内容はソース内に数値で記述すれば良いだけなので修正も容易ですし、(しようと思えば)動的に描画内容を変化させることもできます。

しかし、Canvas上にグラフを描くにはJavaScriptを記述する必要があって、それがかなり面倒です。
そこで便利なのが、スクリプト「Chart.js」です。
このスクリプトを使えば、短いソースの記述だけでわりと簡単に望みのグラフを描画できます。

この「Chart.js」でCanvas上に描くグラフはレスポンシブ化して表示することもできるので、PC・モバイル両方に対して綺麗なグラフを見せられます。
ぜひ試してみて下さい。

2015年11月10日(火) 16時25分56秒 [日々の生活]

日本銀行グッズをもらった

日本銀行グッズを頂きました！(^_^;)
諭吉タオルとか、お札シャーペンとか、日本銀行ってこんな笑えるグッズを作っていたんですね！

左から順に、日本橋名物(？)「貨幣焼」(饅頭)、諭吉タオル、裁断されたお札が詰まったシャーペン。

貨幣焼

貨幣焼は「日本橋名物」と書いてあるので、東京日本橋で普通に売っているんでしょうか？(^_^;)
カステラ饅頭。
6個入りで、一円玉～五百円玉まで硬貨6種類の焼きが1つずつ押してあります。写真ではたぶん全然分からないと思いますが、実物でもよーく見ないと分かりません。^^;
五円玉が（比較的）一番見やすい気はします。

裁断したお札が詰まったシャーペン

裁断したお札が詰まったシャーペンには、ペンの側面に「日本銀行」と書いてありました。

その注意書きには、

軸の中に傷んだりして使えなくなった日本銀行券の裁断片が入っています。(中略)
裁断片を組み合わせてお札を復元しても、お札として効力がないほか、通貨変造の罪に問われることがありますので、ご注意下さい。

と脅し文句が書いてあって笑えました。(笑)

2015年11月 6日(金) 17時03分04秒 [Web関連]

Apacheのエラーログに ioncube_loader_fre_5.2.so が記録される謎は php.ini が原因だった

ウェブサーバ(Apache)のエラーログを眺めていると、「ioncube_loader_fre_5.2.so」というファイルの読み込みに失敗したというログが大量に出ていることに気づきました。
エラーログには、

Failed loading /home/username/www/freshreader/ioncube/ioncube_loader_fre_5.2.so: Cannot open "/home/username/www/freshreader/ioncube/ioncube_loader_fre_5.2.so"

という1行のエラーが山のように記録されていました。
見れば「freshreader」というディレクトリに格納されているioncube関連ファイルを読もうとしていることは分かるのですが、実はこの「freshreader」ディレクトリは既に削除済みなので存在しません。
にもかかわらず、このファイルへのアクセスが大量に存在するのが不思議でした。

エラーログの各行に出ているrefererが様々(google.co.jpなどもある)ので、「外部のどこかのサイトから直接リンクでもされているのかな……？」とも思ったんですが、その場合は上記のような「Failed loading」とか「Cannot open」みたいなエラーにはなりません。
試しにブラウザでこの「ioncube_loader_fre_5.2.so」の位置(URL)にアクセスしてみると、エラーログには、

File does not exist: /home/username/www/freshreader

というエラーが記録されました。つまりファイルに到達する前にそもそもディレクトリが存在しないよ、というエラーが出てくるんですね。
とすると、余計に謎です。

エラーログをもっと調べていくと、どうやらWordPressで生成しているページにアクセスされたときにエラーが出ているっぽいことが分かりました。
つまり、PHPですね。
PHPが実行されるたびにこのエラーが出てくるようです。

php.iniファイルにioncube_loader_fre_5.2.soを読む記述が存在した

いろいろ調べた結果、PHPの設定ファイルである「php.ini」ファイル内に、以下の記述が残っていたことが原因だと分かりました。

zend_extension = /home/username/www/freshreader/ioncube/ioncube_loader_fre_5.2.so

なるほど。
この記述があるから、PHPが実行されるたびに（つまりWordPressにアクセスされるたびに）「ioncube_loader_fre_5.2.soが読めないぞ」というエラーが出ていたんですね。
php.iniから上記の行を削除すると、このエラーは一切発生しなくなりました。

たぶん、freshreader（※既に開発が停止されているRSSリーダー）を導入する際に、php.iniファイルに上記の1行が加えられてしまっていたのでしょうね。
まさかそんなところが書き換わっていたとは。^^;

というわけで、もしApacheのエラーログに「ioncube_loader_fre_5.2.so」が読めないと記録されるようなら、サーバ上の「php.ini」ファイルを覗いてみて下さい、という話でした。

2015年11月 4日(水) 13時36分31秒 [ソフトウェア]

バッテリ残量が少なくなって自動で休止状態に移行する際の「残量％」設定を変更する方法

ノートPCなどのようにバッテリで駆動するWindowsマシンは、バッテリ残量が少なくなったときに自動的に休止状態(ハイバネーションモード)に移行します。
デフォルトではたぶん「バッテリ残量5％」がトリガーになっていると思うんですが、この残量はWindows側の設定で変更できます。
最近のバッテリは大容量なので、「5％」も残っていれば、まだ30分程度は使えそうなので「ちょっと残す量が多いかな」という気もします。
というわけで、お使いのバッテリによっては「3％」くらいに設定しておいても良いのではないでしょうか。

自動的に休止状態に移行する残量割合(％)の値を変更する

自動的に休止状態に移行するバッテリ残量の％値を変更するには、コントロールパネルから以下のように操作します。
以下はWindows7での操作例ですから他のバージョンでは異なる可能性があります。その際は、コントロールパネルの検索窓に「電源設定」と入力して検索してみると良いと思います。(Windows7でもその検索方法でもアクセスできます。)

「コントロール パネル」→「ハードウェアとサウンド」→「電源オプション」→「プラン設定の編集」

※この設定場所は、PCの放置時間に合わせてディスプレイの電源を切ったりOSをスリープ状態に移行したりする設定ができる画面です。

1. この画面内に「詳細な電源設定の変更」というリンクがあるのでクリックします。
2. すると上図右側のように「電源オプション」ウインドウが表示されるので、ツリー表示部分を下方向にスクロールして「バッテリ」階層をクリックして展開します。

ここの「バッテリ切れレベル」階層に「何％になったらバッテリ切れレベルだと判断するか」の設定項目がありますので、ここを自由に変更します。(下図のように)

上図では「3％」に設定してみました。
ちなみに、バッテリ駆動時とAC電源接続時とで別々に設定できます。
AC電源接続時にはバッテリが何％であっても別に構わないので設定項目自体が不要なような気がするんですけども(^_^;)、この項目はなぜ存在するんでしょうかね？

上記の設定ツリーでは、「バッテリ残量が少なくなっていますよ」と案内するバルーンを表示するタイミングなども設定変更できます。(デフォルトは残量10％)
お使いのバッテリ環境に合わせて調整すると良いでしょう。

補足：タスクトレイのバッテリーアイコンをクリックしても出せる

上記に掲載したコントロールパネル内の設定場所は、タスクトレイ内にあるバッテリーアイコン(下図)をクリックして、「その他の電源オプション」リンクをクリックすることでも開けます。この方が、コントロールパネル内の階層をたどらずに済むので楽かもしれません。

というわけで、バッテリ残量が少なくなって自動で休止状態に移行する際の「残量％」設定を変更する方法でした。
バッテリが10時間持続する場合は、5％でも30分ですからね……。3％(18分)くらいで良さそうな気がします。
もっとも、バッテリは使えば使うほど正確な残量が出しにくくなりますから、(あまりにも低い値を設定する場合には特に)2～3ヶ月に1回くらいはバッテリ残量補正機能を使って正確な値を出せるように調整した方が良いとは思います。でないと、残量10％の表示からいきなり1％とかに飛んじゃうこともあるので……。(^_^;)

なお、上図はすべて、Panasonic製Let's noteでの例です。「パナソニックの電源管理」と表示されているのはそのためです。が、それは単に電源管理プランの名称設定の問題なので、他のPCでも操作方法は同じハズです。

2015年11月 3日(火) 15時09分43秒 [仕事]

ユーザエージェント名の長短進化

Windows 10 Mobile（Windows Phone 10）に搭載されているブラウザ「Edge」がウェブサーバに対して報告するユーザエージェント名には、「Windows Phone」、「Mobile」、「Android」、「Mozilla」、「AppleWebKit」、「Chrome」、「Safari」、「Edge」の全文字列が含まれているようですね。
もはや何が何だか……。(^_^;;;

特に、Windows Phone 8.1に搭載のMobile IE11のユーザエージェント名に、「like iPhone OS 7_0_3 Mac OS X」という文字列が含まれているのを見て、思わず「節操ないな！」と笑いました。^^;

ユーザエージェント名は、Microsoft（Edge）は長大にする方向、Mozilla（Firefox）は短小にする方向で、真逆に進化しつつある気がします。
望ましいのは、短くする方向だと思うんですけどもね……。

ブラウザ開発側としては、ウェブサイト側がユーザエージェント名を参照して端末を判別して出力コンテンツを切り替えている以上、こうせざるを得ないのかも知れませんが……。
業界で何か統一された標準規格を作ったらいいのに。(^_^;)
利害が対立しすぎて統一しようがないのかな……。^^;

記事を更新するために、最近のユーザエージェント名を調べてみた

All Aboutで公開している記事「PC版とスマートフォン版サイトを自動振り分けする方法」を2年ぶりにちょっとだけ改訂しました。ユーザエージェント名のサンプルとして掲載している内容が古くなっていたので、アップデートしました。他にも全体的に加筆修正していますが。

ユーザエージェント名を調べる目的で、ここ数日間のうちのウェブサイトのアクセスログ内を検索してみました。
モバイル環境では、iPhoneとAndroid Phoneからのアクセスが圧倒的で、次いでiPadやAndroidタブレットからのアクセスがあります。Windows Phoneからのアクセスは（少なくともここ数日間では）1件もありませんでした。(^_^;;;
まあ、Windows Phoneはそもそも販売数自体がまだ少ない（というか、ほぼ「ない」と言っても過言ではない？）ですもんね。^^;
モバイルWindowsも便利になりつつあるので、Windows 10 Mobileが普及し出せば、もっと変わってくるのかも知れませんけども。

ちなみに、モバイル版Firefoxからのアクセスは、ちらほら見かけます。
ただ、どれもAndroid版であって、Firefox OSからのアクセスではなさそうですが。

iPhone・Android 2強のシェアは揺るぎませんね……。
Microsoftパワーは、ここにどれくらい食い込めるのかな……？

2015年11月 2日(月) 12時56分02秒 [仕事]

やっぱりデザイナーさんの存在は必要ですね

もう16年くらいお世話になっている大阪(天王寺)にある会社のウェブサイトを先週にリニューアルしました。
今回はデザイナーさんに協力頂いたこともあって、良い感じの見栄えになりました。
レスポンシブWebデザインを採用していますから、モバイル環境からでも閲覧可能です。

→ http://www.zeroone-pro.com/

リニューアルの打ち合わせ自体は今年の2月にしていまして、そこからデザイナーさんとの打ち合わせも経て6月くらいにはほぼ完成していたんですが。掲載する情報の手配などの都合もあって、今まで公開が延びていたのでした。^^;（一部の情報はまだ未完のままではありますが。）

やっぱりプロのデザイナーさんが関与して下さると、見栄えがとてもよろしいですね。^^;;;
コーディングだけではウェブサイトは作れない、ということでしょうねえ……。(^_^;;;

2015年11月 1日(日) 14時15分33秒 [仕事]

クライアント側のスクリプトで動的出力されたHTMLソースを見る方法(ブラウザ別)

ウェブページの一部をJavaScriptなどのクライアントサイドで動作するスクリプトで生成している場合、「スクリプトが実行された結果として、どんなHTMLソースが出力されているのか？」の内容を確認したい場合があります。
代表的なブラウザの中ではFirefoxが最も簡単に表示できるようで、約3年前にこのブログでもネタにしました。

ただ、最近のブラウザにはどれも解析ツールが内蔵されていて、それを活用すれば、クライアント側のスクリプトで動的に出力されたHTMLソースも含めて表示ができます。なので、Firefoxだけでなく、IE(の開発者ツール)、Chrome(のDeveloper Tools)を使って同様の操作をする方法をまとめて解説した記事をAll Aboutに書きました。

◆JavaScript実行結果として出力されたHTMLソースを見る ＠All About ホームページ作成

ブラウザの「ソースを表示する」機能では単にJavaScriptソースがそのまま見えるだけですが、ブラウザ内蔵の解析ツールを使うなどすれば「スクリプトが出力したHTMLソース」を表示することはどのブラウザでも簡単です。また、動的に生成された内容を他人に説明したい際などには、出力内容をそのままHTMLファイルに保存できると便利です。その方法もブラウザ別に解説しています。