2014年2月24日月曜日

Androidが4.4で絵文字にちゃんと対応した

というわけで、随分前のことなんですが、

絵文字を入力できるマッシュルームアプリを作りました！

絵文字マッシュ - Google Play の Android アプリ
https://play.google.com/store/apps/details?id=jp.mstssk.emoji_mush
公開したのは2013年11月18日なんですが、サボってblog書いてませんでした。

※以下、絵文字について知ってることをつらつら書いています。間違ってたら、Twitterかコメント欄でツッコんでください。

KitKatで絵文字を改めてサポートした

2013年10月31日にリリースされた Android 4.4 KitKat にて、絵文字への対応が一新され、カラフルな絵文字がしっかり表示されるようになりました。
Android - 4.4 KitKat
http://www.android.com/versions/kit-kat-4-4/
4.3 Jelly Bean 以前でも絵文字は表示できていましたが、いくつかのものが白黒で表示されるのみで、殆どが表示できていない状態でした。
※メーカーのカスタムにより絵文字フォントがなくなってしまっている機種もあります。

ガラケーの絵文字に対応したわけではない

KitKatで対応したのは、Unicode 6で定義された絵文字です（最終的にUnicodeに含まれなかったものもサポートされています）。
ガラケーの絵文字については、各キャリアから販売されているAndroid端末は元々対応しています。

今回の絵文字対応というのは、ざっくり言ってしまえば「iPhoneで使ってる絵文字がAndroidでも表示されるようになったよ」という事だったりします（絵は違っています,後述）。
元々、iPhoneの方が先行してUnicodeの絵文字を表示・入力できるようにはなっていました。
そもそもUnicodeの絵文字は、ガラケーの絵文字を元にGoogleとAppleが共同でUnicodeに提案したものが元になっているのです。
絵文字の符号化提案は Google および Apple 社によって共同提案され、2009 年 2 月 6 日に Unicode 技術委員会にて正式に了承されました。

Google Japan Blog: 絵文字の Unicode 符号化に関するアップデート
http://googlejapan.blogspot.jp/2009/03/unicode.html

そのため、iPhoneではUnicodeの絵文字（最終的にUnicodeに含まれなかった物も含めて）をサポートしており、遅れながらもAndroidも対応するようになりました。

勿論、ガラケーの絵文字をそのまま国際的な規格に持っていけるわけがありません。
そのゴタゴタについて特集したコラムがあります。読み物としても面白いのでオススメです。
特集 : 絵文字が開いてしまった「パンドラの箱」 - CNET Japan http://japan.cnet.com/sp/column_emojipandora/

ガラケーの絵文字は？

国内のJelly Bean以前のAndroid端末では、ATOK for Androidなどの絵文字入力機能を使うことで、従来のガラケーの絵文字を入力できていました。
実はこの時入力しているの絵文字は、Unicodeのものではなく、Googleが独自に定義したコードポイントだったりします。これは、Unicodeへの提案より前にGmailでガラケーの絵文字を相互置換するようにした際の、中間コードとして定義されたコードポイントです。
相互置換機能の成果物が emoji4unicode として公開され、それを元にUnicodeへの提案も行われました。

emoji4unicodeによる、各キャリアとGoogleの定義したコードポイントの対応表は、Unicodeコンソーシアムのサイト上で公開されています。
Emoji Symbols: Background Data
http://www.unicode.org/~scherer/emoji4unicode/snapshot/full.html
※サイズが大きいページなので注意！

ちなみに、キャリアメールソフト上での絵文字入力機能については、手元に環境が無いし普段使ってないので調べてません。
同様にGoogleのコードポイントで入力しているか、何かゴニョゴニョしてるんでしょう。いずれにせよ、メールサーバ側で各キャリアの絵文字の相互置換が必要なので、あまり変なことはしていないと思います。

デザインしたのは日本の会社

Googleが Googleハングアウト で使われていた絵文字を AOSP にポーティングしたことで、Androidでこんなに綺麗な絵文字が使えるようになりました。
そして、このハングアウトの絵文字は日本の IC4DESIGN という会社が作ったものでした。すごい！
日本の絵文字を世界へ: 日々の日記
http://ic4design.cocolog-nifty.com/ic4design/2013/05/post-f655-5.html
google hongout of IC4DESIGN'S WORKS
http://ic4design.com/top4/Coner/pg839.html

ちゃんと表示されない絵文字もある

至れり尽くせりかと思った絵文字対応ですが、「数字の囲み文字」と「国旗絵文字」はまだちゃんと表示されない様です。

「数字の囲み文字」と「国旗絵文字」自体については、下記ページを読んでいただければ面倒くさいことがわかると思います。
絵文字だョ! 符号化文字集合(後編) | mixi Engineers' Blog
http://alpha.mixi.co.jp/2012/10663/

つまりは、特別な文字の組み合わせで1つの絵文字を表すものが軒並みちゃんと表示されていないんです。
Nexus5(4.4.2 KitKat)で実際どのようになっているかちょっと調べてみました。
Unicode 文字 数値参照 期待している表示 実際の表示 期待している表示が実際に割り当て
られている文字(Googleによる独自定義)
U+0031 U+20E3 1⃣ 1⃣







U+FE82E
U+1F1EF U+1F1F5 🇯🇵 🇯🇵







U+FE4E5
※画像はNexus5(4.4.2 KitKat)でのハングアウトアプリ上の表示のキャプチャ。日の丸のみWebのハングアウトのキャプチャ。

