Blog 移転しました。

tumblr blog http://nkzawa.tumblr.com

PreferenceActivityのレイアウト変更

PreferenceActivityがListActivityを継承しているので、同様にListViewを含めたレイアウトを定義できる。
スクロールする要素を追加したいしたい場合は、getListView().addHeaderView(view)とかでできそう。

public class Preferences extends PreferenceActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // preferencesとは別にlayoutを設定する
        setContentView(R.layout.preferences);
        addPreferencesFromResource(R.xml.preferences);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
　　    android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        >
    <!-- このListViewにPreferencesが入る。idは"@android:id/list"で固定 -->
    <ListView
            android:id="@android:id/list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            />
    <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            />
</LinearLayout>

Androidアプリを作ったときにやったこと

少し前になりますが、Bookmark Homeというブックマーク関連のAndroidアプリを公開しました。AndroidもJavaも初めてで制作期間は2ヶ月ぐらい。その時の記録です。

アプリについて

ホームアプリのようなUIのブックマークアプリ。見た目はiPhoneにも近いです。詳しくは下のページ辺りを参照してください。

http://www.appbrain.com/app/bookmark-home/org.lagoscript.bookmarkhome
http://www.applizoo.com/detail/app/org.lagoscript.bookmarkhome

Java

Javaというか静的型付けの言語を本格的に触ったのは初めてだったけど、LLをいくつかやったことがあるためかすぐに覚えられました。やったことはリファレンス系の本を一冊軽く読んだだけ。自分にとってあまり新しい概念はない気がしたけど、Genericsとか無名クラスとかはちょっと新鮮でした。あとは言語がクラスの構造化を強制するのでその辺の勉強になった気がする。

Android

最初は初心者本を一冊読んでから、サンプルアプリ(Api Demo)を動かしつつそのソースを見ていきAndroidでどういう事ができるのかを確認。その後はAndroid本を数冊買って、オープンソースの標準アプリやAndroid自体のフレームワークのソースを確認しながら開発をしていきました。開発にはEclipseを使用。Vimなしでは生きていけない体になってしまっていたのでVrapperをインストールしてViライクなキーバインドにして使ってました。

標準アプリ

作ったものが近い機能をもっていたこともあり、"Launcher"と"Browser"がかなり参考になった。コードの構成とかに迷ったときにも、これらの標準アプリのソースを確認して同じ感じにしたり。ソースは下のページの"snapshot"からダウンロードするか、Gitでダウンロードできます。

http://android.git.kernel.org/

Androidフレームワーク

公式のドキュメントだけではフレームワーク部分の細かい動きがわからないので、ソースをダウンロードして読まなければならないことが多いです。必要なWidgetが足りないときに、近い機能を持つViewのソースをちょっと改造してWidgetを作ったりもした。

サンプルアプリ

Android SDKに含まれているApi Demosというアプリがとても参考になります。APIの簡単なサンプルを動かしながらソースを確認できる。Androidでできることを把握したり、これどうやるんだっけ？という時にとてもいい。

Android本

数冊読んだ中のオススメ。

初めてのAndroid

最初に読んだ初心者本。簡単な数独アプリを作りながらAndroidの基礎を把握できる。ちょっと古くなったけどコンパクトだし実際のアプリの作り方がわかるので一冊目として最適。

Google Androidプログラミング入門

たぶん一番詳細なAndroid本。これでも応用的なことをしようとすると全然足りないけど、ひと通り読むといい気がする。

Androidでリソースの画像を角丸に変換するやり方メモ

// リソースからbitmapを作成
Bitmap image = BitmapFactory.decodeResource(context.getResources(), R.drawable.image);

// 画像サイズ取得
int width  = image.getWidth();
int height = image.getHeight();

// リサイズ後サイズ
int w = 100;
int h = 100;

// 切り取り領域となるbitmap生成
Bitmap clipArea = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);

// 角丸矩形を描写
Canvas c = new Canvas(clipArea);
c.drawRoundRect(new RectF(0, 0, w, h), 10, 10, new Paint(Paint.ANTI_ALIAS_FLAG));

// 角丸画像となるbitmap生成
Bitmap newImage = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);

