【HTML5】PC・スマホ両用のフォトギャラリー

スマートフォンでフリックして写真を切り替えられるフォトギャラリーがあると思いますが、
探してみるとPCと共通で使えるものはあまりなく、
スマートフォン専用であるものがほとんどでした。

その中で、スマートフォンとPCと共通で使えるフォトギャラリーを見つけましたので
紹介します。

画像をフリック可能なフォトギャラリー

まずは、データフォルダのヘルプページでも使ってるフォトギャラリーです。
PCならマウスでドラッグ、スマートフォンならフリックで画像を切り替えられます。
PCとスマートフォン共通で利用できるので、別々なページに切り替える必要がなく便利です。
下部の画像をクリック／タップしても画像切替が可能です。

【アイコン制作】二羽の鳥

頼まれてアイコン制作してみたので、
一応最終決定版以外のアイコンと制作の過程をここにアップしときます(^^;

依頼内容

・二羽の鳥が飛んでいる様子のアイコン

制作過程

依頼内容に合うアイコンの制作をしてみようと、
まずはこのアイコンを作ってみました。
（使用したソフトはフリーソフトのGimpです）

二羽の鳥が羽ばたいてる絵ですが、
背景がキャンパス記事にしたため、いまいち躍動感がありませんでした。

次は背景を変更して、
光に向かって飛んで行くような感じを出してみました。

【アプリ開発】ActionBarSherlockからActionBarActivityへの切替作業まとめ

データフォルダでは「ActionBarSherlock」を使用してアクションバーを実装していましたが、
サポートライブラリ v7 でアクションバーが実装されたため、全面的に切り替えを行いました。

ちょっと調べてみると簡単に切り替えられます、とあったのですが、
細かいところで意外に苦戦しました(^^;

その時に覚書として作業をメモっておきます。
後々まとめます。

事前準備

サポートライブラリに含まれる android-support-v7-appcompatプロジェクトをインポートし、

対象となるアプリの依存するライブラリとして、

プロジェクトの［プロパティー］→［Android］内のライブラリで設定してから、以下の作業を行いました。

変更作業

①継承するクラスの変更
　・SherlockFragmentActivity　→　ActionBarActivity
　・SherlockActivity　　　　　　　→　ActionBarActivity


②テーマの変更
　・setTheme(R.Style.Theme_Sherlock);　→　setTheme(R.Style.Theme_AppCompat);
　・setTheme(R.Style.Theme_Sherlock_Translucent);　 →　setTheme(R.Style.Theme_AppCompat);
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（代わりになるのが見つからなかった…）

③メニューアイコン設定の変更
　・subMenu.getItem().setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
　　　　　↓
　 MenuItemCompat.setShowAsAction(subMenu.getItem(), MenuItemCompat.SHOW_AS_ACTION_ALWAYS);


④アクションバー関係の変更
　import android.app.ActionBar;　→　import android.support.v7.app.ActionBar;
　Activity.getActionBar()　→　ActionBarActivity.getSupportActionBar()

⑤画像の変更※ActionBarSherlockのプロジェクトから画像を呼び出している箇所

・abs__ic_menu_moreoverflow_normal_holo_light　→　abc_ic_menu_moreoverflow_normal_holo_light

その他

■ActionBarActivityで用意されているテーマ
　Theme.AppCompat
　Theme.AppCompat.Light
　Theme.AppCompat.Light.DarkActionBar


■問題点
・サブメニュー関係がダイアログで表示される
　→ リストでの表示は難しい？
・サブメニューが開かなくなる場合がある
　→要調査



■他サイト資料
　→つ部 Android 勉強会 2013年9月 発表資料　（Slide Share）

【Design】スマートフォンの操作方法

いきなり基礎的な部分になってしまいますが、
普段なにげなくやっているスマートフォンでの操作（ジェスチャー）について、
GoogleのAndroid Design に載っている内容をまとめます。

他の人に説明するときとかに正しい呼び方を知っておくのも良いのではないでしょうか(^^)

タッチ（Touch）

アクション 

押す、離す

予想される動作

アイテムの選択、確定等

長押し（Long Press）

アクション 
押す、待つ、離す

予想される動作

アイテムの複数選択の開始等

スワイプ（Swipe or Drag）

アクション 
押す、動かす、離す

予想される動作

スクロール、画面遷移等

ドラッグ（Long Press Drag）

アクション 
長押し、動かす、離す

予想される動作

アイテムの移動、削除等

ダブルタッチ（Double Touch）

アクション 
素早く２回タッチ

予想される動作

ズーム、テキストの選択等

ピンチオープン（Pinch Open）

アクション 
２本の指で押す、外側に動かす、離す

予想される動作

ズーム

ピンチクローズ（Pinch Close）

アクション 
２本の指で押す、内側に動かす、離す

予想される動作

ズームアウト

元ネタはこちら > Gestures

Except as noted, this content is licensed under Creative Commons Attribution 2.5. For details and restrictions, see the Content License.

【アプリ開発】ペイントの描画処理

アプリ「ペイント～simple～」では、
通常のCanvasクラスで用意された関数を使って描画処理を行っています。

ペイントで用意している機能と描画処理について紹介していきます。

描画機能

◎ペン
◎線の描画

◎四角形の描画

◎円の描画

◎テキストの描画

◎ペンキの描画

描画処理

それぞれの機能について、処理を関数化していますので、

それらの関数（メソッド）を紹介していきます。

◎ペン

　　まずはペン機能です。

　　タッチしてから離すまでの間の軌道を描画します。

　　この機能はdrawPathの関数を使用します。

 
    /*******************************************
     * パスを描画
     * 
     * @param  [OUT] Canvas  Canvasクラス
     * @param  [IN.] Path    ペンの軌道
     * @param  [IN.] Color   ペンの色
     * @param  [IN.] int     ペンの太さ
     * @return none
     *******************************************/
    private void DrawPath(Canvas csCanvas, Path DrawPath, Color DrawColor, int nDrawStrokeWidth)
    {
 Paint paint = new Paint();
 paint.setAntiAlias(true);
 paint.setColor(DrawColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(nDrawStrokeWidth);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeJoin(Paint.Join.ROUND);

     // 描画中のパスを描画
     if(null != m_csDrawPath){
      csCanvas.drawPath(DrawPath, paint);
     }
    }

　　Canvasクラスと描画するパス、ペンの色と太さを指定してペンを描画します。
　　パスはタッチしてからの軌道を記録しておいたものを渡します。

【SD】スマートフォンのSDカード

スマートフォンで使用するSDカードについて情報をまとめていきます。


まず、スマートフォン（Android対応機種）では、
主に「microSD」と呼ばれる小型のSDカードが使用されます。

SDメモリーカードを一般的に「SDカード」と呼び、フラッシュメモリーに属するメモリーカードです。



簡単にSDメモリーカードの種類について紹介して、
スマートフォンで使う上でのSDカードの問題点と寿命について説明します。

SDカードの種類とスピードクラス

「容量」を示す名称として以下の3種類があります。

SDカードの種類と規格上の最大容量

一般表記	最大容量
SD	2GB
SDHC	32GB
SDXC	2TB(2000GB)

SDHCカードの規格策定と同時に、
データ転送速度の目安として「SDスピードクラス」が定められています。

※Class10は後で規格化されたため、ハードによっては上位互換がない。

SDカードの種類によって、対応のスピードクラスも決まっています。

カメラやビデオを取る場合は、Class4以上が推奨されています。

もし写真をとるとき、カメラの反応が遅いとおもった場合には、SDカードのクラスを10にしてみると、

動きが格段に良くなるかもしれません。

また、スピードクラスはClass10以上の新規格の「UHS Speed Class1（U1）」があり、

この規格に対応する機種が今後でてくるのではないかと思います。（もうでてたりする？）

SDカードの問題点と寿命

書き換え可能回数に上限があり、書き換えを一定数繰り返すと正常に保存できなくなったり、保存されているデータの破損する可能性が高まります。

またフラッシュメモリは精密な電子製品であり、電気的なストレスに弱く、水没など水に起因する故障も起こりえます。