スマートフォンに関する「言葉」いろいろ

皆さんは、「スマートフォン」のことを略すとき、なんと呼びますか? 「スマフォ」? 「スマホ」?

私がイベントなどでお話をするときに、定番としているトークの一つです。迷うところですが、現状では「スマホ」と呼ぶ方が圧倒的のようです(Googleでの検索結果より判断)。この他、スマホ業界にはさまざまな呼び方があります。ここでまとめておきましょう。

ガラケー

これはもう定番ですが、スマートフォンに対してこれまで日本国内で販売されていた主な端末のことを「ガラパゴス携帯」で略してガラケーと呼びます。

フィーチャーフォン

その「ガラケー」はちょっとイメージがよくないと言うことで、最近国内端末のことを「feature」という英語、これは「特徴」とか「注目する」みたいな意味がありますが、そこからフィーチャーフォンと呼ばれたりしますが、もう一息普及していていない上に、ちょっと間違えて「フューチャーフォン(future phone)」などと呼んじゃったりして、「未来の携帯」になってしまったりするので注意が必要です。

ガラスマ(ガラパゴススマートフォン)

Android端末は、米国や香港などのメーカーから世界中で販売されている端末と、NECや富士通などの国内メーカーが、国内専用に開発している端末があります。後者の場合、ワンセグやおサイフケータイなど、従来のガラケーにあった機能が搭載されています。

これを「ガラパゴス」+「スマートフォン」で略して「ガラスマ」と呼んでいるようです。

グロスマ(グローバルスマートフォン)

対して、前者の世界標準の端末は、グローバルなスマートフォンで「グロスマ」です。

スマケー(スマートフォンケータイ)

スマートフォンと言えば通常、全面がタッチパネルになっていますが、従来のような二つ折り携帯なのにAndroidを搭載している端末が登場しています。これを、スマートフォン+ケータイで「スマケー」と呼ぶようです。Softbankが提唱しています。

なにやら、用語が続々と増えていて訳が分からなくなってきております。今後も、どんな独特な言葉が生まれていくのか、注目していきましょう。

[WordPress] UserAgent Theme Switcherで、iPadと Androidに対応させる

WordPressで、スマートフォンにのみテーマを変更する際、専用のプラグインも多数ありますが、大抵はテーマとセットになってしまっているため、全くオリジナルのデザインを適用するには、別のアプローチを取る必要があります。

そこで便利なのが「UserAgent Theme Switcher」。スマホに限らず、ユーザーエージェントで判定して、自由にテーマを切り替えることができます。

しかし、こちらのプラグイン、ちょっと困った点があります。

  • iPadがスマートフォンとして認識されてしまう
  • Androidで切り替わらない

そこで、プラグインを少し改造します。なお、ちょっとはまったのがプラグインにはXMLファイルが用意されているため、てっきりこれで制御できるのかと思ったのですが、現状ではこのXMLは使われていないようです。。なぜ・・ ということで、PHPを直接編集します。

/wp-content/plugins/user-agent-theme-switcher/UserAgentThemeSwitcherData.php をエディタで開いて、300行目付近の次の記述を見つけます。


$this->addBrowser(new BrowserUA(‘operadesktop’, ‘Opera’, null, ‘^Opera/[d.]+( ){0,1}(.*).*$’, ‘opera’));
$this->addBrowser(new BrowserUA(‘safarimobile’, ‘Safari Mobile’, null, ‘^Mozilla/5.0 (.*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));
$this->addBrowser(new BrowserUA(‘operamini’, ‘Opera Mini’, null, ‘^Opera/.* (.*Opera Mini/.*).*$’, ‘opera,mobile’));
… 

この、太字になった部分(safarimobileと書かれている行がポイント)を次のように書き換えます。


$this->addBrowser(new BrowserUA(‘operadesktop’, ‘Opera’, null, ‘^Opera/[d.]+( ){0,1}(.*).*$’, ‘opera’));
$this->addBrowser(new BrowserUA(‘safarimobile’, ‘Safari Mobile’, null, ‘^Mozilla/5.0 ((iPhone|iPod).*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));
$this->addBrowser(new BrowserUA(‘androidmobile’, ‘Android Mobile’, null, ‘^Mozilla/5.0 (Linux; U; Android.*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));

$this->addBrowser(new BrowserUA(‘operamini’, ‘Opera Mini’, null, ‘^Opera/.* (.*Opera Mini/.*).*$’, ‘opera,mobile’));
… 

行ったこととしては、「Safari Mobile」をiPhone/iPod touchのみにするために正規表現を少し細かくしています。また、Android用の判定がないので、付け足しています。

これで、動作を確認しました。プラグインを直接書き換えてしまっているため、バージョンアップするとパターンが消えてしまいますが、XMLなどで制御できるようになりそうな感じなので、今後のバージョンアップに期待ですね。

なお、こちらの内容は2011/11/27のWordCamp Tokyo 2011で発表します。

iOS 4以前の iOS Simulatorをインストールするには

※先にご注意:この方法は、途中でインストーラーがクラッシュしますので、XCodeの本体やMac OS Xに何らか影響を与えてしまっている可能性があります。試される場合は、十分ご注意ください。

Mac OS X Lionにして、iOS Simulatorをインストールしようと App Storeから XCodeをインストールすると、なんと最新版のシミュレータには「iOS 5」のものしか収録されていません。

仕方がないとあきらめていたのですが、to-Rのブログにこんな記事が。

もしやと思って、みてみたのですが残念ながら私の環境には、そのフォルダはありませんでした。どうやら、アップデートをした場合にはバックアップが保持されるもよう?

しかし、複数バージョンを同居できるということが分かったので、後からインストールできないかを試してみました。

旧バージョンのXCodeは次のサイトで配布されています。

ダウンロードして解凍し、セットアップを始めると間もなくインストール先を聞かれます。ここで、「Other」を選んで適当なフォルダを選び、インストールを開始します。

しかし・・残念ながら順調には行きません。なぜか、途中で「iTunesが起動しているので終了しろ」といったエラーメッセージが表示されてしまいました。iTunesを終了しても、もう一度起動してから終了をしてもダメ、セットアップ開始前にiTunesを終了してから始めても、やっぱりダメです。3回もインストールをやり直す羽目になりました。。

仕方がないので、そこでインストーラーは強制終了してしまいましょう。おそらく、XCodeは正しく入っていないのですが、iOS Simulatorは正常に起動します。

こうして、iOS 5のシミュレータとそれ以前のシミュレータを同居させることができました。しかし、アップルよ・・過去のOSのシミュレーションができないと、シミュレータの意味がないのではないでしょうか・・アップルの潔さが、かなり裏目に出ている現象な気がしてなりません。

    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