カテゴリー: 未分類

Ubuntu 12.04 で gitHub利用

最近 Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール
を購入し
gitHub に興味がでたので実践

しかし
最近 vagrant で仮想マシンを追加しすぎて
残り容量が少ないため
容量の確保

Vagrantの備忘録

を参考に
不必要な仮想マシンの削除
cd コマンドで VagrantFile のあるディレクトリに移動
vagrant destroy
で削除

これで必要な領域が確保できたので
まずは git の最新版をインストール

ubuntu 12.04 で

git --version

でバージョンをみると
古めの 1.7.9.5

このため最新版をインストールする設定をして
再度アップデート

Ubuntuのgitを最新版にアップデートする

を参考にアップデート

まずはレポジトリの追加と更新

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:git-core/ppa
sudo apt-get update

次にgit のアップデート

sudo apt-get install git

でインストールできたら

git --version

でバージョン確認

これで2.3.2 になったので
次に
github の登録

https://github.com/
へアクセスし
Sign up for GitHub
をクリック

登録画面になるので
Username にユーザ名

Email Address にメールアドレス

Password にパスワードを設定

Confirm your password
へ確認のためもう一回パスワードを入力

入力完了したら
Create an account
をクリック

次に料金プランの設定
デフォルトは無料の Free
変更したいのなら
Chosen をクリック

選択したら
Finish sign up
をクリック

すると Github から確認のためのメールが届くので
メールにかかれているリンクをクリック

するとメールの確認の画面になるので
Confirm
をクリック

これでメールアドレスが認証されます

Google Play バッジの作成

アプリを作成したら
次に考えることはリリースしたアプリをどうやって宣伝するか

これは twitter でできたことをツイートする
Google Play バッジを作成し
自分のサイトに貼り付ける
などいろいろな方法があります

今回はアプリへのリンクボタンになる
Google Play バッジの作成について

簡単に「Google Play バッジ」を作成してサイトに貼ろうず

を参考に
Google Play バッジを作成

作成するのは
Google Play Badge Generator

を利用します

まずはボタンの表示する言語
デフォルトは英語なので、これを選択

Package name には
自分で作成したアプリのパッケージ名を入力

次に作成するバッジの大きさを指定

これらができたら
Build my badge
をクリック

すると
その下にバッジを作成するための
HTMLコードが表示される
その下のボタンは表示されるボタンのこと

これを自分のブログなどに張り付ければ
クリックされると
Google Play のアプリの画面にリンクするようになります

Android 宣伝用画像の作成

Android アプリの公開には
宣伝用画像が必要になったため
これを自作することに

作成する画像のサイズは
横 1024
縦 500
の jpeg もしくは　24bit PNG

はじめて作成するときには
あまり難しいことを考えず
スクリーンショットと
宣伝のためのテキストで作成することに

まずは実際にアプリの操作画面をスクリーンショットで撮影

撮影方法は機種毎に違うため
手持ちの機種名 スクリーンショット

などで検索して調べることに

ちなみに私の使っているHTC J ONE の場合
電源ボタンを押しながら Home ボタンをおすと
スクリーンショットの撮影が可能になりました

そのままだと編集できないので
WiFi 接続にして
SwiFTPというソフトを使いFTPサーバーを使い
Ubuntu から FileZilla でダウンロードしました

取得したスクリーンショットのパスは
/mnt/sdcard/Pictures/Screenshots
にあるので
ここからダウンロードします

これで元になる画像はできたので
次に Gimp を起動

私の場合、バージョンが古いため
png などでも編集可能ですが
新しいバージョンだと png 形式で保存できないこともあるので
そのときには何かのソフトで変換するか
もしくは別のソフトを使うことになります

まず
File > 新しい画像
で
画像サイズがでるので
これを宣伝用画像の大きさである
1024×500 に設定しOKをクリック

次に３枚のスクリーンショットをくっつけて
1枚の画像にする

最初に
Gimp で
ファイル > 開く
でスクリーンショットの画像を選択

そしてこれを
右クリック > 編集 > コピー

