2013年11月25日月曜日

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

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

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


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


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


2013年11月23日土曜日

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

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



依頼内容

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


制作過程

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



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

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



2013年11月14日木曜日

【アプリ開発】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)


2013年11月13日水曜日

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

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

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



タッチ(Touch)




アクション 

押す、離す



予想される動作

アイテムの選択、確定等


長押し(Long Press)


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

予想される動作
アイテムの複数選択の開始等

スワイプ(Swipe or Drag)


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

予想される動作
スクロール、画面遷移等

ドラッグ(Long Press Drag)


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

予想される動作
アイテムの移動、削除等

ダブルタッチ(Double Touch)


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

予想される動作
ズーム、テキストの選択等

ピンチオープン(Pinch Open)


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

予想される動作
ズーム

ピンチクローズ(Pinch Close)


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

予想される動作
ズームアウト




元ネタはこちら > Gestures

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

2013年11月7日木曜日

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

アプリ「ペイント~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クラスと描画するパス、ペンの色と太さを指定してペンを描画します。
  パスはタッチしてからの軌道を記録しておいたものを渡します。



2013年11月2日土曜日

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

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


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

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



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




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

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

SDカードの種類と規格上の最大容量
一般表記最大容量
SD2GB
SDHC32GB
SDXC2TB(2000GB)
SDHCカードの規格策定と同時に、
データ転送速度の目安として「SDスピードクラス」が定められています。


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



SDカードの種類によって、対応のスピードクラスも決まっています。
カメラやビデオを取る場合は、Class4以上が推奨されています。

もし写真をとるとき、カメラの反応が遅いとおもった場合には、SDカードのクラスを10にしてみると、
動きが格段に良くなるかもしれません。

また、スピードクラスはClass10以上の新規格の「UHS Speed Class1(U1)」があり、
この規格に対応する機種が今後でてくるのではないかと思います。(もうでてたりする?)




SDカードの問題点と寿命

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

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


2013年10月31日木曜日

【アプリ活用】PVSTAR+

こんばんは。

今回は自分が音楽プレイヤーとして使っているアプリ『PVSTAR+』をご紹介します。

音楽プレイヤーと言っても、携帯やSDカードに音楽を保存しているものを
再生するわけではありません。

YouTubeやニコニコ動画、DailymotionVimeo等の動画共有サイトから音楽を探して、
再生できるクラウド型の音楽プレイヤーです。




活用方法

自分が主に利用しているのは車内でのFMトランスミッターによる音楽再生です。
充電しながら音楽を再生させて、ナビを使ったりもしています。

音楽を持ち運ぶ必要がないため、音楽の入れ替え等の手間をかけずに
「人気動画ランキング」から最新の音楽を聞くことができて便利です。

洋楽やちょっと前にはやった曲なんかもたまにランキングにのっていたりするので
そういうのも聞いたりしちゃってます(^^)

気に入った曲などはプレイリストのような形で保存できる「マイリスト」を作成可能です。
たまたま見つけた良い曲や懐かしい曲、カラオケで歌いたい曲なんかを見つけた時に
保存しておいて、時間がないときはそれをまとめて再生させたりして活用してます(^0^)/

自分が知ってる曲や良い曲に巡りあうための機能も充実してますので、
それらの便利な機能について紹介していきます。


2013年10月24日木曜日

【データフォルダ】広告枠の販売について

これまで何件か広告枠の掲載について要望がありましたので、
データフォルダアプリの広告の掲載が可能な広告枠についてお知らせいたします。


掲載可能な広告枠

データフォルダアプリ内の以下の箇所に広告の掲載が可能です。


 ①データフォルダ内各ページの画面下部
 ②ユーザフォルダ内各ページの画面下部
 ③デザイン選択画面下部(アイコン型のみ)
 ④SD情報ページの画面下部(アイコン型のみ)
 ⑤フォルダーショートカットのウィジェット設定画面の
   アイコン選択画面(アイコン型のみ)

①②





















広告枠概要

【広告種類】
 ・バナー型 :①と②で表示
 ・アイコン型:①~⑤で表示

【広告サイズ】
 ・バナー型 :480px×75px,320px×50px
 ・アイコン型:114px×114px

【販売期間】
 ・バナー型 :1日から可能、表示回数単位でも可
 ・アイコン型:1日から可能、表示回数単位でも可


2013年10月22日火曜日

【アプリ開発】Androidの基礎情報

少しここでAndroidとはなにかについてまとめておきたいと思います。

AndroidOSについて