囲み文字はちゃんと直前の文字と結合していないし、国旗も Regional Indicator Symbol の代替アルファベット表示になっています。
その代わり？に、本来表示されて欲しい文字シンボルはGoogle独自定義のコードポイントに割り当てられています。
かと言って、Google独自定義のコードポイントの方ならすべてちゃんと表示されるかというと、そうではありません。Nexus 5で試したところ、Google独自定義のコードポイントで表示されるのは、この囲み文字と国旗絵文字だけでした。

ちなみに、問題の絵文字はKitKatのデフォルトのキーボードの絵文字パレットにも含まれていません。「あぁ、結合文字対応するの諦めたんだろうなー」と思ったりしましたが、ちゃんと表示されてくれないのはやっぱり嫌なのでAOSPにチケットは投げておきました。是非皆さん★を付けましょう。
Issue 66045 - android - Several emoji symbols(Keycap numbers and Regional flags) are not correctly with KitKat. - Android Open Source Project - Issue Tracker - Google Project Hosting
https://code.google.com/p/android/issues/detail?id=66045

アプリ作成時の愚痴



参考

  • List of iOS Emoji http://www.grumdrig.com/emoji-list/
  • Emoji unicode characters for use on the web http://apps.timwhitlock.info/emoji/tables/unicode
  • emoji4unicode - Emoji for Unicode: Google Emoji private use mapping data and tools - Google Project Hosting https://code.google.com/p/emoji4unicode/
  • Emoji Symbols - Unicode Symbols https://sites.google.com/site/unicodesymbols/Home/emoji-symbols
  • Unicode絵文字とキャリア絵文字 http://www.slideshare.net/hiroakiohashi148/unicode-24674603
  • NotoColorEmoji.ttf - platform/external/noto-fonts - Git at Google https://android.googlesource.com/platform/external/noto-fonts/+/kitkat-release/NotoColorEmoji.ttf

    ↓サイズが大きいページなので注意
  • Emoji Symbols: Background Data http://www.unicode.org/~scherer/emoji4unicode/snapshot/full.html
  • Emoji unicode characters for use on the web http://apps.timwhitlock.info/emoji/tables/unicode

    変更履歴

    修正 2014-04-11
    Nexus 5のAndroidのバージョンを間違えていたので修正。
    4.4.3 -> 4.4.2
    • 投稿者 mstssk 0 コメント ラベル: , , , , , ,

    2013年7月26日金曜日

    gitはじめて勉強会

    先日、内輪でgitの勉強会で講師をやってきました。

    資料

    当日使ったスライド。
    あまりgitはどうだなんだという説明はせず、とにかくハンズオンでやってみる事が目的でした。


    反省点

    講師っていうのは初めてだった事もあり、諸々反省点がありました。
    • 内容が参加者に合っていなかった
      講師の都合でterminal上での操作前提の内容にしていたけど、慣れていない人に教えるにはやはりSourceTreeなど使った方がいいかもしれない。
      自分では commit や diff 見る程度はEclipse上でやるけど、その他はterminal上でばっかり操作していて、他のやり方を教えられるほど知らないのがネック。

    • つめこみ過ぎた
      git init から push まで粗方詰め込んだ上で、その他のコマンドの説明も諸々…という内容にしたら、目的が何処かに行ってしまった感じになった。
      色々やるより、必要最低限をしっかりやる方が最初のとっかかりとしては良さそう。
      細かい説明はいちいちせずに「○○をするにはどうするか」という目的ベースで進めた方が覚えやすいかな。

    • 脱線し過ぎた
      ただでさえ詰め込みすぎて時間の余裕があまり無いのに、途中途中の質疑応答に時間をかけすぎた。push の話をする頃にはタイムオーバーだった…
      場合によってはバッサリ時間を切って進めて、時間配分をずらさないようにしないと、なかなか話が進まない。

    第2回があるかどうかは皆の声援次第。
    投稿者 mstssk 0 コメント ラベル: , ,

    2013年5月16日木曜日

    PlayMusicアプリが新しくなってた

    Google I/O 2013の開催と同時にPlayMusicのAndroidアプリが更新されてたのでちょろっと書きなぐった。

    所感メモ


    投稿者 mstssk 0 コメント

    String.prototype.replaceのコールバック関数

    jsの String.prototype.replace メソッドは正規表現とコールバック関数を使った時、コールバック関数の引数が正規表現のマッチグループの数によって変わる。
    知らなかったので、ちょっと試して確認した時のメモ

    GoogleChrome バージョン 24.0.1312.52 で動作を確認したもの

    ただの文字列：

    1:マッチした部分
    2:マッチしたインデックス
    3:元の文字列全体

    グループの無い正規表現：例 /[a-z]/

    ただの文字列の場合と同じ

    グループが1つの正規表現：例 /a([a-z])/

    1:正規表現マッチした部分
    2:マッチしたグループ部分
    3:マッチしたインデックス
    4:元の文字列全体
    試したコード
    "abcd".replace(/a([a-z])/, function(a,b,c){console.log(a,b,c);return a;});

    グループが2つの正規表現：

    1:正規表現にマッチした部分
    2:マッチした1つ目のグループ部分
    3:マッチした2つ目のグループ部分
    4:マッチしたインデックス
    5:元の文字列全体
    試したコード
    "abcd".replace(/a([a-z])([a-z])/, function(a){console.log(arguments);return a;});

    グループが3つの正規表現：

    マッチした部分の引数が増えて、インデックス・元の文字列全体が後ろにずれる。

    まとめ

    正規表現にgオプションを付けた場合も、それぞれのマッチ部分に対してそれぞれ上記同様にコールバック関数が呼ばれる。

    仕様書を読むと、
    第1引数：マッチした部分文字列
    マッチグループ(captures)の数分の引数
    マッチグループ(captures)の数+2番目の引数：マッチしたインデックス(マッチした文字列までのoffset)
    マッチグループが無いなら第2引数。1つあれば第3引数。2つあれば第4引数。
    マッチグループ(captures)の数+3番目の引数：元の文字列

    MDNのページに大分詳しく載ってる。

    参考

    投稿者 mstssk 0 コメント ラベル: , ,

    2013年2月7日木曜日

    UbuntuでのEclipseのツールチップの色を変更する

    Unity採用以後のUbuntuで使われているGnomeのAmbianceテーマは、Eclipse上でのツールチップ表示の背景が真っ黒になってしまって見辛いったらありゃしない。
    背景色を変更する方法を見つけたのでメモ。

    テーマの色を変更する方法

    themes - How to change tooltip background color in Unity? - Ask Ubuntu
    http://askubuntu.com/questions/70599/how-to-change-tooltip-background-color-in-unity
    上記Q&Aでは、回答として大別して3つの方法が寄せられている。
    1. テーマの設定ファイルを直接書き変える
    2. gnome-color-chooser を使う
    3. ~/.gtkrc-2.0 に記述する
    今回は3つ目を採用。/usr/の下を直接書き換えるのは気が引けるし、~/.gtkrc-2.0 は作ってあってコピペできる記述例もあったので、gnome-color-chooserをインストールするより早いだろう、と。

    設定ファイルの内容

    ~/.gtkrc-2.0 に以下を記述する。
    style "gnome-color-chooser-tooltips"
{
  bg[NORMAL] = "#FFFFAF"
  fg[NORMAL] = "#000000"
}
widget "gtk-tooltip*" style "gnome-color-chooser-tooltips"

    参考ページにある例では、~/.gtkrc-2.0-gnome-color-chooserという別ファイルに記述して、そのファイルを読み込む設定（include ".gtkrc-2.0-gnome-color-chooser"）を~/.gtkrc-2.0に記述するようになっているが、手っ取り早く直接記述した。
    これでツールチップが見覚えのあるクリーム色になった。

    環境

    • Thinkpad x201s
    • Ubuntu 12.04.1 LTS Precise Pangolin
    • Eclipse 3.7 Indigo
    投稿者 mstssk 1 コメント

    2013年1月23日水曜日

    GoogleChromeはページを指定してPDFを開ける

    GoogleChromeの内蔵PDFビューワはページを指定してPDFを開けます。

    PDFのURLの末尾に「#page=5」とか付けるだけ。

    ↓の場合なら、PDFの4ページ目を開いてくれます。
    http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=4

    ページ番号は0から始まるので注意。
    投稿者 mstssk 0 コメント ラベル: ,

    2013年1月18日金曜日

    ちょっと賢いgit graph

    git logコマンドは--graphオプションなどの組み合わせで、良い感じにコミットグラフを表示させる事ができます。
    git log --graph --date-order -C -M --pretty=format:\"<%h> %ad [%an] %Cgreen%d%Creset %s\" --all --date=short
    Gitのちょっと便利な使い方 (ゆめ技：ゆめみスタッフブログ) http://yumewaza.yumemi.co.jp/2010/07/git.html より

    git config --global alias.graph 'log --graph --date-order -C -M --pretty=format:"<%h> %ad [%an] %Cgreen%d%Creset %s" --all --date=iso'
    1 Entry per Day: git graph http://mstssk.blogspot.jp/2012/03/git-graph.html より

    ブランチやオプションの指定をしたい

    上記のままでも良い感じですが、普通のgit log同様にブランチを指定したりなどしたい。
    そこで、シェルスクリプトを作ってそれをgit graphというエイリアスで実行できるようにしてみる。

    gitのエイリアス設定は、!マークを先頭に付けると任意のシェルコマンドを実行させられる。
    git config --global alias.graph '!~/.git-graph.sh'
    ※設定出来るシェルコマンドはあくまで1つだけらしい。コマンドをパイプで繋ぐ事は可能だったが、セミコロンが使えないので制御文をワンライナーで記述したりは出来ない。

    .git-graph.sh の中身

    実行例1：オプション無しなら--allオプションを自動で付加して実行する
    $ git graph 
