スキップしてメイン コンテンツに移動

投稿

8月, 2010の投稿を表示しています

第2回 認証画面のレイアウトを作成する

第1回 ライブラリの設定とマニフェストの設定

今回は認証画面のレイアウトを作ります。
新規Androidプロジェクトを作成すると、res/layout/main.xml とうファイルができあがってます。
このファイルを修正します。



main.xmlを開くと
Hello World, MainActivity! と表示された黒い画面がでます。
MainActivity という文字は新規Androidプロジェクトを作成した際に、
Activity name に設定した文字ですので、人によって異なる文字になると思います。

ここにWebView とEditText , Button を配置します。
Outline ビューで作業を行います。
最初からある TextView は削除しました。赤いマイナスをクリックすると選択されている項目を削除する事ができます。
次に WebView を追加します。と思って、緑のプラスをクリックしたところ・・・WebView が見つかりません(汗

xml を直接記述しました。
 ここまでの main.xml の内容はこちら
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/WebView"
    >
    </WebView>

</LinearLayout>ここまで

ここまでで、アプリを実行すると・・・白い…

認証画面を作るメモ

最初にやらなきゃいけないのは・・・認証画面か?
いやいや、アプリの登録でしょ

http://twitter.com/ にアクセスして、自分のアカウントなりアプリ用のアカウントなりでログインする。



画面右上の「設定」「連携アプリ」を開く
次に右側に「開発者の方へ」の中にリンクがあるので、それをクリック

新しいアプリケーションを追加をクリックすると
アプリの情報を入力する画面がでる。
この内容は後から変更できるので、ある程度まじめに書いたら後から修正する事にする。

入力が終わると

Consumer keyConsumer secret
この2項目を含む画面が表示される。
これをメモしておいて、アプリ作成時に使用する。

つぎは、認証用の画面作りについて

認証用の画面で行うのは、ブラウザの起動と暗証番号の入力
できれば両方を同時に表示したいのでWebViewを使う事にする

アプリを起動したときに認証されていなければこの画面を表示する
画面上部にWebViewを表示して、下部にはEditTextとButtonで暗証番号の認証をおこなう
認証が完了したら自分のプロフィールを表示する画面に遷移?
プロフィールの取得ができれば認証が完了しているという事かな

次回の起動からはとりあえずはプロフィール画面を表示することにする
今回はタイムラインとかは表示しない
インターネット接続についてもチェックしないことにする

以上メモ

第1回 ライブラリの設定とマニフェストの設定

Eclipse で新規Androidプロジェクトを作成
Build target は Android 1.6



新規プロジェクトの作成方法は省略させていただきます。


最初にライブラリを設定しちゃいます。
新規プロジェクトのプロパティ、Java build path の Libraries に twitter4j を追加
twitter4j-core-2.1.4-SNAPSHOT.jar を追加しました。
Order and Export で twitter4j-****.jar にチェック

この設定で、twitter4jが使えるようになります。

つぎはAndroidManifest.xml にインターネットを使用する設定をします。

Permissionに use permission を追加
Name は android.permission.INTERNET です

これでインターネットアクセスが可能になります。
この設定は忘れないでください。



こんかいはここまで(みじか!

テストだけ

難しい事は苦手なのでできるだけ簡単に・・・
ライブラリがあるならば、それを使う・・・

というわけで、Twitter 用のライブラリとして twitter4j を使用することにしました。


複数の画面を作るのが面倒だったので、一画面ですませてしまいました。 一番上の「認証画面を開く」ボタンを押すとブラウザが起動します。




この画面はTwitter の画面です。 ユーザ名とパスワードを入れて、「許可」ボタンを押します。



許可を押すと暗証番号が表示されます。 ※キャプチャの暗証番号はセッションごとに生成されます。
数字を選択してクリップボードにコピーします。 手書きでメモをとってもいいです。


数字を選択したところです。
次に元のアプリに戻ります。HOMEボタンを長押ししました。



おらいったー というのが元のアプリ



「認証画面を開く」の下のEditTextを長押しします。



「貼り付け」を選択しました。



「PIN を送信する」を押すと認証完了です。 次回の起動からは認証画面で設定したアカウントで投稿することができます。 (次回からは認証不要)



「PINを送信する」の下のEditTextに文字を入力して「送信」を押します。



投稿されている事を確認しました。 ハッシュタグ #oira は強制的に追加したものです。
以上でテスト完了です。
今回は認証と投稿だけをしました。タイムラインの取得やプロフィールの取得もしたいと思いますが・・・そのうち

MaTwit の目的・マイルストーン

目的

Android アプリを作成する勉強のテーマとする

基本UI部品を使用するUIのカスタマイズを行うインターネットを使用する その他
チュートリアルを作成することを目的とする そのため、ソースコードは特殊な事はしない コメントを多く入れる 画面キャプチャを多く使う

マイルストーン

・・・あまり堅苦しくやると大変なので余力があるときに記事を作成します。
そのためマイルストーンとは言っても日付を決めません。


アカウント認証機能の作成WebViewタイムラインの表示ListView投稿機能の実装EditTextoAuth を使用する。xAuth は申請が必要なため今回は使用しません。 タイムラインを表示するために ListView を使用します。ここで UI のカスタマイズを紹介します。 投稿機能では文字数制限を行う機能だけです。
このテーマをベースとして将来的にはマーケットに公開できるようなアプリに仕上げていければ・・・・とは思いますが、すばらしいTwitterクライアントが多いのでマーケットへの公開はせずに野良アプリとして公開します。
ソースコードは恥ずかしいですが Google code にアップしようと思います。
よろしくお願いします。