・カーネルやライブラリー、ランタイムなどはほとんどがC言語またはC++で記述
・アプリケーションはGoogle独自に構築した仮想マシンであるDalvik仮想マシン(VM)上で動作
アプリの開発用にはAndroid SDK を使用
・低レベルのランタイムとライブラリーの開発用にはAndroid NDK を使用

AndroidOSは、端末を制御するオペレーションシステム(OS)です。
AndroidOSが搭載された端末ではAndroidアプリを動作させることができます。

現在では、携帯電話の他、ウォークマンやテレビ, 家電等にも組み込まれてきていて、
どの端末でも同じようにアプリなどを動作できるのが魅力的だと思います。


AndroidのバージョンとコードネームとAPIレベル

プラットフォームAPIレベルコードネーム公開日
Android 1.01Base2008/09/23
Android 1.12Base 1_12009/02/09
Android 1.53Cupcake2009/04/30
Android 1.64Donut2009/09/15
Android 2.05Eclair2009/10/26
Android 2.0.16Eclair 0_12009/12/03
Android 2.1.x7Eclair MR12010/01/12
Android 2.2.x8Froyo2010/05/20
Android 2.39Gingerbread2010/12/06
Android 2.3.1
Android 2.3.2
Android 2.3.310Gingerbread MR12011/02/09
Android 2.3.4
Android 3.0.x11Honeycomb2011/02/22
Android 3.1.x12Honeycomb MR12011/05/10
Android 3.213Honeycomb MR22011/07/15
Android 4.014Ice Cream Sandwich2011/10/19
Android 4.0.1
Android 4.0.2
Android 4.0.315Ice Cream Sandwich MR12011/12/16
Android 4.116Jelly Bean2012/07/09
Android 4.1.1
Android 4.217Jelly Bean MR12012/12/13
Android 4.2.2
Android 4.318Jelly Bean MR22013/07/24
Android 4.419Kitkat2013/11/03
Android 5.021Kitkat2014/11/12

・Androidのバージョンは2013年10月時点では99%以上がVer.2.1以上
 アプリ開発を行う場合はVer.2.1以上をターゲットとして開発を行えばほぼすべてのユーザーで使えるアプリが作れると思われます。



ライフサイクル