* <b4840e1> 2013-01-16 22:38:56 +0900 [mstssk]  (HEAD, master) F
* <93d7f2c> 2013-01-16 22:38:50 +0900 [mstssk]  E
| * <659324a> 2013-01-16 22:38:28 +0900 [mstssk]  (experiment) D
| * <1210e5e> 2013-01-16 22:38:18 +0900 [mstssk]  C
|/  
* <3251633> 2013-01-16 22:32:08 +0900 [mstssk]  B
* <4264244> 2013-01-16 22:31:56 +0900 [mstssk]  A
* <4a0ab4a> 2013-01-16 22:28:16 +0900 [mstssk]  first commit

    実行例2：ブランチ名を指定すれば、そのブランチのlogだけを表示
    $ git graph experiment
* <659324a> 2013-01-16 22:38:28 +0900 [mstssk]  (experiment) D
* <1210e5e> 2013-01-16 22:38:18 +0900 [mstssk]  C
* <3251633> 2013-01-16 22:32:08 +0900 [mstssk]  B
* <4264244> 2013-01-16 22:31:56 +0900 [mstssk]  A
* <4a0ab4a> 2013-01-16 22:28:16 +0900 [mstssk]  first commit

    実行例3：日付形式を変更。※シェルがテキトーなので--allが付かなくなる。
    $ git graph --date=local 