そしてこれを最初に作成した
1024×500 の画面に貼り付け

そのままの大きさだと大きすぎるので、
ツールバーにある拡大縮小を使うことで
サイズを修正

これを選んで画像をクリックすると修正するサイズがでるので
300×500 に修正
これで拡大縮小を押せば修正される

次に修正した画像を移動して
画面に合わせたいので
ツールバーから移動アイコンをクリック
これでドラッグ＆ドロップで位置を補正する

そして３つの画像を並べます

ここまでできたら、名前をつけて保存します

今回は prom.xcf
で保存

ここで保存しておけば、文字を入れるときに失敗しても
やり直しが楽になります

次にアプリの解説文を挿入

ツールバーのテキストアイコンAみたいなのをクリック

表示領域を決め
テキストを入力
これにタイトルや解説、キャッチフレーズを入力します

なお、ツールバーで
フォントや文字サイズなどの指定ができます

これで完成したら
画像を保存

そのまま保存しようとすると xcf になるので
名前をつけて保存を選び
ファイル形式の選択から
JPEG画像を選択して保存

警告がでるけど、気にせずエクスポート
そして保存をクリック

これで宣伝用画像ができました

また、スクリーンショットも2枚必要になるので
同じ要領で
2枚のスクリーンショットを用意します

サイズは３２０x５００で作成しました

公開用に作成した keystore をデバッグで使うには

Android のアプリは公開するためには
keystore ファイルの作成と
それによる電子署名が必要

そしてすでに公開しているアプリをデバッグするには
この keystore ファイルでデバッグすることになる

これをやらないと Google Map のアプリの場合
地図が表示されなかったりするので注意

Eclipse での設定方法は
window > Preferences
で設定画面がでるので

Android > Build
で
Custom debug Keystore の設定を行う
ここで Browse をクリックして
公開に使用した keystore ファイルを指定

しかし
Keystore was tampered with, or password was incorrect
とエラーがでてしまう

理由を調べた結果
デバッグに使うパスワードが android でないとダメ
ということ

これを元に検索した結果
Android:商用署名(キーストア)をデバッグ用に変更する手順
http://yuki312.blogspot.jp/2013/05/android.html
によると

Eclipse ADT で使えるデバッグキーストアの条件は
keystore のパスワードが android
エイリアスが androiddebugkey
エイリアスパスワードが android
であることとのこと

このため keytool コマンドでこれらの条件を満たすように変更します

なお、念のため別のディレクトリにコピーしてから
行うようにします

mkdir android_release_debug
cp snowpool.keystore   android_release_debug/
cd android_release_debug/

これでコピーしたので、失敗したらやりなおしできる
まずは keystore のパスワード変更

keytool -storepasswd -keystore snowpool.keystore 

これで最初に今のパスワードを入力し
次に 変更するパスワードに android を入力

次にエイリアスを変更

keytool -changealias -alias snowpoolkey -keystore snowpool.keystore 

これで最初に 新しいエイリアスを入力するので
androiddebugkey

次に キーストアのパスワードを聞かれるので
android

最後に鍵パスワードを入れるけど
これは keystore ファイルをつくったときんパスワードで android ではないので注意

次にエイリアスパスワードの変更

keytool -keypasswd -alias androiddebugkey -keystore snowpool.keystore 

最初にキーストアパスワードを入力するので androidを入力
次に現在の鍵パスワードを入力するので
keystore ファイルを作成したときのパスワードを入力
新しい鍵パスワードを聞かれるので
android
を入力
これで設定完了すれば
Custom debug keystore にセットするときに
エラーがなくなり
MD5 fingureprint
SHA1 fingureprint
にも自動的に値が入力されます

これで再度アプリを実機デバッグすると
Application Install の警告がでてきます

どうやら debug に使うキーストアが変更されたため
以前のアプリをアンインストールし
新しい状態でインストールしますか？
と聞かれているので
yes

これで、表示されなかった地図も無事に表示されるようになりました

Android Developer Console にアプリ登録

