Facebookでメッセージをやりとりするときは、「友達登録」をしよう

Facebookのメッセージ機能は、ある条件でメッセージが「その他」というフォルダに振り分けられてしまいます。

ここに分類されてしまうと、通知のメールも来ないですし、メインページからも見られないため、「見落としていたー」という被害が続出しています。

@tsubさんに教えてもらったところによると、ここに振り分けられるのは「友達」または「友達の友達」以外からのメッセージが振り分けられてしまうとのこと。リアルの世界で友人でも、Facebookでうっかり友達登録していない場合は、こちらに入ってしまうようですね。

Facebookでメッセージを送るときは、まずは相手が友達かどうかを確認し、そうでなかったら先に申請をしてからメッセージをやりとりした方が良いかもしれません。SPAM防止策とはいえ、ちょっと困った現象ですね。

ちなみに、「その他」に振り分けられてしまったメッセージは手作業で戻すこともできます。

今さらながらの CSSメタ言語『less』入門

最近、CSSは素のまま書かずに「less」とか「sass」とか「scss」などのいわゆる「メタ言語」で記述するのが一般的らしい。そんな話は聞いていたのですが、忙しさにかまけて勉強を怠っておりました。

ようやく調べてみたものの、どうやら最近少しやり方なども変わってきたようなので、今さらながらメモ。私と同じく乗り遅れてしまった方は、これを機会にやってみてはいかが?

メタ言語ってなに?

そもそもメタ言語とはなにか。それは「ある言語を定義するための言語」という、混乱しそうな説明ですが、要するに「CSSを生成するための別の記述」のこと。CSSには、例えば「見出しと、あるエリアには同じ色を使いたい」という場合にも、変数などの概念がないため、次のように2回同じ記述をしなければなりません。

#header {
    ….
    color: #4d926f;
}
h2 {
    ….
    color: #4d926f;
}

そこで、メタ言語を用いると変数などの概念を取り入れて、次のように記述することができ、

@color: #4d926f; /* これが「変数」 */

#header {
    color: @color; /* この「@」から始まるキーワードが後で置き換わる */
}
h2 {
    color: @color;
}

これを「コンパイル」という操作でCSSに変換することで、CSSの管理を楽にするという手法のこと。プログラミングの世界では一般的なことですが、HTML/CSSのマークアップエンジニアの方にとっては、ちょっとピンと来ない概念かもしれません。慣れればぐっと便利になるでしょう。

JavaScriptライブラリを取得

lessは、どこかのバージョンからJSライブラリが提供されているようです。少し前の入門記事などではRubyをインストールして、コンパイルといった操作になるため、かなり面倒でしたが、今は非常に楽です。

次のサイトからダウンロードして、組み込みます。

そしたら、上記の lessの記述をコピーして、新しいファイルに貼り付け、「style.less」などのファイル名で保存します。そして、HTMLからは次のようにしてこのファイルにリンクします。

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>
<script type=”text/javascript” src=”less.min.js”></script> 

ポイントは「rel」属性が通常「stylesheet」なのに対して、lessの場合は「stylesheet/less」となっています。これに反応して、JSライブラリがリアルタイムでCSSに変換するというわけです。

こうしてページを表示すると、問題なくWebページを表示することができます。

コンパイルする

このまま運用することも可能ではありますが、このままだとJavaScriptが利用できない環境では、スタイルが一切あたらないことになります。また、表示速度も遅くなってしまいます。そこで、完成したlessファイルを「コンパイル」して、CSSファイルとして保存します。

これにもやり方がいくつかあるようですが、このブログでも紹介したCodeKit」などのソフトを使うのが簡単そうです。後は、作ったCSSを通常通りリンクすれば、これまで通り使うことができます。CSSを変えたいときは少し面倒ですが、lessをいったん変更した後、コンパイルをしてCSSをアップロードし直すという作業になります。

他の方法との違い

冒頭で紹介したとおり、CSSのメタ言語には現在この「less」の他に「sass」や「scss」といった方法があるようで、どれが主流というわけでもないようです。lessはシンプルに記述できるが、機能が少ないというレビューもあるようで、物足りなくなったりする可能性があります。

他の方法とも比べて、最良方法を選択できると良さそうです。また、学習が進んだら記事を書こうと思います。

    新世代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年度パッケージをインストールしました。しかし、もう一人同じパッケージをインストールしているメンバーからもらったデータを開くと「フォントが足りません」という警告。

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

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

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