はてなブックマーク

マテリアルデザインの重要な要素として、ナビゲーション・ドロワー (Navigation Drawer) があります。 Navigation Drawer はモバイル画面でみたときは、画面左側からスライドしてくることで表示できるメニューになります。 デスクトップでは常に表示されて、左側にピン止めされたような形になります。 ドロワー上部には何らかのヘッダーがあり、その内容部分にはメインコンテンツの内容を示すメニュー等が表示されます。 Android Studio のプロジェクトのテンプレートにも、Navigation Drawer があります。これを用いてナビゲーションドロワーを用いたアプリケーションの開発を進めることは可能です。 しかしながら、様々なコンポーネントが組み合わされているために、どこに何があるか、そしてそれがなぜ存在するか、パッと見て分かりにくいです。 この記事では、レイアウトリ

スナックバー (snackbar) はマテリアルデザインで登場する重要なコンポーネントの一つです。 スナックバーは画面の下から、ひょっこり現れて、短いメッセージを表示することが可能です。 またメッセージの他に、０個または１個の簡単なアクションを含むことができます。 例えば、ファイルマネージャーでファイルを削除した後に、「ファイルを削除しました」 というメッセージを表示し、 さらにそこに "UNDO" という動作を含めることが可能です。 それまでは、メッセージの表示ないし通知といえば、トースト (toast) というのが使われてきました。 スナックバーはメッセージの通知だけではなく、さらにユーザーのフィードバックを受けるための仕組みが含まれたものに拡張されています。 ちなみに、スナックバーは日本語にすると「軽食スタンド」 というような意味です。トースト (パンを焼いたもの。焼きあがって、 ト

ここではマテリアルデザインにおける主要 UI コンポーネントである RecyclerView の基本的な利用方法について説明します。 RecyclerView は従来の ListView の代わりとなるものです。 要はリストです。すなわち、基本的に同種類の情報を並べるために利用します。 ここでは非常に単純な例を紹介します。 尚、開発環境は Android Studio を利用しています。 これまで Eclipse + ADT 等を利用してきた方も、なるべく速やかに Android Studio に移行していきましょう。 RecyclerView の利用方法 次の動画のような状況を考えます。 以下ではこのようなリストの実現方法を説明します。 つまり、始めに A, B, C という文字が表示されている。それぞれの要素を押すと要素が削除される。メニューの "ADD ITEM" というボタンを押す

例えば、「表組みのレイアウト」を実装したい場合のことを考えてみましょう。 この場合、カラムの幅をある程度決めておかないと、デザインが崩れたりしてしまいます。 このカラムは一番広くて、このカラムは狭くてよい・・・ そういう実装をすることはよくあることですね。 ウェブサイトでも table タグで表組みするときは、カラムの幅を割合 (パーセント) で指定することはお馴染みのものと思います。 ウェブページの場合は、ブラウザ画面は一般的に伸縮可能であり、さらにパソコンのモニターサイズ、画面の解像度などもまちまちであることが問題になる場合もあります。 アンドロイドでも同様に端末の画面は様々ですから、割合で指定できると非常に便利です。 ここでは、UI 要素のレイアウトを割合指定で行なう方法を説明します。 layout_weight によるレイアウトの重み付け ここでは UI 要素のディメンション（すな

以前の記事ではフラグメント間の通信方法として、直接、他フラグメントの UI 要素を取得して利用する方法を説明しました。 » フラグメント間の通信 確かにこの方法で、片側のフラグメントで起こしたイベントをもう片方のフラグメントに反映させることができました。 しかしながらこの方法では、片側のフラグメントに含まれるウィジェット要素を直接取得するなどしているために、片方のフラグメントの変更がもう片方へ大きく影響してしまいます。 ここでは各フラグメントを可能な限り疎に結合し、フラグメントの独立性を高める実装方法を紹介します。 ここで作成するサンプルの動作をみてください。 まず画面が横向き(ランドスケープモード)の場合の動作です。左側に項目のリスト (Foo, Bar, ...) があります。この部分がひとつ目のフラグメントです。 右側の青色の部分はリスト項目を選択したときに、その内容が表示されるフラ

今回はプログラムから文字列 (String) リソースの文字を読み込む方法について説明します。 文字列リソースについては、 「文字列リソースのローカライゼーション」等の記事をはじめとして、 これまで様々な場面で利用してきました。 よく考えてみたら、プログラムからリソースを参照するという基本的な作業について、記事を書いていなかったことに気付いたので、 この記事では 慌てて さっそく書いてみようと思います。 文字列リソースの取得についてはとても簡単なので、ついでにボタンのイベントハンドラメソッドの設定方法についても触れてみたいと思います。 プログラムから文字列リソースを取得する方法 - getString メソッド ここで作るプログラムは次のような動きをします。 ボタンがひとつあり、このボタンを押すと下側に Toast 通知が表示されます。 このトーストのメッセージの内容を String リソ

ここではもっとも基本的な静止画像の取得方法として、アプリケーションからカメラを起動して画像を取得する方法を示します。 実際に動かしてみることで、いくつかの問題点も見えてきます。 外部のカメラアプリケーションを起動して撮影 ここで作成するプログラムは次のような動きをします。 画面上部に ImageView を、下部に Button を配置。 "Take a picture!" ボタンを押すとカメラが起動。 写真撮影後 "Done" を押して元のアプリケーションに戻ると、ImageView に撮影した画像が設定される。 カメラアプリケーションへインテントを送る カメラアプリケーションへインテントを送る、標準的なアクションインテントは MediaStore.ACTION_IMAGE_CAPTURE です。 特に Extra に EXTRA_OUTPUT を設定しない場合は、この結果として小さいサ

ここでは SMS のテキストメッセージをプログラムで受信する方法を説明します。 受信といっても、プログラムで通信に関わる箇所をわざわざプログラムするのではありません。 もともとスマートフォンをプラットフォームとしてアプリケーションだけに、 SMS の通信に関わる箇所はスマートフォンが自動的に実行します。 ポイントは、プログラムから受信したメッセージをどのように読み取るか・使うかという点です。 ここで作るプログラムは次のようなプログラムです。 SMS テキストメッセージを受信したときに、そのメッセージをプログラム上に表示します。 そして、 Android にインストールされているテキストメッセージングアプリの方にもちゃんとメッセージが届き・・・ その中身が読めます。 このように、他のプログラムに影響しない形でメッセージを読み取る方法をしめします。 SMS 受信時のブロードキャスト SMS 受

Google Maps Android API v2 を利用するための Google Play Services API ライブラリの参照 Google Maps Android API v2 は Google Play Services API のひとつとして配布されています。 一般に Google Play Services API を利用するためには、ライブラリの参照を行う必要があります。 ここでは Google Maps Android API v2 を使うために必要な、Google Play Services API の参照方法、取り込み方法について説明します。 環境は Eclipse を利用していることを想定しています。 Google Play Services API の参照方法 次の手順に従って、Google Maps Android API v2 を使うプロジェクトと同じ

アンドロイド端末と PC との接続について大まかなことを説明します。 さきにお断りしておきますが、この記事は USB の「プログラミング」のことではないのでご了承くださいませ。 この記事は PC に Android 端末を USB 接続して、端末のファイルを探したりする時の話です。 基本的にこうした外部機器との接続についてのトピックは、端末毎のカスタマイズが多くて、役に立たないことが多いので、 あれ？とおもったら、あなたがお使いの端末のマニュアルを見てください。 と、お断りしつつ、大まかなこと、基本的なことについてご説明します。 アンドロイドの USB サポート アンドロイドの USB サポートについては、基本的に Android 3.1 (API レベル12) からです。 細かく言うと USB ホストモードとアクセサリモードがサポートされたのが 3.1 からで、USB アクセサリモードに

Windows 上のアプリケーションを開発する場合は、マイクロソフトが提案する UI デザインガイドラインを従うと「良い感じ」になります。 それもそのはず、「こういう UI が良いだろう」という研究の成果をもとに、ウィジェットが設計され、それを実現するためのメソッドが実装されているわけですから何かと無理がなくなります。 Android の世界ではやはりグーグルがそうした UI ガイドラインを出しています。 ガイドラインに従うには、そのガイドラインを熟読するのは大切なことですが、手っ取り早く傾向をつかむには、Windows アプリなら Office などの MS 製品を、 Android なら Google の開発したアプリケーションをチェックするとわかりやすいものです。 たとえ UI ガイドラインにしたがっているから、という理由かどうかは別としても、結果的に Google の Androi

フェイスブックを代表する、"iPhone スタイルのアプリケーション" では早くから左からスライドしてくるパネルに、 リッチなメニュー項目が表示されていました。 Android でもこれを模したアプリケーションを実装することは可能でしたが、やはり面倒なものです。 API レベル 18 のサポートライブラリではここで紹介する DrawerLayout (ドロワーレイアウト) なるものがサポートされ、 簡単に左側からスライドするメニューを実装できるようになりました。 最近の UI デザインガイドラインに "ドロワーナビゲーション" を利用すべき状況等の説明がありますので、確認しておくとよいでしょう。 ともあれ、最近 Google がリリースするアプリケーションではほぼ例外なくドロアーナビゲーションがサポートされているため、 これに慣れてきたユーザーも急速に増えてきていると予想されます。 例えば

リスト表示するウィジェットとしては、ListView があります。 これを簡便に使うために API レベル 1 のころから、ListActivity なるアクティビティが用意されていました。 フラグメントでは、ListFragment があります。 この記事では ListFragment の基本的な使用方法を説明します。 ListFragment の基本的な使用方法 ListFragment は ListView オブジェクトをホストしており、さまざまなデータソースとバインドすることが可能です。 デフォルトのスクリーンレイアウトはシングルリストビューです。カスタマイズも可能ですが、それについてはまた別の機会に説明します。 前述の通り、ListFragment は ListView を利用します。リストビューについては、当サイトの「リストビュー」 を参考にしてください。 さて、ここで作るのは

この資料ではスワイプ操作で横方向に画面を切り替える UI を実装する方法を紹介します。 スワイプ操作による横方向の画面切り替えは、主にスクリーンマップ内の同レベルの情報ナビゲーションに利用することが一般的です。 例えば、Google Play ではホーム画面から、"APPS" や "GAMES" といった一段階下のレベルに移動した後は、横方向のスワイプナビゲーションが大いに活用されています。 例えば "APPS" では "HOME"、"TOP PAID"、"TOP FREE"・・・などが横方向に並べられ、それぞれが縦方向のリストとして情報閲覧できるようになっています。 Android の開発者サイトでも、スクリーンマップ内の兄弟関係のブラウズにはベストプラクティスとして Lateral Navigation (横方向ナビゲーション) が推奨されています。 スワイプ操作で画面を横に移動する

Android には 「文字リソースのローカライゼーション」でみたように、 ロケール設定にしたがって適切なリソースを読む仕組みがあります。 しかしながら、時にはアプリケーション上で言語を切り替えるといった要求もあることでしょう。 予想だにしなかったことすらしばしば起きるのですから、予想されることなど起きて当然です（笑) この記事では言語設定をシステムのロケール設定に頼らずに、アプリケーション上で設定する方法について説明します。 アプリケーションでの言語設定 ここで作るプログラムは次のようなものです。 "Japanese" と "English" というラベルのボタンを二つ用意します。 Japanese ボタンを押すと、日本語のリソースがロードされたアクティビティ (Activity2) が起動します。 English ボタンを押すと、英語のリソースがロードされたアクティビティ (Activ

アンドロイドではインテントによって、アプリケーションのコアコンポーネントを起動します。 明示的なインテントと暗黙的なインテントについては、「明示的インテントと暗黙的インテント」で説明しました。 ここでは暗黙的インテントを実現するための仕組みである、インテント解決 (Intent Resolution) とインテント・フィルター (Intent Filter) を、実際に実装することによって説明します。 ここでは次のようなアプリケーションを考えます。 アプリケーションは二つ。"IntentTest1" というアプリケーションと "IntentTest1View" というアプリケーションです。 ひとつめのアプリケーション "IntentTest1" では、テキストボックス (EditText) に入力した URI をデータ、かつ、アクションを ACTION_VIEW とした暗黙的インテントを作

スマートフォンにとって地図情報はきわめて重要です。 2012年、アップルが iPhone 5 で粗末な地図アプリを搭載したまま出荷。 それで大きな批判を浴び結局、幹部の解雇、謝罪、他社のマップアプリの推奨・・・と続き、 最終的に Google が Google Maps を iOS 向けに出しなおしてユーザーの怒りが収まった・・・ そもそもモバイルデバイスですから、根源的にその移動性を補助するツールが重要なのは当然ともいえます。 Google 社は Google Maps の開発とデータのメンテナンスに異常なほど力を入れています。 ここでは、その Google Maps の情報をアプリケーションから使うための方法を紹介します。 2012年12月、Google は Google Maps Android API v2 を公開しました。 もともと MapView で地図の利用はサポートされてい

メニューボタンを押したときに、表示されるメニューの作り方を紹介します。 アプリケーションの使い方で困ったときは、メニューボタンを押すというのは Android を利用するユーザーの基本動作です。 あなたのアプリケーションにもメニューを適切に設定して、ユーザーが困らないように、あるいは困ったときに助けになるようなメニューを設置したいものです。 ここでは単純なオプションメニューを作る方法を説明します。 メニューボタンを押すとオプションメニューが表示されるとは？ Android のメニュー (MENU) ボタンはこれです。 Android を使っていて、何かを設定するとき、追加の情報が欲しいときなどは MENU を押してみて何か表示されないか見てみることも多いのではないでしょうか。 ここではメニューボタンを押したときに、次のようなメニューがでるプログラムを作ります。 このメニューはオプションメニ

Android (アンドロイド) は Google が 2007年秋に発表した携帯端末向けのプラットフォームです。 米国のマーケティング企業 IDC の発表によれば、世界的なスマートフォン OS シェアで断トツの 80% 以上です。(第二四半期比較で 2015年は82.8%、iOS は 13.9%) 現在も Google を中心としたオープン・ハンドセット・アライアンスによって活発に開発が続けられています。 Android の特徴 ひとつめの大きな特徴は、オープンソースで無償で提供されていることでしょう。 Apache v2 ライセンスで配布されており、誰でもソースコードを入手することが可能です。 このため iPhone とは違い、多数の携帯端末メーカーが Android プラットフォームを採用しはじめており、スマートフォン及びタブレット市場で急速にシェアを伸ばしています。 スマートフォン

以前はタブ形式のナビゲーションは TabHost と TabWidget を用いて実装されました。 タブホストとタブウィジェットを用いた実装については、タブを使ったレイアウト ～ TabHost と TabWidget をみてください。 しかしながら、アクションバーが導入されてからは、アクションバーのタブナビゲーションを利用することが推奨されています。 アクションバーのタブナビゲーションを利用することによって、タブナビゲーションに十分な幅が無い場合、自動的にタブが非表示になり、 アクションアイテム（ボタン）として表示されるようになるなど、より多くのスクリーンサイズに対応可能となります。 このため新しいアプリケーションでは、アクションバーを活用すべきです。 この資料ではアクションバーの "タブナビゲーションモード" の基本的な利用方法について説明します。 アクションバーのタブナビゲーション

ネイティブコードから WebView 内の JavaScript を実行する方法。今回は jQuery Mobile を利用 当サイトの姉妹サイトである jQuery 入門 にて、以前 jQuery Mobile でプログラムからページを切り替える なる記事を書きました。 jQuery Mobile は基本的にページの遷移などもある程度自動的に、"モバイルアプリ" っぽく処理してくれるわけですが、ボタンなどをクリック、 何らかの条件分岐、ページ遷移、という流れでは自分でページ遷移をしていしないといけない。 このときに必要になる処理として、changePage メソッドで明示的にページを切り替える、ということです。 WebView と HTML5、特に jQuery Mobile を組み合わせたハイブリット構成でモバイルアプリケーションを構成する場合、ネイティブコード側で何らかの処理をして、

WebView を通常のブラウザとして使いたいと思って利用したときに、すぐに直感で期待した動作と異なる動きをすることに気づきます。 表示された HTML ページをクリックして、次のページへジャンプするとき、新しくブラウザが開いてしまうのです。 同じ WebView 内に次の新しいページのコンテンツをロードするにはどうしたらよいでしょうか。 WebView - 既定で新しいブラウザが開く WebView を配置して http://www.google.com/ をロードします。そして、検索項目を入力して検索します。 試しに "webview" と入力して・・・ 検索開始。 うまく検索できたようにみえますが、しかしよくみると、これは元のアプリケーションではなく、新しくブラウザが開いています。 もとのアプリケーションに画面を切り替えると、次のように元の検索開始前の状態のままです。 元々新しくブラ

前回「アプリケーションからカメラを起動して静止画を取得する方法」 ではインテントを利用してカメラを起動して静止画を撮影する方法をみました。 そこでは撮影した結果は Bitmap オブジェクトとして画像を取得しました。 ここではそれをファイルに保存する方法を示します。 Bitmap オブジェクトを自分でファイルに書き出すのではなく、撮影したあと自動的にファイルに保存をする仕組みがありますので、それを利用します。 カメラの撮影画像のファイルへの保存 MediaStore.ACTION_IMAGE_CAPTURE インテントのエクストラデータとして、MediaStore.EXTRA_OUTPUT をキーとしてファイルの URI を渡すと、 静止画像を撮影後そこに画像を保存します。 このためアプリケーション開発者はファイルに Bitmap オブジェクトをシリアライズするなどして書き出すという必要が

2012 年 7 月に Google 社が発売を開始した 7 インチタブレット、Google Nexus 7。 あなたはもう入手されましたか？ 私は Google I/O 2012 での発表後、さっそくプリ・オーダーしていたので、米国時間7月17日(火) には入手できました。 この資料では実際に Google Nexus 7 を Windows に接続して開発を行う際のドライバーについて説明します。 Google Nexus 7 タブレットの Windows への接続 Windows では Android 端末を接続してプログラム開発を行うためには、USB ドライバーが必要になります。 Google Nexus 7 タブレットも例外ではなく、初期状態で接続すると次のように不明なデバイスと認識されてしまいます。 Google Nexus 7 タブレットではドライバーのインストールは容易です。

ここではファイルにデータを保存する具体例として、画面に入力したファイル名、内容でファイルを作ってデータを保存するプログラムを作りましょう。 ちなみに、私の端末 (DROID X) では adb shell を使ったときに ls などが利用できなかったので、ここではテスト用にエミュレータを利用しています。 サンプルプログラムの動作 ここで作るプログラムは次のような動作になります。 画面は次の通り、ファイル名を入力するテキストボックスとファイルの内容の文字を入力するテキストボックスがあります。 スクリーンショットの例では、ファイル名として "file1.txt"、 その内容として "Hello, world!" という文字列を入力しています。 Save ボタンを押すと、"file1.txt" というファイルに "Hello, world!" という内容が書かれ保存されます。 実際にどこにどうい

Android は Android 3.0 (ハニコム "Honeycomb") ではじめてタブレットに最適化されました。 フラグメント (fragments) もタブレット向けに導入された仕組みの一つです。 フラグメントを使うと、スマートフォンよりも広いタブレットのディスプレイをより有効に利用することができるのです。 では、そのフラグメントとは何か説明しましょう。 Android タブレットのフラグメントとは？ フラグメント (fragment) というのは、英語で「断片」とか「一部分」という意味です。 何の一部分かというと、フラグメントは「アクティビティの振る舞いの一部分」です。 "フラグメント" として小さな UI 部品を作り、それを組み合わせて一つのアクティビティを作り上げることが可能となります。 スマートフォン端末でも画面の大小で苦労したのに、タブレットではさらに広大な UI が

スマートフォンなどの携帯端末では、外出先のメモ、写真などをウェブサイトにアップロードしておき、 後から PC を使ってそれらの情報を閲覧するなどすると便利な場合が少なくありません。 ここでは、特に写真をアップロードする場合を考えます。 写真などの画像ファイルをウェブサイトにアップロードする方法はいくつかありますが、 良くやる方法としては HTML のフォームでファイルを選択して、ウェブサイトにアップロードするといった流れではないでしょうか。 このとき裏では、HTTP の POST リクエストでマルチパート・フォーム・データをウェブサーバーに送信していることになります。 <?php $target_dir = "./_upfiles/"; $target_path = $target_dir . basename( $_FILES['f1']['name']); if(move_upload