まず
Google アカウントを取得
とはいってもすでに Android のスマートフォンなら
すでに持っているし、
Gmail を使っているのならそのアカウントでOK

URLは
https://play.google.com/apps/publish/

なおアプリの公開には開発者登録が必要で
２５＄必要

また、複数のアカウントの場合
実際に支払ったアカウントのみ有効

Developer Consoleにログインしたら
Google Play に Android アプリを公開
をクリック

すると新しいアプリを追加するダイアログがでるので
デフォルトの言語
タイトルを設定

タイトルにはアプリ名でOK

入力したら APKをアップロードをクリック

どの形式で公開するか聞かれるので
通常なら製品版を選択

そして製品版に新しいAPKをアップロード
をクリックすると、アップロードする画面になるので
作成した apk ファイルを選択

ファイルを選択すると後はアップロードが始まるので
そのまま待ちます

これでアップロードが完了すると
バージョン1として登録されます

これで
APK とかかれたところにチェックがつきますので
次にストアの掲載情報
をクリック

簡単な説明
と
詳細な説明
がありますが
簡単な説明は Google Play で最初に表示される
アプリの説明で

詳細な説明は
もっと読む
をクリックしたとき表示される説明となります

説明文ができたら
高解像度アイコン
そして
宣伝用画像を用意します

高解像度アイコンについては
作成した Eclipse のプロジェクトのなかに
ic_launcher-web.png
があるのでこれをドラッグ＆ドロップします

問題は宣伝用の画像です

実機デバッグで動作確認もとれたので
実際にナビをする画面を掲載する予定でしたが
apk ファイルをアップロードし
画像のスクリーンショットをとろうとしたところ
Google Map の地図が表示されません

このためしばらくいろいろと調べてみようと思います

apk ファイル作成と署名

電子証明書を keytool コマンドで作成したので
今回は apk ファイルを作成

プロジェクトを右クリック

Android Tools > Export Signed Application Packages
を選択
これでできると思ったけど
Exoirt Abirted
とエラーがでてしまう

エラーメッセージは
Export aborted bacause fatal lint erros were found
These are listed in the lint View
Elther fix these befre running Export again or turn off Run full erroor check when exporting app
in the Android > Lint Effor Checking preference page

ここででてくる Lint はソースコードの静的解析

これはセキュリティ
パフォーマンス
ユーザビリティ
アクセシビリティ
国際化などのチェック項目に引っかかっている
ということ

この場合の対処方法は
ソースコードの修正
もしくは Lint のチェック項目の緩和となる

まずはソースコードを修正しようとしたけど
エラーのでているのが
/res/values/strings.xml
の

<string name="app_name">PhotoNavi</string>

さすがにアプリ名でエラーは理解できなかったため
Lint app_name
で検索

Android Lintでエラーがでる

を参考にしてみたところ
ライブラリの言語リソース設定が
それを利用しているアプリの
リソース設定にまで影響してくる
とのことです

このため
Lint のチェック項目緩和の手段をとることに

設定するのは
Missingtranslation を無視するようにすること

プロジェクトを右クリックし
Properties を選択

Android Lint Preference を選択し
missingt
まで入力して
MissingTranslation の項目を検索

設定値を Fatalから Warning に変更し
applyをクリック

これで変更するとエラーがなくなり次にすすめるように

もう一回
プロジェクトを右クリックして
Android Tools > Export Signed Application Packages
を選択

するとapk ファイルにするプロジェクト名がでるので
Next をクリック

次に keystore ファイルを指定する
すでに作成済みなら
use existing keystore にチェック
Browse で場所を指定

Password には keystore ファイルのパスワードを入力する

次にAlias とパスワードを設定
これも同じパスワードになる

次の画面では
appk ファイルの保存先を指定する
Destination APK file
の横へ保存場所とファイル名を入力
拡張子は
.apk
になる

これは Browse ボタンで保存場所を開くだけでよい

場所が決まったら finish をクリックすると
apk ファイルが作成される

作成された apk ファイルに署名ができているか
調べるには　jarsigner コマンドを使う

