新世代Web構築には必須になりそうな『CodeKit』

最近、Web業界ではCSSコーディングにおける「Less」「Sass」など、本来のCSSの記述では同じような記述が続いてしまうような箇所を、構造化して後からコンパイルなどをしてCSSを組み立てるという、いわゆる「CSS拡張メタ言語」が一般化してきている。

さらに、JavaScriptの世界では、「Node.js」などによってサーバーサイドでもJavaScriptが利用できるようになり、JavaScriptをすっきりと書ける「CoffeeScript」なる言語も登場してきている。

これらのいわゆる「新世代」のWeb技術では、コンパイラをそろえたり、各種ツール類にプラグインを入れるなど、環境を整備しなければならないが、その決定打となるソフトが『CodeKit』だ。(Macのみ)

このソフト、Less、SassとStylus、およびCoffeeScriptに対応していて、各種コンパイルをになってくれる。また、画像の圧縮効率化なども可能だ。エディタソフトなどではなく、補助ソフトとして使い慣れたエディタソフトを使いながら、このツールでコンパイルのみ行うことができる。Lessなどを学習してみようという場合でも、このソフトから始めてみると良いかもしれない。

現在βテスト中で、正式版が発売した場合は10$程度でAppStoreで販売されるらしい。今後の開発が楽しみだ。

iOS 5搭載のiPhoneでヒラギノ明朝を指定する方法

長らく、iPhoneには日本語フォントが「ヒラギノ角ゴシック」しか搭載されていませんでした。しかし、iOS 5からようやく搭載されました。CSSで次のように指定すれば表示することができます。

font-family: ヒラギノ明朝 Pro W6, ‘Hiragino Mincho ProN’

見出しなどに利用するには良いアクセントになりそうです。

WordPressの the_excerpt で抜粋が入力されていない場合に本文を出力しない方法

WordPressの編集画面にある「抜粋」という欄は、「the_excerpt」というテンプレートタグで出力することができます。しかし、このテンプレートタグを利用した場合、抜粋に入力されていないと本文を表示するようになっています。

抜粋文入力欄に記入してあればそれを、抜粋を入力していない場合は投稿内容の最初の 55個の単語までを表示します()。また、抜粋のコンテンツからは HTML タグと画像は取り除かれます。このタグはループ内でのみ使えます。

テンプレートタグ/the excerpt – WordPress Codex 日本語版

ちょっとこれは、場合によっては困った仕様であるため、「抜粋が入力されていない場合は、なにも出力しない」というプログラムにするには、次のようにします。

<?php ($post->post_excerpt != ” ? the_excerpt() : ”); ?>

これで、抜粋があるときのみに表示されるようになります。

iPhoneでBluetoothの電池残量が確認できるのが激しく便利

先日、移動中にiPodでPodcastなどを聞けたらと思い、こちらのBluetoothのヘッドセットを購入しました。

片耳ながら、音楽も聴くことができる上、2代までを同時にペアリングできるため、自宅に帰ってくると自動的にMacにも接続されるという優れもの。

Podcastを聞くなどの用途にはばっちりです。しかし、それ以上に驚いたのがiPhoneにバッテリーの情報が出るようになっていました。

どうやら、対応した端末だと出るようになっているのだとか。前に利用していたものは対応していなかったため、電池の残量がいつも分からず、利用している途中に「ぴぴっ」と警告が出て、まもなく使えなくなってしまうなど、かなり不便をしておりました。

iPhoneに常に電池残量が出てくれるので、充電のタイミングが分かって助かります。また、その充電用のUSBアダプタも、単なるケーブルではなく、ちょっとしたクレードルっぽい作りになっているため、スタンドに立てるような感覚で充電を始めることができるので、こちらも非常に助かります。

思わぬところで、かなり満足度の高い買い物ができました。

Windows PhoneのIE Mobileについての仕様文書を翻訳してみた

Microsoftの MSDNで、Windows Phoneに搭載されているIE Mobileに関する仕様が公開されていました。つたない翻訳技術ですが、日本語訳してみました。間違いなどありましたら、ご指摘ください。

元文書
Designing Web Sites for Phone Browsers

Internet Explorer Mobileは、デスクトップ向けのInternet Explorer 9をベースに開発されています。ここでは、IE9との違いを中心に紹介していきます。

なお、一般的な情報や、モバイル向けWebサイトを制作する上での一般的な知識については「Designing Web Sites for Phone Browsers」をご覧ください。

●標準技術をサポート

IE Mobileは、「Internet Explorer 9 Guide for Developers」に掲載している各技術は基本的に網羅しています。一部サポートしていない機能があるので、この後リストアップします。

・IE Mobileのみがサポートしている機能

デスクトップ版IE9ではサポートされておらず、IE Mobileでのみサポートしているのが次の機能です。

  • GPSを利用した、HTML5 の Geoロケーション。位置情報を取得して利用することができます。
  • Viewportの設定。詳細は後述します。
  • -ms-text-size-adjustプロパティ。詳細は後述します。