Android上ではアプリ等は上記のようなサイクルで処理が実行されます。




  • onCreate() … Activityが作成される一番はじめの一回
  • onRestart() … (ホームボタンなどで停止した後など)開始する直前
  • onStart()  … (ホームボタンなどで停止した後など)ユーザーから見える直前
  • onResume() … (他の画面が前面に来て閉じた後など)フォアグラウンドに表示された時
  • onPause()  … ホームボタンなどで停止した時や、別のアクティビティを開始した時
  • onStop()   … アクティビティがユーザーから見えなくなった時
  • onDestroy() … アクティビティが不要になった時、破棄される前の時


  • この記事はもう少し正確な情報を仕入れた上で、
    ちょくちょく情報を追加していきます。

    まとめるべき内容や間違いなどあればどなたかご指摘くださいm(_ _)m

    【アプリ開発】画像への描画

    前回、【アプリ開発】背景画像の描画で背景画像の描画について紹介しました。


    今回はそれを応用して、
    画像に描画を行って別の画像を表示する方法を紹介します。


    紹介する方法は実際にデータフォルダに使用している処理で、
    以下の2点を紹介していきます。

     ・動画ファイルの画像に再生ボタンの描画
     ・ファイル画像に拡張子の描画


    動画ファイルの画像に再生ボタンの描画


    データフォルダでは、動画ファイルの画像を一覧で表示しますが、
    その際画像には再生ボタンを描画して表示しています。

    2013年10月19日土曜日

    【アプリ開発】画像ファイルなしで背景画像を作る①

    今回はいよいよアプリ開発の方に入っていきたいと思います。

    最初はサンプルアプリでも作ってみながら、
    どんな風にアプリが作れるのかみてみると良いと思います(^0^)/

    自分もサンプルアプリとして作成したアプリの中で、
    今後もどこかで使えるだろうと思える機能や処理を紹介していきたいと思います。

    ここでは、プログラムで描画した背景とコードを載せて、
    背景画像を切り替えるサンプルアプリを例に紹介していきます。


    アプリ

















    サンプルアプリをリリースしていますので、よかったらお試しください(^0^)/♪



    背景パターン

    現時点で作成している背景は7つあります。

     ・水玉模様(隙間少なめ、グラデーションあり)
     ・チェック柄(モノクロ)
     ・多数の丸(カラフル)
     ・多数の四角(カラフル)
     ・フラットデザイン文字入り(カラフル、半透明)
     ・フラットデザイン文字入り(カラフル、透過なし)
     ・フラットデザインの市松模様(カラフル)


    パターンごとに画面図とコードを紹介していきます。


    パターン1:水玉模様(隙間少なめ、グラデーションあり)


    drawOvalで単純に丸を描画していきます。
    ループ中に色を計算して丸に色をつけます。

       public void DrawBackground001(Canvas csCanvas)
       {
        Paint csPaint = new Paint();
        RectF sOval = new RectF();
        for(int x=0; x<=320; x+=10)
        {
         for(int y=0; y<=320; y+=10)
         {
          csPaint.setAntiAlias(true);
          csPaint.setARGB(255,x*255/320,y*255/320,(int)Math.log(x*y));
          sOval.set(x, y, x+10, y+10);
          csCanvas.drawOval(sOval, csPaint);
         }
        }
       }
    


    2013年10月14日月曜日

    【アプリ活用】Endomondo

    これまで色々なアプリを使ってきましたが、
    日常生活の一部でアプリを使って活用していたりするので、
    その活用事例をこれから紹介していきます(^0^)/

    今回紹介するジャンルは、スポーツです。
    自分はよくジョギングをするとき、このアプリを利用してタイムを計っています。


    走るときにこのアプリを使ってタイムを計るだけで、
    以下のような分析結果を表示してくれます。


    Endomondo Sports Tracker


    Endomondo Sports Trackerは、様々なスポーツに対応していますが、タイムや距離の記録を取るためランナーに一番使われてると思います。

    時間、距離、速度、消費カロリーなどをリアルタイムに計測し、それを自動で管理・分析してくれます。
    分析する内容も昔よりも高低差や消費水分量などが増えており、過去の記録を分析することもできますので、トレーニングにはかなり役立つのものになっています。

    Endomondoのアプリで記録したデータは全てクラウド上で管理されます。
    Webサイトへデータの連携が行われていて、
    Webサイト上で提供されている分析記録のサービスが利用可能です。
    (無料のアカウントの登録が必要です。)


    2013年10月12日土曜日

    【アプリ】データフォルダの紹介ビデオ

    こんばんは。

    以前からアンドロイダー様に公開デベロッパーとして登録していましたが、
    アンドロイダー様にデータフォルダの紹介ビデオを作ってもらっていました(^0^)/

    アプリの説明ビデオを作るのは難しいかなーと思っていたので、
    無料で製作してくれたアンドロイダー様には感謝です♪


    アプリのダウンロードページやヘルプページにあるデータフォルダの説明を読むより、
    ビデオで見れた方がわかりやすくていいですよね~(*^0^*)

    ぜひ一度見てみてください☆



    紹介ビデオ

       

    2013年10月11日金曜日

    【アプリ開発】環境のセットアップ

    こんばんは。

    今日はアプリ開発環境の設定手順を簡単に説明していきます。

    手順

    ① 必要なソフトのダウンロード(EclipseJDKAndroid SDK
    ② ①をインストール後、Eclipseの設定
    ③ Android端末のエミュレータを設定して起動


    詳細

    ① Androidアプリの開発に必要な開発支援ツールと開発キットをダウンロードします。
      
      Androidの言語はjavaになりますので、
      ・ javaの開発キットであるJDK
      ・ Androidアプリの開発キットであるAndroid SDK
      をそれぞれダウンロードしてインストールします。

      そして、開発支援ツールであるEclipseをダウンロードしてインストールします。

      Eclipseの設定については良いまとめサイトがあるので、以下のサイトご参考くださいm(_ _)m
    ■Android開発環境の構築 Eclipse編
    ⇒ http://izeef.web.fc2.com/develop/android/env_eclipse.html

    2013年10月9日水曜日

    【Google検索】リンク集は注意!!

    アプリ開発の話からちょっと離れますが、
    最近Google検索アルゴリズムの変更がありました。

    今回の“アルゴリズム変更は「世界中のGoogle検索の90%に影響を与える」CNET Japan
    そうなので、ここで少し触れておきたいと思います(^^;


    今回の検索アルゴリズムのアップデート(通称「ハミングバード」)では、
    相互リンクの行為がスパムとして扱われるようになるそうです。


    サイト内にリンクやリンク集などでたくさんのリンクがあるページがある場合、
    相手側からもリンクされているとスパム扱いされる危険性がでてきそうなので
    注意が必要です。

    その対策として、リンクに「rel="nofollow"」をつけることで、
    Googleはリンクをたどらなくなります。


    ⇒ rel="nofollow"について(Google ウェブマスターツール)


    上記で説明している rel="nofollow"の使用例として、
    以下のようなリンクに使用すると説明しています。
    ・信頼できないコンテンツ
    ・有料リンク
    ・クロールの優先順位(他に優先したいページがある場合に検索除外する意味で使用)

    今後はSEO対策が施されただけの相互リンクサイトやリンクだけのサイトが減り、
    コンテンツが重視されたサイトが検索上位に表示されるようになってくるんでしょうか。


    以下のサイトで説明しているような「コンテンツ イズ キング」の時代になってくるのかなぁ
    と少し期待しています(^^)


    2013年10月8日火曜日

    【コンテンツ開発】開発に必要なソフトウェア(準備)

    こんばんは。

    今日はアプリ開発を行うための準備として、必要な開発環境についてまとめていきます。

    ソフト以外にもWebにも便利なサービスがたくさんありますので、
    アプリ開発を行ううえでは、こちらも含めて紹介していきたいと思います。

    関連して画像加工や動画作成なんかで便利だったソフトもあったのでここにまとめておきます。



    (1)Androidアプリ開発環境(ソフト)

    Android Studio……Googleが提供するAndroid開発環境(Windows/Mac)
    Eclipse ……………Visual Studioのような総合的な開発支援ツール(Windows/Mac)
    Android SDK………Android 開発キット、必須です(Windows/Mac)
    Chrome Canary … Google Chromeの開発者用ブラウザ(Windows/Mac)
    PupSQLite  ………アプリで使用するDBを確認するツール(Windows)


    2013年10月7日月曜日

    k0j1 Webサイトの紹介

    前回のアプリの紹介に引き続き、
    開発アプリのWebサイトについて紹介していきます。

    k0j1の開発アプリ一覧のページを用意しました。
    jQuery Mobileを使用したページで、各アプリのヘルプページにリンクしています。


    Webサイト

    k0j1-アプリ一覧


    ■データフォルダ-ヘルプページ











    ■スクリーンメモ-ヘルプページ











    ■ペイント~simple~-ヘルプページ













    各アプリのページはアプリからオプションメニューのヘルプで
    これらのページに飛ぶように設定していますので、
    実際にアプリのヘルプページとして利用しています。


    アプリでそれぞれプロモーション用の画像を作成していたのですが、
    今のGooglePlayでは使われていないのが少し残念です(^^;

    まぁそこまで出来が良いわけでもないのですが、
    画像の作成は時間がかかるため、もうちょっと活躍させたかったなと思っていたので、
    せめてブログででも使いたいなと思い紹介しました(^0^;


    アプリではWEBと連携したものも作ってみたいとは思うので、
    今後はそのような技術も取り入れていこうと思います(^^)


    また、今回WEBで使用しているjQuery Mobileについても、
    色々と便利な機能が揃っているので、使用中の機能や今後使用する情報について
    書いていきたいと思います(^0^)/

    2013年10月6日日曜日

    k0j1 開発アプリの紹介

    Androidでアプリを開発するにあたって色々と仕入れた情報を公開していきたいと思います(^0^)/

    これまでの開発ネタやこれから仕入れた情報をブログにまとめていきますので、
    今後もチェックしていただけるとありがたいですm(_ _)m



    まず、これまでにいくつかアプリを開発して公開・アップデートしてきましたので、
    それらのアプリを紹介します。


    k0j1 開発アプリ一覧(2013年10月時点)

















    全部英語表記になってますが、現在公開中のアプリは

    ■データフォルダ(通常版、有料版、シンプル版)
    ペイント
    スクリーンメモ
    ■MHP3rd 早見表 ←※これはカプコン様から停止を求められたため公開停止しています…

    のアプリです。

    現在も主に更新してるアプリは、データフォルダやスクリーンメモがほとんどです。

    今まではアップデート中心だったのですが、他に優良な競合アプリが出てきたため、
    今後は新アプリやデータフォルダの改良版等を作って公開していきたいと思っています(^^;

    開発中に集めた情報や小ネタなども多くあるので、
    自分用にまとめる意味でもブログに書きためていきたいので、色々情報公開していきます。



    また、アンドロイダーというサイトでもアプリを紹介していますので、
    よろしかったらこちらもどうぞ☆
    アンドロイダー公認デベロッパー認証