jarsigner -verify -verbose -certs PhotoNavi.apk 

というように
jarsigner -verify -verbose -certs apkファイルのパス
で実行すると署名されているなら
その署名内容が表示される

Android ランチャーアイコン作成

Android Icon Set – お手軽なアイコン作成
http://papakingyo-android.blogspot.jp/2013/08/android-icon-set.html?m=1
を参考に
ランチャーアイコンの作成

まずは Eclipse を起動

アイコンを変更したいプロジェクトを右クリックし
New > Other
で
ダイアログがでてくるので
Android Icon set
を選択し Next をクリック

すると、どのアイコンを作成するのか選択する画面になるので
Lancher icons をクリックし
ファイル名を変えたいのなら
Icon Name
を
ic_lancher から変更する
そのままでよいなら Next をクリック

次に、どのようなアイコンにするか選択する画面がでてくる

最初はテキストタイプのアイコンになる

Background color で背景色の設定
Foreground color でも辞職の設定
Text にはアイコンに使う文字を設定

現在の状態だと
赤い背景に黒文字で aA
とかかれたアイコンができる

なお Foreground が現在 Text になっているので
テキストアイコンだけど
Image をクリックすれば
自分で用意した画像を使用することも可能
自作が面倒な場合は外注したりするという方法もありです

Browze で画像を検索

Shape は、アイコンの枠をどうするかを指定します

None なら枠はなし
Square なら四角
Circle なら円となります

アイコンについては
フリー素材で商用可能なものもあるので
それらをダウンロードカスタマイズするという方法もあります

Android アイコン　商用　フリー
で検索したら
2014年、無料で商用利用できる最新フリーアイコン素材のまとめ

というものもありました

そして最後にクリップアートを使う場合

これは Android SDK で用意されてる
クリップアートを使います

Clipart を選択し
選択します

Background Color ではクリップアートの背景色
Foreground Color でクリップアートの色を設定

変更が完了したら Finish を選択
これで
アイコンを置き換えてもよいか聞かれるので
yes all ですべて置き換えます

これでアプリのアイコンが変更されます

次回は apkファイルの作成と電子署名になります

公開のためにソースを編集していたら
アプリ名が消えてしまったので修正

まず
res/values/strings.xml
へ

<string name="app_name">PhotoNavi</string>

を追加

次にAndroid Manifest.xml の
application タグと activity タグへ

android:label="@string/app_name" >

を追加

これでアプリ名に戻った

これを消してしまうと、アプリ名ではなく
パッケージ名が表示されるようになるので注意

androidリリースのための署名の準備

Android開発で使うコマンド

を参考に

リリースのための署名ファイルを作成

今回、署名は端末から keytoolコマンドで行う

構文は

keytool -genkey -v -keyalg ＜鍵生成の暗号化方式＞ -keystore ＜証明書ファイル名＞ -alias ＜証明書別名＞ -validity ＜有効期限の日数＞

これをもとに

keytool -genkey -v -keyalg RSA -keystore /home/snowpool/snowpool.keystore -alias snowpoolkey -validity 18250

と実行

実行するとパスワードを入力することになる
ただしセキュリティのためか
入力した文字は表示されない

入力後確認のためもう一回入力する

すると姓名を入力することになるので
そのまま入力

組織単位名とか組織名を聞かれるけど
これは個人で開発するので
personal でOK

ここの部分については
Androidアプリへの署名の付け方

を参考にさせていただきました

都市名はそのまま住んでいるところの市町村
州名や地域名は都道府県を入力

単位に該当する2文字の国番号は
日本なら
JP

最後に上記の内容でよいか聞かれるので
yes
を入力

すると鍵パスワードを入力してください
とでるけど
キーストアと同じなので Enter でOK

これで署名ファイルができたので
署名の確認を行う

keytool -list -v -keystore snowpool.keystore

で設定したパスワードを入力すると
詳細をみることができる

なお GoogleMap API key で
この証明書の中のSHA１の値が必要になるけど
-v をつけ忘れると表示されないので注意