* <b4840e1> Wed Jan 16 22:38:56 2013 [mstssk]  (HEAD, master) F
* <93d7f2c> Wed Jan 16 22:38:50 2013 [mstssk]  E
* <3251633> Wed Jan 16 22:32:08 2013 [mstssk]  B
* <4264244> Wed Jan 16 22:31:56 2013 [mstssk]  A
* <4a0ab4a> Wed Jan 16 22:28:16 2013 [mstssk]  first commit

    tab補完もしたい

    ここまで来たらtab補完もしたい。
    git logと同じ補完をしてくれるようにするには、以下の設定ファイルを ~/.bash_completion という名前で置いておく。
    既に ~/.bash_completion があるなら、追記すれば良い。
    投稿者 mstssk 0 コメント ラベル: ,

    2013年1月14日月曜日

    UbuntuでGooglePlayの映画を視聴する

    UbuntuでGooglePlayで映画見ようと思ったら全然再生できなくて、ググって初めてGooglePlayの映画の「システム要件」ページの存在を知ったのでメモ。何でサイトフッタにリンク置いておかないんだろう。

    環境

    • Thinkpad x201s
    • Ubuntu 12.04.1 LTS Precise Pangolin
    • Google Chrome 24.0.1312.52

    再生するには

    Ubuntu または Linux OS をお使いの場合は、HAL モジュール（リンク先は英語）もインストールする必要があります。

    というわけで、Ubuntuで一瞬採用されて2バージョン後くらいにすぐ使われなくなったあの hal をインストールする必要があるそう。
    引用内のリンク "HAL モジュール" はAdobeのFlash Playerで保護されたコンテンツを視聴するための要件についてのヘルプページになっている。
    Google PlayではDRMにAdobe Flash Accessを使っていてその動作にHALが必要、という事なんだろう。

    以下、そのページ「Problems playing protected video content | Ubuntu Linux, Flash Player 11」の内容をざっくりと。

    保護されたコンテツを再生する準備


    halをインストールする。
    sudo apt-get install hal

    インストールした後、ブラウザを閉じてから、Adobe Accessのキャッシュをクリアしておく。
    cd ~/.adobe/Flash_Player