・IE Mobileでサポートされていない機能

デスクトップ版IE9ではサポートされているが、IE Mobileではサポートされていない機能です。

  • プライベートブラウジング
  • Tracking protection(?)
  • フィッシング防止機能
  • IE8でのレンダリングモード。IE Mobileでは IE9モードとしてレンダリングします
  • Cross-window communications(複数ウィンドウの連携機能(?))
  • EOT, TTF/OTFおよび WOFFといったフォントファイルのダウンロード
  • CMYK画像
  • VBScript
  • Active X
  • ツールバーやブラウザの拡張機能など
  • Activeドキュメント(?)
  • HTCs, HTML+TIME, VMLなどの過去の技術
  • スクリプトの混在?
  • Surrogate pair(?)
  • JIT support for Jscript

●Viewportについて

Viewportは、ページ内で文書が折り返される領域を制御する設定です。IE Mobileでは、次のプロパティや値をサポートします。

・width
文書の幅。「device-width」または数値(320〜10,000)で指定します。標準は320です

・height
文書の高さ。「device-height」または数値(480〜10,000)で指定します。

・user-scalable
ユーザーが画面を拡大・縮小できるようにするかを「yes」または「no」で設定します。標準は「yes」です。

【コラム】
現状の IE Mobileでは「minimum-scale」「maximum-scale」「initial-scale」の各プロパティはサポートしていません。

●Adjusting Text Sizeについて

IE Mobileは、ページ内のフォントの大きさを、CSSの「-ms-text-size-adjust」プロパティで調整することができます。

標準では、画面をダブルタップして拡大した場合などに、IE Mobileは自動的にフォントの大きさを調整して読みやすく設定します。これを無効にすれば、この自動調整を止めることができます。

【コラム】
viewportタグが存在する場合には、「-ms-text-size-adjust」プロパティは無視されます。

・html要素に対して、無効にした場合のサンプル
html { -ms-text-size-adjust: none }

・body要素に対してautoに設定した場合のサンプル
body { -ms-text-size-adjust: auto }

・div要素に対して150%に設定した場合のサンプル
div { -ms-text-size-adjust: 150% }

●固定位置指定について

CSSで位置を固定指定した場合、デスクトップ版のIE9とその挙動は異なります。

デスクトップ版の場合、画面に対して固定されます。そのため、上下左右にスクロールしても常に同じ場所に表示されます。しかし、IE Mobileの場合はコンテンツに対しての固定になります。そのため、例えば「右下」に固定した場合、ユーザーはページを一番下までスクロールしたときに、その要素を見ることができます。

(筆者補足:つまり、IE Mobileでは現状 position: fixedは期待通りには動作しないということのようです)

【コラム】
画面を拡大した場合、それに伴って固定コンテンツも拡大されます。

●プラグインの未サポート

デスクトップ版と異なり、IE Mobileではユーザーがサードパーティ製のプラグインやActive Xコントロールをインストールすることはできません。

●参照ページ

Designing Web Sites for Phone Browsers

iOS 5では、overflow:scrollやtextareaが一本指でスクロール

これまで、iPhoneでは「フレーム」と「overflow:scrollでのスクロール」および、「テキストエリア(textarea要素)」は鬼門でした。

なんせ、スクロールがやりにくい。2本指でスライドすればスクロールできるのですが(テキストエリアはできない)、とても普通の人には分からない操作ですし、そもそもやりにくい。そのため、「使わない」というのが定説でした。

しかし、ふと iOS 5になってから試してみると、しれっと1本指でスクロールできるようになっているじゃありませんか。さすがにアップルも仕様変更を余儀なくされたようです。

とはいえ・・今度は、「触った場所によってスクロールされる場所が違う」という、困った問題が今度は発生してしまいます。おそらく、アップルも最初はそれが嫌で、2本指スクロールを選択したのではないかと思いますが、どちらにしても痛し痒しな感じです。

ここはやはり、スマホサイトでは「インラインフレーム」「overflow:scroll」「textarea」は、使わないということで、貫いた方が良さそうです。

ちなみに

ちなみに、テキストエリアは使わないわけにはいかないと思いますが、autoResize.jsなどを使ってあげると、行数に応じて伸びてくれるので、スクロールは発生しなくなって便利です。

モリサワパスポートのインストール時は「全選択」を忘れずに

モリサワパスポートの2011年度パッケージをインストールしました。しかし、もう一人同じパッケージをインストールしているメンバーからもらったデータを開くと「フォントが足りません」という警告。

確かに「全選択」を選んでインストールしているはずなのに、なぜ入らないフォントがあるのだろう? ということで、サポートに聞いてみました。

すると、「フォント選択画面で「全選択」の”ラジオボタン”を選んでから、「全選択」のボタンをクリックしてインストールするとのこと」。なるほど確かにありました。

うぅむ、ちょいとややこしい。というか、前バージョンにこんなラジオボタンありましたかね? フォントの数が増えすぎたので、絞り込みがかかるようになったのでしょうか? ちょっと注意が必要ですね。