開発することが多いです思えば自分が触ったことが無いフレームワークはたくさんありますが、自分が開発したいもの合わせて、よりベストな環境を選んでおきたい身としてはいろんなフレームワーク、言語を知って触っておくに越したことは無いのはエンジニアとしては当然だと思ってます。Worldと表示しても面白くないので、ボタンを押すと背景の色が変わるアプリを作ります。projectを選びます。Activityを選択します必要な情報を入力します。プロジェクトを設置するディレクトリパスです。settings.gradle4.プロジェクトが生成されたらボタン実装する前に兎にも角にも一旦起動します。その後、インストールするデバイスを選んでOKを押すと、ビルドされインストールされ起動します。開いて次の内容に変更します。設置したボタンはこのままではただのボタンなので、プログラムでボタンが押されたことを確認できるようにします。android:backgroundプロパティを追加して色を指定します。setBackgroundColorを使って色を変える部分を実装します。いう単位で、アプリのプロジェクトやライブラリなどのプロジェクトが存在します。Moduleを選択します必要な情報を入力します。Nameはモジュールの名前です。LanguageをKotlinにします。settings.gradleただ色が変わるだけのアプリでは、JavaとKotlinでの書き方がちょっと違うぐらいなので、別の方法で実装すすめていきますボタンを実装すべてMainActivity.ktで実装しますMainActivityにおけるルートViewはConstraintLayoutでその子にButtonがあり、センタリングは上下左右の制約で行います。}}これでボタンが中央に実装されました。まるごと実装することができるので、今回はNativeActivityを使って、目的のアプリをつくります。NDKを使える環境をインストールします。Managerを使って、NDK/CMakeをインストールします。NDKをインストールしたディレクトリパスが指定されていればOKです一からプロジェクトを作成すると大変なので、既にできているサンプルを改造します。Module...を開き、検索窓にNativeと打ち込みます。あるのでそれを選択します。押すとサンプルがGitHubからクローンされます。それが終わったら兎にも角にもビルドしてアプリをRUNしましょうボタンを実装これからボタンを実装していきます。C++だけで実装されたアプリのソースは、app/src/main/cpp/main.cppだけなので、ボタンも描画もここに実装していくしかなさそうです。TeapotのNDKサンプルでは、Java側でUIが書かれているので参考にしていきます。Java側のActivityを実装していきます。app/src/mainにjavaディレクトリを作成して、javaディレクトリにActivityを作成します。Activityを選択します。パッケージ名はここではjp.cha84rakanal.hellotogglecolor_studio_c_plusplusにします。MainActivity.javaとactivity_main.xmlが自動生成されて、ディレクトリの構造は以下のようになります。strings.xml自動生成されてMainActivity.javaはAppCompatActivityクラスを継承していますが、C++のActivityと共存させるためにNativeActivityクラスを継承します。onCreateと出るようにします。}}このままでは、MainActivity.javaが起動しないので、AndroidManifest.xmlを編集しておきます。application要素のandroid:hasCode="false"を消して、activity要素のandroid:nameを先程作成したActivityの名前にします。-->これでアプリをビルド/RUNするとC++で作成したmain.cppとJavaで作成したMainActivity.javaが起動していることを確認できると思います。次は、XMLで定義したViewを表示していけるようにします。サンプルをみると、onCreateではsetContentViewをしておらず、showUIというメソッドでUIを表示しているみたいです。MainActivityにshowUIメソッドを実装します。World!!と表示されるわけではありません。showUIメソッドがどこからも呼び出されていません。どこから呼び出すのかというとC++で実装しているNativeActivitymain.cppから呼び出します。main.cppに次の関数を加えます。実行中のVMにアタッチして、showUIをC++側から呼び出せるようにします。engine)を呼び出します。0;}これで、NativeActivityでの画面の初期化が終わったあとに、Java側でViewをオーバーレイして表示します。Worldと表示されました!ここまで来るとボタンの設置は簡単です。activity_main.xmlを次のように変更するだけでボタンを実装できます。/></RelativeLayout>ボタンがクリックしたことを検知Java側でボタンがクリックされたことを検知することは簡単ですね。ボタンにbuttonとIDをふっているので、setOnClickListenerメソッドを使っておしまいです。Called");});Java側では検知できましたが、C++側は何もわかりません。背景の描画を担当しているのは、C++側なので、JavaからC++の関数を叩いて上げる必要があります。main.cppにJavaから呼ばれる関数を作成します。引数や戻り値などついてもろもろありますがここでは説明ません。jniとかでググってください。次のような関数を追加します。native");}次に、MainActivityから呼び出せるようにします。System.loadLibraryメソッドの引数に、native-activityを指定して、Java側でC++の関数を使えるようにロードします。ようにJavaで定義します。することで、Javaメソッドのように普通にC++の関数を呼び出せます。これで、C++でもボタンがクリックされたことわかりました。engine)で行われています。実装をみると、EGL/OpenGLESを使って描画されているのがわかります。すると、単に背景を塗りつぶすだけならglClearColorで良さそうです。main.cppを次のように変更していきます。engine)が呼ばれないので注意とりあえずこれでC++??でも同じアプリができました!Nativeで動いてるとなんだかよくわからんけど速いって気持ちになっていいですね。NDKも色々できることがあるので今後まとめて行けたらと思います。Hubのインストール(説明は割愛します。Hubを開いて新規作成を押します。今回は3Dゲームとかを作るわけでは無いので、2Dを選択して、必要な情報を入力します。Editorの画面が表示されます。兎にも角にもこの状態でAndroid上で動かして、エラーとか起こらないことを確認しましょう。Runを押せるので押します。すると、Unity内部でビルドがはしってAPKが生成され自動でインストールされ実行されます。Unityのロゴが表示されて、何もない暗いブルーが表示されます。ボタンを実装それでは、ボタンを実装していきます。Unityではシーンにコンポーネントを設置して、ゲームやアプリを作っていきます。Buttonをクリックでボタンが設置されます。Runをするとなんとなく中央から左下に向かう途中あたりにボタンが来ます。位置を真ん中にして押しやすいようにもうちょっと大きくしようと思います。Hierarchyに表示されているCanvasをクリックすると右側のInspectorに、Canvasに設定されてるコンポーネントの情報が表示されます。(Script)という項目があるので、そこの設定を以下のようにしましょう。これで、横幅を基準に横1080x縦1920の領域として画面がレンダリングされます。EditorのGameウィンドウで確認すると、アスペクト比や位置を維持していますね。Buttonをクリックすると右側のInspectorに、Buttonに設定されてるコンポーネントの情報が表示されます。Transformという項目があるので、そこの設定を以下のようにしましょう。これでボタンが中心に位置して大きくなります。文字もよしなに大きくするとAndroid上でこんな感じになります。ボタンの実装はこれで良さそうです。次は、ボタンイベントを取得しましょう。ScriptでC#ファイルをUntiyプロジェクトに作成します。名前は今回はButtonClickとしました。メソッドはUnityのロジックから呼ばれるものでシーンの1番最初に呼ばれます。Update()メソッドもUnityのロジックから呼ばれるものでシーンの描画の際毎回呼ばれます。このクラスにボタンが押されたら呼ばれるメソッドを実装します。メソッド名は適当に、onClickにして、呼ばれたらログを出すようにしておきます。}}この作成したButtonClickクラスをインスタンス化できるように、GameObjectにアタッチしようと思います。EmptyをクリックでGameObjectが設置されます。この設置されたGameObjectをクリックすると、右側のInspectorにはTransformだけが表示されていると思います。GameObjectにButtonClickクラスをアタッチするのは簡単で、先ほど作成したC#ScriptをInspectorウィンドウにドラッグアンドドロップするだけです。Componentからもアタッチできます。GameObjectへのアタッチを終えたら、次はButtonからonClick()呼べるようにします。HierarchyウィンドウにあるButtonのInspectorを開きます。Emptyになってると思います。Click()についている+マークを押すと、このようにListに要素が追加されます。Functionとなっているところをクリックすると、リストがドロップダウンするので、先ほどGameObjectにアタッチしたクラスと、呼びたいメソッドを指定できます。Click表示されます。Editor上で確認するとこんな感じです。背景の色を変更あとは、背景を色で塗りつぶすだけです。Panelをクリックで、画面を覆う1枚のパネルが設置されます。UnityのHierarchyは上の方が奥側なので、PanelをButtonより上にします。(Script)にColorの項目があるので、これをいじるとパネルの色が変わります。このパネルの色をonClick()メソッド内で変えることができると良さそうですね。色を変えられるようにButtonClick.csを次のように変更します。このスクリプトのこの状態では、ImageクラスのimgがNullなような気がします。Editor上でImageクラスのimgにオブジェクトを代入?アタッチ?します。(Image)になっています。(Image)の右側のターゲットマークをクリックするとImageをアタッチしているGameObjectの一覧が表示されるので、Pnaelを選択します。するとimgにPanelにアタッチされたImageが代入?アタッチ?されます。言語はJavaで描画をうまくWrapしてくれている傾向を変えてアAndroidアプリ開発としてはマイナーなProcessingでアプリを作って行きます。Processingをインストールします。公式のダウンロードページからダウンロードしてZIPを解凍するだけです。Processingを起動すると、IDEが立ち上がってすぐにコーディングを開始できます。デフォルトではJavaモードなので、PC上でプログラムが動作します。▼とあるところをクリックするとモードの追加...とあるのでクリックします。Modeを選択してInstallを押します。インストールが完了するとstatusに緑のチェックマークがつくので、ライブラリマネージャーを閉じます。▼とあるところをクリックするとAndroidの項目が追加されているので、Androidを押すとAndroidモードになります。兎にも角にも実行してみます。>にPCに接続しているデバイスがあることを確認したら、IDE左上の▶マークを押します。すると、ビルドが走りインストールされアプリがRUNします。ボタンを実装Processingは描画が専門な感じなので、UIを作るとなるとライブラリが必要になります。いう、GUI作成するライブラリがあるので、これを使います。ライブラリマネージャーが開くので、ControlP5を検索し、インストールします。ボタンをただ置くだけならIDEに次のプログラムを書くだけです。{}めちゃくちゃ小さいですが、ボタンを置くことができました。ボタンがクリックしたことを検知クリックの検知は簡単で、addButton()の引数と同じ名前のメソッドを作成するだけで、ボタンイベントを拾うことができます。今回は"onClick"としているのでonClick()メソッドを実装します。printlnメソッドを使うとProcessingのIDEのコンソールに文字を表示させられます。count++;}クリックの検知もできたので、文字もボタンも小さいのを改善します。フォントの作成...を開いて、好きなフォントを選びます。今回はHelveticaを選びました。サイズを128ぐらいにして、OKを押すとフォントファイルが生成されます。フォントファイルはloadFontメソッドで読み込んで使います。setSize(int,int)を使うと改善できそうです。HelloToggleColor.pdeを次のように変更します。count++;}文字のサイズ、ボタンの位置、ボタンのサイズがちょうどよくなりました。背景の色を変更Processingで背景を特定の色で塗りつぶすのは簡単です。backgroundメソッドを使うだけなので、プログラムは次のようになります。}}これでProcessingでも完成しました。openFrameworksクリエイティブコーディングのためのツールエンジニアではない人でも簡単に扱えるアドオンが豊富で便利C++で書かれているため速度だせる(?)同じく、Androidアプリ開発としてはマイナーなopenFrameworksでアプリを作ります。openFrameworksをインストールします。これも、公式のダウンロードページからダウンロードしてZIPを解凍するだけです。今回は、mobileの行にあるAndroid版をダウンロードしてきます。ディレクトリにあるprojectGeneratorを開きます。開くとおそらくopenFrameworksのパスを求められるので先ほどダウンロードして展開したディレクトリを選択します。pathにプロジェクトの保存先を指定して、Generateを押すとopenFrameworksのプロジェクトが生成されます。Studioが開きます。クリックして、生成されたプロジェクトのディレクトリを選択します。Syncが走らない場合は、手動でSyncします。Syncに失敗した場合は、build.gradleとsettings.gradleを修正する必要があります。スクリプトファイルでは、openFrameworksのパスが../../../になっているので正しいパスに直します。自分の環境では/Users/cha84rakanal/Documents/of_v0.11.0_android_releaseディレクトリにopenFrameworksを配置しているので、そのパスに置き換えます。r15cのインストールされてるパスを指定します。Syncが通れば、まずは実行してみます灰色で背景が塗りつぶされていれば正しいです。ボタンを実装openFrameworksもProcessingと同様に、描画が専門な感じなので、UIを作るとなるとアドオンが必要になります。いう、GUI作成するアドオンがあるので、これを使います。NDKで使った方法でボタンを実装していきます。(この方法はずるいなぁと思いながら...AndroidManifest.xmlをみると、起動するActivityがcc.openframeworks.HelloColorToggle.OFActivityとなっているので、srcJava/OFActivity.javaを見てみます。</activity>OFActivity.javaにはこれといった実装はないのですが、cc.openframeworks.OFActivityクラスを継承しています。Declarationで定義に飛びます。すると、this.setContentView(view);で、R.layoutのXMLで定義されたViewを読み込んでいることを発見できました。}なので、ボタンを配置するだけなら、res/layout/main_layout.xmlで配置するだけでおしまいです。次は、ボタンがクリックしたことを検知します。親クラスでsetContentView()したViewに子クラスでもアクセスできるのでsrcJava/OFActivity.javaでボタンにOnClickListenerを実装します。(普通に親のabstructクラスに実装はするのはよくないし...サクッとfindViewById()メソッドをつかってsetOnClickListener()メソッドでOnClickListener当てます。これで、ボタンをクリックするとログにonClickと表示されます。}今回も描画自体は、C++側で実装されているので、JNIを使ってC++側にボタンがクリックされたことを伝えて行きます。C++側にJavaから呼び出せる関数を実装します。<jni.h>を加えます。public://----省略----//次に、実際に呼び出す関数をsrc/ofApp.cppに実装します。今回はclickというメソッド名で呼び出せるようにします。命名規則通りの関数名は次のようになります。{関数名}(引数...);とメソッド名だけ定義して適当なところで呼び出す形で実行します。アプリがUnsatisfiedLinkErrorをだして、本来呼べたはずの関数名をログに出力するので、それを使います。下の場合だとhoge()というメソッド名で関数を作成したい場合はJava_cc_openframeworks_HelloColorToggle_OFActivity_hogeという関数名でC++側で実装するべきたとわかります。com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)OFActivity.javaを次のように編集すると、ボタンをクリックすると背景が白く塗りつぶされるアプリが完成します。0-255);ですね。それを踏まえて、ofApp.cppを次のように編集します。ofBackground(0,0,255);}ボタンはmain_layout.xmlのボタン要素にandroid:layout_centerInParent="true"を加えるだけで真ん中にきます。Cordova簡単にクロスプラットフォームHTML/JS/CSSが分かれば、アプリを作れるWebの資産を使い回せる今度は、Nativeから離れて、WebViewを元に作られているCordovaというフレームワークを使ってアプリを作ります。1.Cordovaをインストールします。npmが入っていることが前提です。ターミナルに次のコマンドを打ち込むだけでインストールは終わりです。cordova2.アプリのプロジェクトを作成します。事前にアプリのプロジェクトを生成するディレクトリへ移動しておきます。見受けられるので、どうやらこれらを編集して開発をすすめていけば良さそうな気がします。index.js3.プロジェクトディレクトリに移動して、Platformを追加します。今回は、Androidアプリなのでandroidを追加します。android4.アプリを起動します。実機をつないでいれば自動でインストールされた立ち上がります。topを使うとViewの構成とかが見れます。構成されていることがわかります。android:id/statusBarBackground}ここからの気持ちはAndroidアプリ開発ではなくモバイルWeb開発なのか...と思いながら目的のアプリを作っていきます。src="js/index.js"></script></body>Androidなのに味気が無いので、マテリアルデザインっぽいボタンしていきます。Liteを導入します。プロジェクトのディレクトリに移動して次のコマンドを実行してローカルに落としてきます。./wwwへcssとjsファイルをコピーします。./www/js/あとは、ヘッダーに次のコードを追加して、HTMLでの読み込みは完了です。次のコードを追加して、index.htmlのButton要素を囲います。</button></div>NativeのUIとほとんど変わらないように見えますボタンがクリックしたことを検知これも楽ですね。ButtonタグにonClickプロパティをつけるか、JavascriptでaddEventListenerを使うかです。今回はJavascriptを書きます。js/index.jsを開いてコードをサクッと実装します。ChromeのInspectorにログを出力できます。GoogleChromeのアドレスバーにchrome://inspect/と入力してページを開き、端末のinspectを押すと、実行中の画面とともに、consoleが表示されます。},背景の色を変更あとは背景の色を変えるだけです。CSSのbackgtoundプロパティをいじっていきます。js/index.jsを開いてコードを加えます。},ボタンに設定されているアルファ値が低いので後ろの色が反映されてしまいましたがCordovaでも同じアプリができました。CLIを使うのとがある。試してみることにする。CLIをインストール。HelloToggleColorNode.jsのバージョンはサポートしているものに上げる必要がある。Release)3.どのテンプレートで作成するか聞かれるので、blankを選びます。4.プロジェクトが生成されたら、まずは端末で実行します。startすると、サーバーが立ち上がり、ブラウザに開発ツール、ターミナルにQRコードが表示されます。いうアプリをインストールしておきます。6.インストールされたExpoアプリでQRコードをScanすると、JavaScriptをバンドルして、アプリが表示されます。押すとターミナルからアプリを起動できます。in.ボタンを実装それでは、ボタンを実装していきます。App.jsなので、これを編集していきます。},});だめでした。わからないときは公式ドキュメントを見てみます。公式ドキュメントのボタンの項目のサンプルコードを参考に書き直します。},});なんとかボタンが表示されました。ボタンがクリックしたことを検知ボタンが押されたらonPressにセットしたメソッドが呼ばれるのでメソッドを実装します。},});ボタンを押したらダイアログが表示されるようにしました。画面いっぱいに構成されているViewコンポーネントのスタイルを変更するのが良さそうです。styleに背景が赤になるスタイルと青になるスタイルを加えます。},});ボタンが押されたら、setStateを呼び出して、Viewに割り当てるスタイルを変えます。classに変えておきます。Studioまずはインストールから初めていきます。Studioのページにいき、インストーラーをダウンロードします。Macをダウンロードしてきます2.ダウンロードしたdmgを開いてインストーラーを起動します。インストールするコンポーネントのAndroidにチェックがついていることを確認してインストールを押します。Studioで作成できるAndroidアプリはXamarin.FormsとXamarin.Androidがあるので、まずはXamarin.Formsでアプリを作っていきます。Xamarin.Forms1.マルチプラットフォームで、空白フォームのアプリを選択します。2.必要な情報を入力します。3.プロジェクトの保存先などを指定して作成します。これで、プロジェクトが作成されました。実機で実行してみます。この部分で実行するOSと端末を設定します。Xamarin.Forms!と画面中央に設置されます。ボタンを実装まずは、ボタンを設置していきます。最初の画面はMainPage.xmalで構成されているので、編集していきます。Studioで読み書きするactivity_main.xmlに似ていますね。要素だったところを要素に変えるだけです。IDEの右側にコンポーネントのリストがあるので実際ドラッグアンドドロップで要素を置けるの楽ですね。</StackLayout></ContentPage>マテリアルデザインなボタンが配置されました。次はボタンクリックの検知です。MainPage.xmalに対応して、MainPage.xmal.csがあるので、おそらくイベント処理的なものはここに書いて行けば良さそうです。ボタンをクリックしたら呼ばれる関数を実装します。C#でのログ出力はSystem.Console.WriteLineを使います。}}ボタンにはどの関数を呼び出せばいいかをClickedプロパティにセットしておきます。Clicked!とでるアプリができました。背景の色を変更MainPage.xmal.csでロジックを書いて、MainPage.xmalでViewを書くことがわかったのであとは簡単です。MainPage.xmal.csから参照できるように、MainPage.xmalの要素にNameプロパティを設定します。</StackLayout></ContentPage>Nameプロパティにセットした名前で直接アクセスできるので、BackgroundColorプロパティに色を代入するだけでおしまい。C#みたいな感じで開発しやすい。Xamarin.AndroidXamarin.Androidも試していきます。Studioを開いて、新規で空のネイティブアプリ(iOS、Android)を選択します。2.必要な情報を入力します。3.これでプロジェクトが完成しました。▶マークを押して実行します。ボタンは実装されますが、どこでボタンが実装されているのかは確認します。この画面のレイアウトはResources/layout/Main.axmlに定義されています。中ををみると、普通にAndroidのレイアウトファイルになっているいます。ボタンが中央にある感じに直しちゃいます。/></RelativeLayout>ボタンがクリックしたことを検知ボタンがクリックしたことを受け取るロジックは、MainActivity.csに書かれています。Javaのメソッド名のままC#に持ってきた感じがすごいします。interfaceの代わりにdelegateが使われてるのが特徴的です。}}背景の色を変更delegateのあたりをいじって従来のAndroid開発のノリでサクッと書きます。今回はボタンの親Viewが背景のRelativeLayoutだとわかっているので、親を取得してキャストして背景色を変えます。C#な感じで開発しやすかった。Studioでの開発がわかってると、色んなフレームワークをサクッと使っていける感じはありました。今回試したフレームワークでも、普段より楽な点や面倒な点もあるので、やっぱり作るものに応じてという感じがします。Worldアプリの実行まで10分もかからないものもあるので、Eclipseを使って開発していた頃とは違うし、めちゃくちゃ敷居は低くなったと思います。Androidアプリを作りたいなぁとか思ってる人は、どれかフレームワークでも選んでサクッと作り始めるのがいいです。フレームワークの利点・欠点の説明とか、フレームワークの仕組みとかにも触れて話していきたいので、随時更新していくのでよろしくお願いします。upLoginユーザーは見つかりませんでした。