ここでSHA１の値を確認したら
Google Developers console へログインし
デバッグ用キーのSHA１の値から
自分の keystore ファイルのSHA１の値に変える

https://console.developers.google.com/project
へアクセスして
過去に自分が作成したAPIキーの編集をする

ここまででkeystore の作成と
API key の変更ができたので
次回はアプリのアイコン作成

Rapiro に音声合成で喋ってもらう

RAPIRO（ラピロ）に音声合成で喋らせる

という非常に興味深いものがあったので
さっそく実践

とはいってもスピーカーなどは用意していないので
音声操作のときに使ったマイクとイヤホンを使います

まずは ssh でログイン

本来は usb のスピーカーとかマイクを優先するため

sudo vim /etc/modprobe.d/alsa-base.conf

で
１７行めあたりを

options snd-usb-audio index=0

に書き換える必要があるけど
すでに Rapiro を音声で動かすために書き換え済み
なので
そのまま続行

設定がただしくできているかは

cat /proc/asound/modules 

を実行して

 0 snd_usb_audio
 1 snd_bcm2835

となっていればOK

ちなみに
snd_bcm2835
が０になっていると raspberryPi 本体の音源
が優先になっている

そして今回使用する
VoiceText Web API
は前回取得した API キーが必要

https://api.voicetext.jp/v1/tts
の後に様々なパラメータをつけることで
いろいろな操作が可能

簡単な解説は
https://cloud.voicetext.jp/webapi/docs/introduction
の解説をみるとわかりやすい

なおパラメータについては
https://cloud.voicetext.jp/webapi/docs/api
のAPIマニュアルをみると
パラメータの意味やエラーコードの意味が載っている

これらを元に apiキーを使って
curl で実行すると 音声ファイルを作成できる

curl "https://api.voicetext.jp/v1/tts" -o "test.wav" -u "取得したAPIキー:" -d "text=こんにちは" -d "speaker=hikari"

これは
-o “test.wav”
で出力し、保存するファイル名
今回なら test.wav に保存

-u “取得したAPIキー:”
でメールで送られてきた API キーを入力
これがないと音声合成は使えない

API key のあとに : をつけるのを忘れずに

-d “text=こんにちは”
で喋る文章を
こんにちわ
にしている

-d “speaker=hikari”
は
どのような音声にするかという指定
hikari なら女性の声になる
声の種類は
https://cloud.voicetext.jp/webapi/docs/api
の
speaker パラメータを参考に

ファイルができたら

aplay test.wav

を実行すれば
こんにちわ
とイヤホンから声が聞こえる

頻繁にAPIにアクセスできないのなら
ある程度の音声ファイルをつくっておく方法のほうが
いいのかもしれない

さらに、このAPIには
Node.js 用ライブラリがあるのでそれを使う

前回、Rapiro というディレクトリを作ったので
そこで実行してみる

 cd Rapiro/

そして
ライブラリをインストール

npm install voicetext --save

インストールはできたけど
自分の npm のバージョンを知りたかったので
npmコマンドの使い方

を参考に

npm -v

でバージョン確認

結果は
1.2.17
とりあえずインストールできたけど
今後のことも考えて

npm install -g npm@1.3.0

でバージョンをあげておく

なお
npmの1.3系ではディレクトリ名に大文字は使えない
らしいので
新しくディレクトリをつくり
そこで実行することにする

cd 
mkdir rapiro
cd rapiro

次に必要なパッケージのインストール

npm init
npm install express --save
npm install voicetext --save

あとは処理するスクリプトだけど
これは
app.js をそのまま使わせていただきました
ファイルは

vim app.js

で作成

次にサーバーを起動

node app.js

で起動するので
後はブラウザで
http://192.168.10.159:3000/rapiro/control/?text=今日は晴れるかな？
というように
http://rapiroのIP:3000/rapiro/control/?text=喋る文字列

とすればいい

これでイヤホンやスピーカーから
喋った音声が聞こえるようになる

なお、停止するには ctrl +c で停止できる