rm -rf NativeCache AssetCache APSPrivateData2

    この他、別のディストリビューションや64bit環境向けの説明もあるので、適宜実施。

    保護されたコンテツを再生出来るかテスト


    http://drmtest2.adobe.com:8080/SVP/SampleVideoPlayer_FP.html を開いて、画面上部の"Input the video URL:"というテキストボックスにhttp://drmtest2.adobe.com:8080/Content/anonymous.f4vを入力してから、「Play」ボタンを押す。

    上手く行けば、ランセンス情報などをロードする処理の後にデモ動画が再生される。

    GoogleChromeで再生できない場合


    ここまでやっても、GoogleChromeでは再生できなかった。
    今回だけではなく、GoogleChrome内蔵のFlashプラグインの挙動が怪しいことは以前からあり、その度に「内蔵プラグインを無効にして、システムにインストールされてる方のFlashを使うようする」という対処をしていたので、今回も実施。
    1. chrome://plugins/にアクセス。GoogleChromeのプラグイン設定画面が表示される。
    2. 画面右端のリンクを操作して詳細表示にする。(もともと詳細表示ならそれでOK)
    3. Adobe Flash Playerの項に、2つプラグインが表示されているので1つ目(Chrome内蔵のPepperFlashプラグイン)を無効にする。
    4. 先述の「保護されたコンテツを再生出来るかテスト」を実施して確認する。内蔵プラグイン無効化後に、テストページはリロードしておくこと。
    投稿者 mstssk 0 コメント ラベル: , , ,

    2013年1月5日土曜日

    UbuntuでSublimeText2の入力補完が出来ない時

    # ハマったので、備忘録としてと同じ轍を踏む人のためのエントリ

    問題

    Q. あれ？ UbuntuのSublimeText2で ctrl+space で入力補完出来ないぞ！？
    A. 落ち着け。Linux版だと入力補完のキーバインドの初期値は alt+/ だ

    何故？

    ダウンロードページにあるchangelogに書いてある。正式にVersion 2.0になったタイミングで変わったらしい。 ctrl+space だとIME切り替えのキーバインドと被るからね。
  • Linux: Show Completions has changed from ctrl+space to alt+/, to not interfere with IMEs
    • 「Sublime Text - Download http://www.sublimetext.com/2」から

    普段は半角/全角キーを使うか、mac風に変換キーのキーバインドを変えてIMEのon/off出来るようにしてるので、これにハマった時になかなか思い至らなかった。

    workaround

    今は、以下のような設定をPreferences -> Key Bindings-Userに記述している。
    [
  { "keys": ["ctrl+space"], "command": "auto_complete" },
  { "keys": ["ctrl+space"], "command": "replace_completion_with_auto_complete", "context":
    [
      { "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
      { "key": "auto_complete_visible", "operator": "equal", "operand": false },
      { "key": "setting.tab_completion", "operator": "equal", "operand": true }
    ]
  }
]

    Preferences -> Key Bindings-Defaultから入力補完の設定部分の記述をコピーして ctrl+space に書き換えただけ。
    投稿者 mstssk 0 コメント ラベル: , , ,

    2012年12月28日金曜日

    drawable.xmlで遊んでみる #androidadvent2012

    これはAndroid Advent Calendar 2012の12月28日＜表＞のエントリです。

    @kinnekoさんの＜裏＞記事もどうぞ。
    Supersonicで自前のGoogleMusicを実現する http://d.hatena.ne.jp/kinneko/20121228/p1


    こんにちは。最近、公私共に全然Androidの開発やってない@mstsskです。

    昨年のAndroid Advent Calendar 2011では、先にJPPの太鼓持ちjsonというテーマを決めていたので、「Androidアプリで使えるJSONライブラリ比較」という記事を書きました。

    ですが、今回は記事に出来るような事がなーんにもない状態で、勢いでAdvent Calendarに参加を決めちゃいました。

    ううむ。どうしよう…

    そうだ！ Androidと言えば、drawableがある。Shape Drawableを使えば、画像ファイルを用意せずともxmlの記述だけで画面解像度に依存しない図形を描画できる。 #小芝居
    でも、描けるのはあくまでも簡単な図形だけらしい… そこで、drawable.xmlで絵が描けるか試してみました。


    ドロイド君を drawable.xml だけで描いてみた



    はい。読み飛ばした方、こんにちは。

    いかかでしょうか。ドロイド君くらいならxmlの記述だけで描けてしまいます。
    colors.xmlだけは作りましたが、1ソースで済ませるという縛りでやってみたので大分冗長になっちゃってるのはご愛嬌。
    まぁ、ちゃんと分けたとしてもあまり綺麗にはならなそうだったというのもありますけど。



    ふー。終わった終わった。これで肩の荷が降りたわー。あー良かった。

    ん。そういえば、他にも同じ事やってる人いたりしないよな… まさかな…


    ………………

    [drawable ドロイド君][検索]

    …………

    検索結果に…

    ……

    XML Drawable onlyでドロイド君を描いてみた - ReDo

    …

    だだ被りじゃねぇか！！！！！ (　Д　)　゜　゜

    XML Drawable onlyでドロイド君を描いてみた http://greety.sakura.ne.jp/redo/2011/12/xml-drawable-only.html via @youten_redo

    しかも、Advent Calender主催者の、Advent Calender関係ない、1年も前のエントリと。


    このままじゃヤバい。ヤクい。これは、何かしら差別化しないと…

    そうだ！ 以前にやったこれをdrawable.xmlでやってみたらどうだろう！


    というわけで↓

    わかめねこを drawable.xml だけで描いてみた


    はい、結局いつものネタに走りました。
    drawable.xmlになってもわかめねこのプリチーさは変わりませんね。


    解説のようなもの

    めんどくさい満足したので、これで終わりにしてもいいんですが、一応解説。

    viewを内包せず、全部1つのdrawable.xmlの中でshapeで済ませるにあたって、ミソになったのが以下
    1. layer-listのitemの子要素として直接shapeを書ける
    2. 最も外側のitemを基準にしたpaddingによる相対的なサイズ・位置の指定
    3. itemとshapeの間にrotate要素を入れて回転を設定
    4. ovalのshapeはstrokeのdashGap,dashWidthを調整すれば円弧が描ける


    layer-listのitemの子要素として直接shapeを書ける


    item要素のandroid:drawable属性で別ファイルのdrawableを指定しなくても、子要素としてshapeを記述できます。


    最も外側のitem要素を基準にしたpaddingによる相対的なサイズ・位置の指定


    item要素のandroid:top,bottom,left,rightの各属性は、各辺ごとに一番外側の部分からの距離(padding)を指定します。
    そこで、適当なsize指定をしたitem要素を外枠として、その内側に収まるように他のitem要素のpaddingを記述して位置や大きさを指定しました。
    各itemのpaddingを、外枠にしたitem要素のsizeより大きくなるようにしてしまったり、item要素の大きさが負になるようなpadding指定をしてしまうと、全部のitemが思っきり崩れます。

    これは、ソースからドロイド君の胴体部分と外枠部分の記述だけを抜き出したものです。


    itemとshapeの間にrotate要素を入れて回転を設定


    shapeを回転させるには、item要素の直下にshape要素を置かずに、 item → rotate → shape という具合にrotate要素を挟み、その属性で回転角度・回転軸(pivot)を指定します。


    ovalのshapeはstrokeのdashGap,dashWidthを調整すれば円弧が描ける


    shapeは本来は、矩形・丸・線・円の4つの簡単な図形しか描けませんが、無理やり円弧を描くこともできます。
    stroke要素のdashGap属性,dashWidth属性の記述によって、ある程度は円の切れ方を指定できるので、それを利用します。

    これは、わかめねこの鼻の部分のソースです。
    2つの円弧をずらして配置し「ω」という形にしています。

    これらの手段を組み合わせれば、わかめねこの様なイラストもdrawable.xmlで描けてしまう、という訳です。


    Gingerbread以前では？

    ちなみに、これらのコードはICS以降向けです。
    Gingerbread以前のバージョンでも動きますが、rotate指定の回転の基準点が全く違う箇所になる様で、rotateを使っているshapeがずれてしまいます。※ Honeycombで試してない(てへぺろ


    上記はレイアウトエディタのスクリーンショットですが実機でも同じ様な表示となります。
    左アンテナは上にずれ、右アンテナは下にずれて胴体の下に隠れてしまっています（マウスカーソルのある辺りにあります）。

    ちゃんと確認してはいないんですが、どうやら以下のような違いがあるのでは、と考えています。
    ICS以降
    paddingの内側の描画されている範囲の左上が回転軸の基点
    Gingerbread以前
    paddingの外側の一番大きい要素の左上が回転軸の基点


    まとめ

    勢いだけで、大分役に立たない記事と相成りました。

    ただ、png画像など用意せずにxmlの記述だけでもここまで描けるというのがわかっていただけと思うので、今後アプリを作ったりデザインしたりする方々には是非覚えておいていただきたいです。上手く使えば様々な画面解像度への対応が捗るんではないでしょうか。今後もハードウェアの技術向上は続きますから、HTC J butterflyのxxhdpiみたいなショックが来るかも知れませんからね。

    「Androidもうええねん」なんて声も聞こえますが、まだまだAndroidは続きますよ！
    オレはようやくのぼりはじめたばかりだからな。このはてしなく遠いAndroid坂をよ…

    さて、明日は @awwa500 さんと @takke さんの担当です。
    何故か新年までカウントしていくAndroid Advent Calender 2012。どうぞ大晦日の大トリ記事までよろしくお願いします。


    今回作ったもの
    投稿者 mstssk 0 コメント ラベル: , , ,

    2012年11月21日水曜日

    わかめねこをCSS3を使って描いてみた

    @vvakame さんのアバターをCSS3で描けるか試してみた。
    一部ズルっこいことしてるけど、かなりの再現度になったと思う。


    　↓に触発されてやってみた。 
    CSS3のみで書かれたアイコンセットがすごいな | IDEA*IDEA
http://www.ideaxidea.com/archives/2012/11/css3_icons.html
    投稿者 mstssk 0 コメント ラベル: ,

    2012年10月27日土曜日

    ソニーのNFC+FeliCa両対応チップはISO/IEC15693タグを読めない[ICT ERA+ABC2012東北]

    ※ 結論はタイトルの通り

    過日行われた「ICT ERA + ABC 2012 東北」に行って来ました。

    バザールブースでは各メーカーさんが今秋冬発売予定モデルを展示していて、喜び勇んで触って来ました。
    いずれの機種もAndroid 4.0系が載っていて、NFC対応(一部除く)です。
    以下、見かけて触った機種

    ソニーモバイル
    モトローラ
    • RAZR M(FeliCa)
    • RAZR i(NFC)※展示していたのはintelブース
    シャープ

    上記のうち、NFC+FeliCa両対応している機種で手持ちのNFCタグが読めるかどうか試したところ、どの機種も同じく以下の結果になりました。
    両対応な機種が使っているNFCのチップは、すべてソニー製のNFC+FeliCa両対応チップを使っているそうです。
    このソニー製のチップは、以前からISO/IEC 15693に対応していないという噂があったらしく、今回はそれを確かめる形になりました。
    という事は、ソニーのチップはNFC IP-2ではない？？

    ちなみに、Galaxy Nexusなどに乗っているNFCチップはNXP製のチップで、ISO/IEC 15693もちゃんと読めます。

    参考

    投稿者 mstssk 0 コメント ラベル: ,

    2012年9月11日火曜日

    FabCafe行ってきた

    最近のナウなヤングはレーザーカッターのあるカフェでアフター5を過ごします。

    と、いうわけで渋谷にあるFabCafeでいっちょ切ってもらって来ました。

    自分がTwitterで使っているアイコンと、@vvakameさんの同じくTwitterのアイコンをFabしてもらいました。





    投稿者 mstssk 0 コメント

    2012年8月3日金曜日

    NFClab7月定例会

    NFCラボ7月定例会に参加してきました。
    会の様子はめんどくさいのでATNDやTogetterから察していただくとして、ここでは所感を。

    痛感したのは「NFCってやっぱり知ってる人少ないよね」という事。

    そりゃあ、2012年7月現在で国内に2機種(SC-04DとISW16SH)しか対応しているものが無い規格なんてそんなものなんでしょうけど、本格的に普及させようという声があまり聞こえて来ません。
    今回の会の会場になった新宿周辺に、社会実験としてNFCタグを埋め込んだポスターがあったそうですが、NFCがいったい何なのか・何をどうすればいいのかという所が分かりづらい・分からない不親切なものだったそうです。
    felica…というよりおサイフケータイと言った方が世の人には通じやすいんでしょうが、それが普及した現在までの間にどれだけの社会活動があったのかが気になってなりません。何か纏まっている資料があれば誰か教えて下さい。

    少なくとも、ユーザー側の環境は来年頃には整ってくる様だ、という点は会場でも話されました。
    NFCを搭載したAndroid機は増えてくるし、WindowsPhoneにもNFCのAPIがあり実証機も存在するそうです。さらにはiPhone5がNFC対応するのでは、という予測もあります。
    　
    あとは、サービス提供側がどれだけNFCに対応してくるか、という所が不安です。
    実際の所、既に普及しているfelicaよりNFCという汎用規格を選択するメリットが今の所見えていないです。

    小規模なレベルでNFCを使ったサービスはちらほらありますが、おサイフケータイ並にユーザに普及するにはもっとクリティカルな点で消費者生活に浸透させる必要があるんではないでしょうか。
    そしてその点でfelicaは「おサイフケータイ」として金銭の代替としてのアフォーダンスを獲得しています。(ここで言っているアフォーダンスは、本来の意味ではなく、Wikipediaでノーマンの誤用と紹介されている方)
    NFCも「NFC」なんて説明されなきゃ分からないような略語なんかより、もっと「何が出来るのか」という点に訴求するようなニックネームが必要じゃないでしょうか。

    まだまだ先の見えないNFCですが、いちユーザー・いち開発者としては、NFCで遊ぶ気マンマンです。
    東京駅近くの「RFID/NFC Real Touch Shop」には、多くのNFC関連製品が置いてあります。一度足を運んでみる事をオススメしておきます。




    ※上で紹介している内容を発表された方のスライドの公開場所がわからないor見落としている為、勝手に妄想で書いてるような形になってしまっていて orz
    投稿者 mstssk 0 コメント

    2012年7月25日水曜日

    PITAT-USB3.0/EC34を購入

    今まで使ってた外付けHDDの容量を使いきってしまったので、新たに2TBの外付けHDDを買って来ました。
    そして、買おうと思った物がUSB3.0対応だったので、ちょっと人柱やってみるかと思い、USB3.0のExpressCardアダプタも購入。
    ちゃんと動きました。
    <追記>
    カードがホットプラグで動いてくれず。挿した状態で起動させる必要がありました。

    購入物


    環境

    • ThinkPad X201s
    • Ubuntu12.04 Precise Pangolin

    速度

    • 読み … ディスクユーティリティ(palimpsest)で測定
      最小速度 62.2 MB/s
      最大速度 108.5 MB/s
      平均速度 96.6 MB/s
    • 書き … 約8GBのファイルを内蔵HDDからコピーした際の進行ダイアログ表示から
      最大速度 83.5 MB/s
    実はTouroとPITATを別個に購入して先にTouroを使い始めていたので、ディスクユーティリティの「書き込み速度計測はHDDが空の状態でないといけない」という制限のため、↑こんな測定内容です。

    購入前にちょっとググってもUbuntuでの使用例が見当たらないPITAT君でしたが、ひとまず使えたのでありがたいことです。いっそ2口あるタイプを買っておけば良かったかも。

    ただ、使用中は多少発熱するのが玉に瑕。X201sはExpressCardスロットがパームレストの左側にあるので、使ってると左手が熱いです…


    出っ張りは1mm程度。むしろVGAポートに付けた防塵キャップの方が飛び出てるくらい。
    投稿者 mstssk 2 コメント ラベル:

    2012年7月23日月曜日

    株式会社ウサギィにお邪魔してきました

    先日*、株式会社ウサギィに訪問する機会が得られたので、喜び勇んで行って来ました！

    マンションの一室にある社内はシャレオツな雰囲気でした。(全景を撮るのを忘れた… orz)




    都合により短い間でしたが、ウサギィ社員の方々や一緒に訪問した方たちと歓談し楽しいひとときを過ごしました。


    *実際に訪問したのは2ヶ月近く前なのは内緒
    投稿者 mstssk 0 コメント ラベル:

    2012年7月22日日曜日

    githugでおべんきょう


    gitの使い方を実際にコマンド叩きつつ勉強出来るgithugが面白そうだったのでメモ。

    参考：



    githugはgemで公開されてるそうなので、Ubuntuなら 
    $ sudo apt-get install gem ←gemがインストール済みなら不要
$ sudo gem install githug
    ってな具合でインストール。

     あとは、githug叩くごとに色々指示(問題)が出されるので、それをこなしてからまたgithug叩く、ってのを繰り返していく。
    gitコマンド叩いてゴニョゴニョするだけじゃなく、場合によっては問題への回答を求められたりもする。
    投稿者 mstssk 0 コメント ラベル: , ,

    2012年7月15日日曜日

    Ubuntu12.04を10.04以前のデスクトップ環境で使いたい

    Ubuntuを10.04のデスクトップ環境に戻したかったので、gnome-session-fallbackをインストール。
    だが、gnome-session-fallbackをインストールしただけだと、細かいところでぐぬぬとなる。
    sudo apt-get install gnome-session-fallback
sudo apt-get install gnome-system-tools
sudo apt-get install compizconfig-settings-manager
    インストール終了後、compizconfig-settings-managerで設定をする。
    alt+tabによるウィンドウ切り替えが使えなかったりするので、アプリケーション・スイッチャーを有効にするなど。

    以前は、デスクトップのパネル上で右クリックすると、パネルにアプレットを追加するメニューなど表示されたが、それは Super+Alt+右クリック になっている。

    とりあえずこれくらいで、まぁ使える感じになる。
    あとは、外見テーマまわりが変な感じだがとりあえず我慢して使ってる次第。

    あとはMATEとか入れてみるしかないのかな…
    MATEについて参考： http://ankyo.blog.so-net.ne.jp/2012-05-17
    投稿者 mstssk 0 コメント ラベル: ,

    2012年4月30日月曜日

    Ubuntu12.04インストールメモ

    Ubuntu 12.04 LTS Precise Pangolin を ThinkPad X201s にインストール
    今まで使ってた10.04LTSから大分変わって、見たい情報への動線もかなり変わってる。
    「ソフトウェアソース」：Ubuntuソフトウェアセンターのウィンドウメニューの「編集」から
    以下、クリーンインストール後にやったことのメモ書き 
    # Japanese Teamによる追加パッケージ
# http://www.ubuntulinux.jp/japanese
wget -q https://www.ubuntulinux.jp/ubuntu-ja-archive-keyring.gpg -O- | sudo apt-key add -
wget -q https://www.ubuntulinux.jp/ubuntu-jp-ppa-keyring.gpg -O- | sudo apt-key add -
sudo wget https://www.ubuntulinux.jp/sources.list.d/precise.list -O /etc/apt/sources.list.d/ubuntu-ja.list
sudo apt-get update

sudo apt-get upgrade

# タスクバーからIBusの設定画面出して、IME切り替えのキーボードショートカットを変更。
# Ctrl+Space を削除して、代わりに Henkan_Mode を追加
# (Macっぽく、キーボードの[変換]キーでIMEのon/off出来るようにする)

# Medibuntuのパッケージ
# http://medibuntu.org/repository.php
sudo -E wget --output-document=/etc/apt/sources.list.d/medibuntu.list http://www.medibuntu.org/sources.list.d/$(lsb_release -cs).list && sudo apt-get --quiet update && sudo apt-get --yes --quiet --allow-unauthenticated install medibuntu-keyring && sudo apt-get --quiet update
sudo apt-get install app-install-data-medibuntu apport-hooks-medibuntu

# ubuntu-restricted-addonsのインストール
# flashプラグインとかIcedTea(OpenJdk)とかコーデックとか
# 参考：http://smash.nobuto-murata.org/2010/11/ubuntu-restricted-extrasubuntu.html
sudo apt-get install ubuntu-restricted-addons

# Google Chromeのインストール
# http://dev.chromium.org/getting-involved/dev-channel
# 上記ページから「Dev channel for 32-bit Debian/Ubuntu」のリンクのdebファイルをインストール
# (あえてunstableを使ってる)
# Google Chromeはdebをインストールするとリポジトリも勝手に追加されるので、他のアプリ同様にアップデートが落ちてくるようになる。
# 追加されるリポジトリ(を記述したファイル）→ /etc/apt/sources.list.d/google-chrome.list

# mozcのインストール
# https://launchpad.net/~japanese-testers/+archive/mozc
# 参考： http://blog.goo.ne.jp/minoh_edubuntu/e/632a79175331b039aa116109b76a6378
# ※ 参考ページでは「ppa:japanese-testers/ppa」を追加しているが、ここではmozcだけ欲しいので「ppa:japanese-testers/mozc」を追加している。
sudo add-apt-repository ppa:japanese-testers/mozc
# ↑を叩くと、PPAリポジトリの追加をするかの確認をされる。OKならENTER。キャンセルならCtrl+C
sudo apt-get update
sudo apt-get install ibus-mozc
# 再起動(一度ログオフするだけでもいける？)してから、タスクバーのIBus設定でmozcを有功にする。

# ホームディレクトリにあるディレクトリの名前を英語にする
# 参考： http://www.atmarkit.co.jp/flinux/rensai/linuxtips/a077changelang.html
# 「ドキュメント」→「Document」とか、「公開」→「Public」って具合に
LANG=C xdg-user-dirs-gtk-update
# 上記コマンドを叩くと、確認ダイアログが表示されるので「Don't ask me this agein」にチェックを入れてから「Update names」ボタン押下
# この時、既に各ディレクトリ内にファイルがある場合、ファイルを保持してディレクトリが残ったままになるので、適宜ファイルを移動してから不要なディレクトリを削除する。
# ※ デスクトップは、再ログインするまでは「Desktop」ではなく「デスクトップ」ディレクトリを参照し続ける。

# Dropbox
sudo apt-get install nautilus-dropbox
# 怖い雰囲気のダイアログが出るけど、ちゃんとインストールされる。

# Skype
# https://wiki.ubuntulinux.jp/UbuntuTips/Application/HowToInstallSkype

# CompizConfig設定マネージャー
sudo apt-get install compizconfig-settings-manager

# ファイル検索
# nautilusの検索はドットファイルを検索したり出来ないので、検索ツールをインストール
sudo apt-get install gnome-search-tool
    ところで、マルチディスプレイの時、隣りのディスプレイとの境界でマウスカーソルが引っかかるのはどこで無効にすればいいんですかね？
    うざったくてしょうがないんですが。
    投稿者 mstssk 2 コメント ラベル: ,

    2012年4月1日日曜日

    ミニ四駆ハッカソンに行ってきました

    3月31日に行われた「ドキッ！開発者だらけのミニ四駆大会！！」に行って来ました。
    第１回ミニ四駆ハッカソン
http://atnd.org/events/26576


    ハッカソンと銘打ってありますが、中身は本当にミニ四駆で遊ぶだけ。

    想像してみてください。大の大人が寄り集まって、
    「俺のアバンテが…！」
    「ナローワンウェイホイールは…」
    「膝にXシャーシを受けてしまってな…」
    「ミニ四駆は横Gが凄いから壁を走っているようなものなんだ…」
    「スタビライザーを…」
    「レギュレーション上は…」
    とか、マジで語り合いつつミニ四駆を走らせるんです。

    ゾクゾクするでしょう？

    ちなみに愛車はブロッケンGブラックスペシャル。
    現場で後先考えず手を入れて、↓こんな姿になりました。。。

    今回分かった事

    • 基本的にミニ四駆PROのマシンの方が速い。
      ただしチューンナップ次第で旧タイプでも十分戦える。
    • あまり安定性を求めるより、まずスピード重視に組むべき。
    • でも、そうするとコースから飛び出したマシンを膝に受けてしまうので、スタビライザーなどの横転防止策は必須。
    • ローラーはゴム無しの方が無難っぽい。（摩擦？）
    • 電池は思いの外早く減る。本線前には新しい電池に入れ替えるべき。
    • ミニ四駆PRO用のFRPプレートは、付けようと思えばブロッケンGのボディに付けられる。（上画像参照）
    • 今回の様なイベントを開催する際は、レンタルスペースの床が絨毯だったりしないか要確認。（軸受け六角ベアリングが１つ消えました）
    • FRPプレートの一番外側に大径ローラー付けるとコース幅ギリギリ。コースが歪んでいたりすると、ものの見事に引っかかる。

    第2回があるかは謎。
    投稿者 mstssk 0 コメント ラベル:
    登録: 投稿 (Atom)