Androidアプリで背景が透明な画像にRipple Effectをつける男
bluecodeのいーちゃんです。
タイトルの通りAndroidアプリの中で背景が透明な画像にRipple Effectをつけたい場面があったんですが、少し詰まったので載せておきます。
こんなんです。(画像だとrippleがわかりにくいですが)
Toolbarウィジェットを使えば自動的にエフェクトがつきますが、ここでは全て自前で、かつ汎用的に使える手段を記載します。
Activityに関して特筆事項はありませんが一応載せておきます。
この画面に遷移するためだけのMainActivityもあるとして、SubActivityとしています。
[SubActivity]
class SubActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.sub_activity) findViewById<View>(R.id.sub_activity_back_button).setOnClickListener { finish() } } }
Effectをかけたい範囲をFrameLayoutで指定し、背景をbackground="@drawable/background_selector_shape_oval_white]"で指定します
[sub_activity.xml]
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#443a59"> <LinearLayout android:layout_width="match_parent" android:layout_height="?actionBarSize" android:orientation="horizontal"> <FrameLayout android:id="@+id/sub_activity_back_button" android:layout_width="36dp" android:layout_height="36dp" android:layout_gravity="center_vertical" android:layout_marginLeft="12dp" android:background="@drawable/background_selector_shape_oval_white"> <ImageView android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center" android:contentDescription="@null" android:src="@drawable/icn_actionbar_back_button" /> </FrameLayout> </LinearLayout> </FrameLayout>
ここからがポイントです。
コード内にコメントしていますが背景が透明な時はmaskの指定が必要になります。背景が透明でなければ不要です。
maskは指定しなかった場合は対象の背景部分が波紋の広がる範囲となるため、背景が透明だとエフェクトもみえません。
[background_selector_shape_oval_white]
<!-- タップ時にoval型の#59FFFFFF色の波紋を出すレイアウト(デフォルト透明) --> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#59FFFFFF"> <!-- デフォルト色がtransparentの場合はmask指定が必要 --> <item android:id="@android:id/mask"> <shape android:shape="oval"> <!-- ここのcolorは指定が必要だが反映はされない --> <solid android:color="@android:color/white" /> </shape> </item> <!-- デフォルト状態の背景 --> <item> <shape android:shape="oval"> <solid android:color="@android:color/transparent" /> </shape> </item> </ripple>
これで画像のように画像タップ時に半透明な白色の円形のエフェクトを見せることができます。
色や形をカスタムしたい場合は[background_selector_shape_oval_white]で指定するshapeやcolorを任意に変更してください。
ただしrippleエフェクトが機能するのはtargetSdk21以降のみになります。
targetSdkが21未満の場合は[background_selector_shape_oval_white]ファイルをres/drawable-v21配下に移し、res/drawable配下に同じファイル名で下記のようなファイルを追加して、押下時に背景色が変わる処理を入れてあげると良いでしょう。
[res/drawable/background_selector_shape_oval_white]
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- pressed --> <item android:drawable="@drawable/background_shape_oval_white" android:state_enabled="true" android:state_pressed="true" /> <!-- default --> <item android:drawable="@android:color/transparent" /> </selector>
[background_shape_oval_white]
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#59FFFFFF" /> </shape>
drawableファイルでselector指定するところとか冗長でめんどくさいですよね
以上です。あざっした。
はじめてのUnity 入門サイト・本の紹介など
こんばんわ。BLUECODEのオカモです。
今日はゲーム開発環境の雄、Unityについて書いていきます。
最初に一言。
「Unityっていいゾォ〜〜〜〜〜〜。」
ってそんな言えるほど僕自身まだまだ使いこなせてないんですけどね。
Unityの最大のメリットは3D(2D)ゲームが比較的簡単に開発できる点にあると思います。
MonacaにしろUnityにしろ、今の時代は新規参入の開発者にとってとても開かれた状況であると言えます。素晴らしいっ！！
Unityがいいのはわかった。じゃあどうやったらゲーム作れんの？
そうです。そうなんです。簡単とは言っても、ある程度の基礎的な学習は必要になってきます。学習といってもUnityの場合、簡単なアプリなどでは成果物がすぐにできるので、遊び感覚でサクサク学習できます。
僕自身まだまだUnity初心者ですが、一番最初にやったUnityについての学習はこのサイト(https://github.com/unity3d-jp/FirstTutorial/wiki)でした。
ここのサイトで作る玉転しアプリを作ることで、RigibodyやAddForceなどUnityの基本中の基本を押さえることができます。「これからUnity初めて世界とってやんぞ！」というあなたはぜひ実際に玉転しアプリを作ってみてはいかがでしょうか？
次に「玉転しアプリは作った、次はスマホ向けのアプリ作りたいんだが、何をすればいいのやら。。。」というあなたには、この本あたりがいいかもしれません。
この本はサンプルアプリが充実しており、サンプルアプリを土台にして、自分自身のオリジナルアプリを作成することもできます。
かくいう僕自身もFlappy Azarashiというサンプルアプリを参考にして(ほぼそのまんまw)「Shatikun GO!」というアプリを作ってみました。
画面タップするだけの簡単なゲームですが、実際に一つアプリを作ってリリースするという経験の中で得られるものはかなりありました。
※シャチ(社畜)くんの残業時間が伸びるに連れて、シャチ君から時間(時計のエフェクト)が放出されるところにこだわってます。
他にも今画策中のアプリがありまして、その名も
っていう思いっきりネタ系で滑ってるアプリ作ろうとしてます。
ネタ系の3Dアプリは前々から作りたかったんですが、このアプリ案を思いついたきっかけは、Asset Store(Unityの素材販売サイト)でこのおじさんを見つけたからです。
https://www.assetstore.unity3d.com/jp/#!/content/73409
※渋い。渋すぎる。顔だけ見たら坂本龍一に似てるような気がする。
もしかしたら、この渋いシリアルキラーがゆるふわ女子みたいにマカロン追いかけてたらおもしろいのではないのか、、、、、？！！！！！
と思ったわけですオカモは。。。(安易で滑ってる？俺は気にしないぜっ！)
とまぁアプリの案は思いついたので、今後このアプリを制作していく中で出てきたTipsや開発状況など、また記事にしていきますのでお楽しみに！！
Cordova crypt file pluginとCamera(カメラ操作プラグイン )について【開発Tips】
こんばんわ。BLUECODEのオカモです。
今回も前回の(オカモの)投稿に引き続き、Monacaアプリの暗号化プラグインである「Cordova crypt file plugin」について書いていきます。
先日リリースしたYourshelf(Yourshelf ~棚でつながるSNS~ - Google Play の Android アプリ)のリリースビルドを行う時、困った事態に陥りました。
Yourshelfでは暗号化プラグインの他に、「Camera」という写真の撮影やライブラリへの参照を行うためのCordovaプラグインを使用しているのですが、そのプラグインがビルド時に動かないというなんとも悲しい出来事が起こってしまったのです。
アプリのPGも完了し、いざ最終テストを行うためアプリをビルドし動かしてみると、写真投稿機能が動かない、、、チーン
俺たちの3ヶ月は一体。。。。。。-_-; -o-;=_=;
はじめは全く原因がわからず途方に暮れていました。
途方にくれていても仕方ないため、ググってみると、以下のQiitaサイトのコメント欄に今回発生した問題と関係ありそうなコメントを発見しました。
※Cordova crypt file pluginを作った人って日本人なんですね。僕はてっきりウォズニアックみたいなゴリバチギークおじちゃんだと勝手に想像していました。日本人も捨てたもんやないで！開発者のtkyajiさんこの度は本当にありがとうございました。そしてこれからもプラグインを使用させていただきます。
ここではimage-pickerというプラグインとの併用による動作不具合の報告がコメントされていますが、Cameraプラグインについても同じなのではないかと考えたわけです。
上記にリンクを貼ったtkyajiさんのQiitaにも丁寧に書かれていますが、Cordova crypt file pluginはデフォルトでhtml,htm,css,jsファイルを暗号化します。
※正規表現で暗号化対象の拡張子を指定していますね。
よってデフォルトのままの状態でプラグインをインポートしビルドを行うと、自分たちで作成したファイル以外のファイルについても暗号化処理が実行されます。
ここにCameraプラグインが動かなくなった原因がありそうな予感(6sense)がしたので、暗号化するソースを指定して再ビルドを行うとうまくいくのではと考えました。
今回、Yourshelfでは自分たちで作成したソース(nifty backendのキーを含む)のみ暗号化できれば必要十分だったので、暗号化対象に作成ソースのみを指定することにしました。
暗号化対象の指定方法は下記通り、
①Github(https://github.com/tkyaji/cordova-plugin-crypt-file)からプラグインをダウンロード
②ダウンロードしたzipファイルを解凍し、フォルダの直下にあるplugin.xmlファイルを開く。
③ファイルを開いたらソース下部にあるincludeタグに暗号化処理を行いたいファイルを指定していく。(下記イメージ参照)
※逆にこのファイルだけ対象外にしたいって場合、excludeタグに暗号化の対象外にしたいファイルを指定していけば良いです。
※少々力技ですがsample.jsを暗号化対象に含めたい場合、この書き方で指定を実現できます。
他のやり方がわからず、正規表現でもこの方法で1ファイルごとの指定が実現できたため、この方法でぶっちぎりました。ゴリ。他に正攻法の指定方法ご存知の方いましたらお教えくださいお願いします。
plugin.xml編集後、再度暗号化プラグインをフォルダごと圧縮(zip化)し、MonacaクラウドIDE上からインポート(Cameraもインポート)し、再ビルドすると。。。
「写真投稿機能動いたデェ〜〜〜！！！」
いやー良かったです。一時はどうなるかことかと思いました。
同じくアプリ完成したけど、暗号化時に死にたくなっている開発者の方いましたら(いないか？w)、この記事を参考にしてみてください。竹原ピストルよろしく、ノックダウンした可愛い我が子(作ったアプリ)が再び呼吸を始めることができるかもしれません。
ハイブリッドアプリ開発プラットフォームMonacaって実際どうなの？？
どうもはじめまして、BLUECODEのいーちゃんです。
ハイブリッドアプリ開発プラットフォームを謳うMonacaって実際どうなの？？
っていう人向けに特に自分達が使う前に気になっていた点について書いてみたいと思います。
・本当に使いやすい？
・公式サイトでは夢のようなツールに書かれてるけど問題はないの？
っていうあたりですね。
[Monacaを実際に使ってみて]
・開発が簡単って書いてるけどホント？
これは本当です。
僕はおかも、ひーくんと違い、組み込みメインの会社で働いているため、こういったアプリ開発の開発にそもそも疎かったんですがそれでも多様かつ十分な機能を実現できます。
具体的には各画面遷移、非同期通信による動的コンテンツの生成、画面デザイン、が特に作りやすいと感じました。
[画面遷移]
こんな感じでクリックイベントと合わせて引数付きで実現できます。
これでこのタグを押せばxxx.htmlに引数つきで遷移できます。
非常に直感的ですね。
[非同期通信による動的コンテンツの表示]
これもOnsenUIのonsタグとAngularJSのディレクティブという機能を使うことで容易に実現できます。
[hoge.html] 動的コンテンツ表示するをhtml
[fuga.js] 非同期処理のコールバックを処理するjs
非同期通信のコールバックで渡ってきた値をhtml側で指定している変数(ここではCommentList)に格納し、$apply()を呼んであげれば、即座に新しいDOMが生成され画面が動的に生成されます。
※ 少し込み入った話ですが自分たちが詰まった点なので補足しておきます。非同期処理のコールバックで$scope内の変数に値を格納した場合、$scope.$apply()を呼ばないと結果が反映されません！
[画面デザイン]
これはこんな便利なデザインパターンが容易されています。
http://components.onsen.io/patterns
ですので僕のようなほぼHTMLとCSSの経験がない人間でもなんとかなります。
・ハイブリッドアプリって重くない？
特に重さを感じたことはありません。体感としては想像より早いくらいです。
高度な3D処理でもしない限りまず問題ないです。
スタンドアローン型アプリなら全く問題ないでしょう。
・ハイブリッド型っていうけど本当にiOS/Android対応できる？
これは9割本当です。使用デバイスが違う開発者達でもほぼ問題なく開発できます。
残りの1割は正直デバイス間の埋めがたい溝です。
例えばAndroidの戻るボタン押下時の処理などはAndroid用の対応が必要です。
あとcssの指定でAndroidでは問題ないのにiPhoneだと表示が異なる、、なんてことも若干あります。
が、若干です。
・開発に詰まった時困らない？
Monaca公式サイト、個人ブログ、teratail、stack overflowなど、リファレンスやQA情報は豊富に存在します。
このブログもその一助となることを目指して更新していきます。
・作ってて面白い？
Yes!
唐突ですが僕はiPhoneユーザーです。
そして開発者他二人はAndroidユーザーです。
これだけでアプリを作るにあたり、結構困ったちゃんだったわけですが、民主主義宜しく数の暴力でAndroidに移行せずにAndroidユーザーと共存の道を歩むことができたのは偏にMonacaのおかげでした。
「長い間、くそお世話になりました」「このご恩は一生忘れません」ﾄﾞﾝｯ
オーナーMonaca
「カゼひくなよ」
ということでこれからもYourshelfを継続して開発していきます。
Yourshelfは現在Android版しかリリースしていませんが、近いうちにiPhone版も公開予定ですので、何卒宜しくお願い致します。
javascriptの配列回して気づけばオーバーフロー？そんな時はsliceメソッドで配列をコピー！
初めまして。
BLUECODEのひーくんです。
最近暑いですね。早くもクーラーつけまくりで若干体調悪めです。
話は変わりますが、当ブログでは我々が開発している上で出てきたプチ技術TIPSみたいなものを書いていきたいと思ってます。
とは言っても我々も若輩者なのでプッチプチなものになるかとは思いますが、
我々と同じような「アプリでも作ってみるかほげ〜っ（※ただし技術力はない」みたいな初心者の方に何か少しでもプラスになる知識を共有して共に成長できたらなといった内容です。
もとい熟練プログラマーの先輩方のご意見やご指導ご鞭撻の程をいただけたらこれ程幸せなことはないので、ぜひよろしくお願い致します。
では早速ですが今回は「javascriptの配列回して気づけばオーバーフロー？そんな時はsliceメソッドで配列をコピー！」を紹介します。
まぁオカモがやらかしたソースなんですけどね（笑）
Yourshelfの開発で、「Listが二つあって、hogeListにないものだけfugaListから抽出してhogeListに追加したい」といった場面があったんですけど。っていうかまぁよくある話だと思うんですけど。
こんな感じのソースが書かれてたんですよ。
fugaListを回しているのにその中でfugaListに何か追加している…だと…こいつファンキーだぜ…（ゴクリッ
デバックしたらなんかよくわからないですけどfugaListが1周するごとに倍になって最終的に800万個くらい中身できて落ちてワロタ。
しょーがない直してやるかーで「1回fugaListをtempListに入れてtempListで回してfugaListに追加するけ〜」とひーくん起動したんですね。
まぁこんな感じで。
さて直した直した。デバッグしよ。
「fugaList中身800万個。オーバーフロー」
ファッ!?
javascriptではオブジェクトと配列は参照渡しなのですね(⊃д⊂)
ってか普段仕事でjavaやってるんですけどjavaでもそうですよね。僕大丈夫ですかね。
最終的にはjavascriptのslice()というメソッドを使う事でfugaListをtmpListにコピーする事で解決しました。
slice()は配列を引数で指定した開始位置から終了位置で新しい配列として生成してくれるメソッドなんですね。世の中便利ですね。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
こいつを引数なしで使う事でただfugaListをtmpListにコピーしちゃいました。
ただこの方法もあんまりスマートではなさそうですね。
もっと簡単にこうしたらいいよって方法があったら教えてください。
まぁこういった当たり前やん…みたいな事でも我々のような若輩者は知らなかったりするのでどこかで一人くらい見て役立ててくれるかもしれない同じ様な境遇の方に向けて書いてみました。
ちょっとずつ成長してみなさんにもっと有益な情報を届けられたらと思いますが、我々を育てるつもりで長い目でご閲覧ください。
以上、ひーくんの初投稿でした。
Monacaアプリの暗号化プラグイン(Cordova crypt file plugin)について【開発Tips】
こんばんわ。BLUECODEのオカモです。
今回の記事は開発の際にぶち当たった、「Monacaアプリのソース暗号化問題」について書いていきます。
アプリをGoogle Play Storeなどの不特定多数のユーザーに公開される場所にリリースする場合、開発者として気になる(というか絶対に気になる)懸念事項として、ソースコードの隠蔽があげられます。
Monacaで開発したアプリについても何の暗号化処理もしていない場合、中身が丸見えの状態になっています。(apkファイルの拡張子をzipに変えるとアプリの中身を確認することができます。)
nifty backend(http://mb.cloud.nifty.com/)などのスマホ向けバックエンドサービスを使用するアプリに関しては、ソースコード上に直接アプリケーションキーやクライアントキーを記述することもあり、特に暗号化の必要性は高まりますね。
※ソースに直接アプリケーションキー・クライアントキーを記述しています。このまま暗号化なしで公開することはさすがにためらわる(危険すぎる)。
アプリができた、ついに。。。。。やったー！！！！
→リリースする時に暗号化ってどうやるんだ？？？
→ソースコード上にアプリケーションキー書いてるしリリースできない↓↓↓
これではせっかく作ったアプリも台無しです。
でも大丈夫！！そんな暗号化について悩んでる開発者には強い味方が存在します。
世の中にはすごい人がいるんですね。コミュニティベースのMonacaアプリのソース暗号化プラグインがあります。その名も、
「Cordova crypt file plugin」
GitHub - tkyaji/cordova-plugin-crypt-file: This plugin to encrypt the source files.
このプラグインを使えば、ソースの暗号化がとても簡単に実現できます。
使い方は非常に簡単で、MonacaクラウドIDE上から上記プラグイン名のCordovaプラグインをインポートするだけで、ビルド時に勝手にソースを暗号化してくれます。
（注）Cordova crypt file pluginはカスタムプラグインであるため、使用するにはPro以上のプランに加入する必要があります。(ちなみにProプランは2160円/月。6月の料金改定ありがとうございます。)
Monacaアプリのソース暗号化で困っている方はぜひ試してみてください！
「Yourshelf ~棚でつながるSNS~」をリリースしました。
はじめまして。BLUECODEのオカモです。
BLUECODEとは下記メンバーによる開発チームです。
・いーちゃん(ベース担当)
・ひーくん(ギター担当)
・オカモ(キーボード担当)
基本的に土日(休日)に東京某所に結集し、スマホやVRなどのアプリ開発を行っています。
メンバー３人ともSIer(奴隷工場)で働く、社会人3年目・東京在住のエンジニアです。
ゆくゆくはチームBLUECODEを会社化し、VRアプリ開発を軸にワクワクするようなサ
ービスを展開していきたいと考えています。
そんな３人がこの度、「Yourshelf ~棚でつながるSNS~」をGoogle Play Storeにリリースしました。
アプリの説明は上記リンクに記載していますが、ここにも一応書いておきますね。
~~~~~~~~~~~~~~~~~~~~~~~~~~~アプリ説明~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Yourshelfは自分の棚(こだわり)を他者と共有するアプリです。
棚とはその人のアイデンティティが凝縮されたものです。
Yourshelfではその棚を公開することで自分と感覚が合う人を見つけたり、自分のこだわりを共有することができます。
また自分とは違う新しい価値観を発見することもできます。
・Cool機能
「この人クールッ！」と思ったらとにかくクールボタンを押しましょう。
クールボタンは24時間経てば同一ユーザーに対して再度行うことができます。
・写真管理機能
画像を15枚まで投稿することができます。
15枚の内からあなたがもっともクールッ！だと思う画像をホーム画像に設定しましょう。
・タグ情報
あなたのこだわりを5つまでキーワードとして登録することができます。
タグ情報は他のユーザーがあなたを見つけるための大切な情報となります。
・フォロー機能
クールッ！なユーザーを見つけたらとにかくフォローしましょう。しまくりましょう。
・コメント機能
各ユーザー毎の画面でコメントを投稿することができます。クールッ！なユーザーに対してあなたの思いを伝えましょう。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開発にはMonacaというハイブリットアプリ作成のための環境を使用しました。
Monaca - HTML5ハイブリッドアプリ開発プラットフォーム
アプリ開発が初めてだったこともあり開発期間は約３ヶ月ほどかかりましたが、ネイティブアプリをAndroidStudioなどを使用し開発するのに比べ、難易度は低く、開発経験の浅い人にとってはとても良い開発環境だと感じました。
〜アシアルの皆様ありがとうございました！！そして、これからもよろしくお願いします！〜
難易度が低いと言っても、開発の中で当然詰まった箇所(ググってもなかなか出てこない)がいくつかあり、別の記事でtipsとして共有していきたいと思います。
Monacaの他にもUnityなどについての技術tipsも記事にしていくので、よろしくお願いします。