// 切り取り領域を描写
Canvas canvas = new Canvas(newImage);
Paint paint = new Paint();
canvas.drawBitmap(clipArea, 0, 0, paint);

// 切り取り領域内にオリジナルの画像を描写
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(image, new Rect(0, 0, width, height), new Rect(0, 0, w, h), paint);

// viewにset
ImageView imageView = (ImageView)context.findViewById(R.id.imageview);
imageView.setImageDrawable(new BitmapDrawable(newImage));

jQueryプラグインは簡単にGoogle Chromeエクステンションにできる

この前作ったjQuery flickableをGoogle Chromeのエクステンションにしてみたらすごく簡単だった。
設定ファイルとJS、CSSを少し書くだけ。

ファイルリスト

適当なディレクトリに次のファイルを用意。

• manifest.json
• jquery.js
• jquery.flickable.js
• content_script.js
• content_style.css

manifest.json

エクステンションの設定ファイル。

{
  "name": "Flick Scroll", // エクステンションの名前
  "version": "0.1", // バージョン
  "description": "Enable flick scrolling like iPhone",　// 説明

  // 表示したページで実行するスクリプトを設定する
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"], // 対象のページ、この例ではすべてのページを指定
      "css": ["content_style.css"], // 読み込むCSSファイル
      "js": ["jquery.js", "jquery.flickable.js", "content_script.js"] // 読み込むJSファイル
    }
  ]
}

jquery.js

jQuery本体そのまま。

jquery.flickable.js

jQueryプラグイン本体そのまま。

content_script.js

プラグインを実行するJSファイル。下記で全部。

var element = $('body');

if (!element.hasClass('ui-flickable')) { // プラグインがすでに読み込まれていないかチェック
    element.flickable() // プラグイン呼び出し
        
　　　　// 必要に応じて処理を追加する
        .addClass('chrome-flick-scroll')
        .click(function() {
            $(this).flickable('refresh');
        });
}

content_style.css

表示したページに適用するCSS。

body.chrome-flick-scroll > .ui-flickable-container {
  cursor: pointer;
}

body.chrome-flick-scroll.ui-flickable-disabled > .ui-flickable-container, 
body.chrome-flick-scroll .ui-flickable-canceled {
  cursor: default;
}

表示したページにJSを当てるだけならこれだけでOK。
ディレクトリをzipで固めてアップロードすると公開できる。

※エクステンションは実験的に公開していたものだったので削除しました

iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった

iPhoneやAndroid風にマウスでフリックスクロールできるようにするjQueryプラグインつくりました。
ページ末端を過ぎると戻るような動作を再現しています。ページ区切りを設定するとiPhoneのホーム画面のようなUIも実現できます。
現在はアルファ版として公開中。

デモ
デモ（ページ全体）
ダウンロード

コードサンプル

ページ一部をフリックできるようにする場合。

$('.selector').flickable();

ページ全体をフリックできるようにする場合。

$(window).flickable();

ページ区切りを作る場合。sectionオプションでセレクタか要素を指定します。

$('.selector').flickable({
    section: '.content'
});

オプションの取り方などを含め、jQuery UIと同じような実装にしています。
詳しくは、http://lagoscript.org/jquery/flickable を参照してください。

jQueryのテスト用ブックマークレット

jQueryのプラグインを作っていると、
好きなサイトにプラグインの機能を適応させて動作の確認をしたい場合があるんですが、
それを簡易的に行うちょっとしたブックマークレット。

javascript:
(function() {
    var $, s = document.createElement('script');
    s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
    s.onload = function() {
        $ = jQuery.noConflict(true);  // jQueryオブジェクトを退避させる 
        main($);
    };
    if (document.all) {
        // IE用の読込み完了確認
        s.onreadystatechange = function() {
            if (s.readyState == 'complete' || s.readyState == 'loaded') {
                s.onload();
            }
        };
    }
    document.body.appendChild(s);

    function main(jQuery) {
         // ここにメインの処理を書く
    }
})();

実際に使用するときには、
main関数の中にプログラムを付け足し、コメントと改行は削除します。

ブックマークレットなのでIEでの動作も確認できます。
ただし、スクリプトがあまり長いと後半が削られてしまうので、
一部を外部ファイルにまとめて読み込ませるなどの工夫が必要。