冬眠期間

クマの冬眠期間中にみんなでワイワイする(したい)ブログ

【Tech】はじめてのアンドロイドアプリ(androidStudio)作成日記~第一回(チュートリアル)

初めてと言いながら、前職のとある事情でandroidStudioは触ったことのあるけど、開発自体は全くやったことのない元IT土方の筆者が、とあるクソニッチな理由でメモ帳的なアプリが欲しかったので、ちょうどいいところに10インチサイズのタブレットもあるし、探すのもめんどくさいから作っちゃおう + ついでにいい機会なのでGoogle PlayStoreにアップするまでの一連の流れを勉強。という趣味と実益(笑)を兼ねつつも、自信の備忘のために記事をまとめる。っていう記事です。

androidStudioのインストール

これがないと始まらないですね。

ですが特に説明しません。(というか説明することがないです。インストーラ落として、ポチポチボタン押してくだけなので)

Googleの公式サイトがすごく丁寧に教えてくれますので。

developer.android.com

 

実際にアプリを作成してみる

基本的には上記リンクの下の方にある「はじめてのアプリを作成する」で勉強していくので、個人的にわかりにくかった点を補足する形で進めます。

Androidプロジェクトの作成

チュートリアルで使用するプロジェクト

初っ端からつまづきました。

1.[Welcome to Android Studio] ウィンドウで [Start a new Android Studio project] をクリックします。

2.[New Project] 画面で次の値を入力します。

なんですが、手順1をやると、下記ウィンドウが出てきます。

f:id:beowolf5963:20190515152119p:plain

せんたくしてくださいあなたのぷろじぇくと。

なんのこっちゃ?詳しいことは後でググるとして、とりあえず、デフォルトで選択されていた、「Empty Activity」をちょいす→Next

プロジェクトの構成

前項から、ちょいす→Nextで再びつまずき。

手順2の、

[New Project] 画面で次の値を入力します。

  • Application Name:「My First App」
  • Company Domain:「example.com

プロジェクトの場所を変更できますが、他のオプションはそのままにします。

とありますが、実際出てきたのは下記画面

f:id:beowolf5963:20190515153009p:plain

こんふぃぎゅあーあなたのぷろじぇくと

まぁプロジェクトの構成ですね笑。ほんと英語きらい。。

指示のあったApplication Name = キャプチャのName欄が紐づくのはなんとなく分かるよ?でもCompany Domainってなに?パッケージ名で良いんかな?実は罠だったので、次項を参考にしてください。

とりあえずパッケージ名にしちゃいますが。

Save locationはデフォルトだとCドライブだったんですが、なんとなくヤダ(SSDのアクセス回数限界説を信仰してる)ので、Fドライブ(HDD)の任意の場所に変えちゃいました。あとのオプションは触るんじゃねぇ!とおっしゃってましたので、これにてFinish。Javaは分かるけど、Kotlin知らんのよなぁ・・・

とここで、手順見てて気づいたんですが、手順4・5・6の内容が手順2の画面に集約されたんですね。よく見たら、手順のandroidStudioはバージョン3.3.2だけど、落としたのは最新で3.4になってますしね。

チュートリアルアプリのパッケージ名

ちくしょう、してやられました。

研修とか教本とかで、Javaを勉強した人はご存知だと思いますが、例として、パッケージ名は会社名のドメインを逆から使うみたいな命名規則ありますよね。

手順2で設定しろと指示のあった、

Company Domain:「example.com

これ。ここまで言えばなんとなく分かるかもしれないですが、前バージョンまではCompany Domainを入力して、IDE側で逆転させてパッケージ生成(たぶん)だったのが、3.4からPackageNameは自力で入れなさいよに変わったんですね。

なので、チュートリアルと同じじゃなきゃヤダ!って方は、PackageName欄は「com.example」にしたほうが良いです。筆者はめんどいのでこのまま突き進みます。たかがサンプルですし、個人用だし。

 

アプリを実行する

特に迷走しませんでした。実機繋ぐのめんどくさかったので、エミュレータで実行。

ビルドスクリプトがgradleでよかった。antとかmavenだったらゲロ吐いてた。

そんなこんなでビルドも終わって実行されました。

f:id:beowolf5963:20190515162140p:plain

おー・・・。文字がちっさい!!小声のHello World!

原因は仮想デバイスを10インチのタブレットにした私ですけど笑

 

簡単なユーザーインターフェースの作成

LayoutEditorを開く

チュートリアル中にも記載がありますが、「LayoutEditorを開く」の章はandroidStudio3.0(古い!)時点での説明のようです。

androidStudio3.4だと、

  • 手順3:デフォルトで[Design]タブがアクティブになっている
  • 手順4:ツールバー[Select Design Surface]が見当たらず、手順4にあるマーク(青い四角)が2つ重なってるようなアイコンから設定できます。筆者はなんとなく見やすそうなので、「Design + BLuePrint」を選択しましたが。
  • 手順5:ツールバーに[Show]が見当たらず、おめめのマークから、[Show All Constraints]にチェックを入れました。→部品から画面外に向かってギザギザ線が表示される
  • 手順7:ツールバーに[Default Margins]が(ry。お目々のマークの2つ左にあります。
  • 手順8:(ry。お目々マークの並びにある、スマホマークのやつです。

 

テキストボックスを追加する

とくに詰まること無く、チュートリアルどおり。

 

ボタンを追加する

手順3の[EditBaseline]はビューのすぐ下ってありますが、部品で右クリック(チュートリアルだとボタン)→[Show BaseLine]で、ベースラインアンカーが表示されます。

なんか部品に横長の楕円が表示されて、ボタンの楕円をテキストボックスの楕円に引っ張る感じ。

 

UI文字列を変更する

strings.xmlを修正してから、ビューに文字列を設定するのにも若干違いがありました。

手順3:下記キャプチャ参照

f:id:beowolf5963:20190515172304p:plain

キャプチャの赤枠のところをクリックしたら、

f:id:beowolf5963:20190515172445p:plain

こんなウィンドウが開くので、チュートリアルのように、赤枠の項目をダブクリすると、チュートリアルと同様の設定になります。

 

テキストボックスのサイズを柔軟にする

チュートリアルの「最終的なレイアウトのXMLを見る」をクリックすると、xmlが表示されますが、これもバージョンの違いかわかりませんが、細かい設定方法が異なります。

が、特に問題ないのでするー。

 

アプリを実行する

f:id:beowolf5963:20190515173109p:plain

おー。かっこいい!ちゃんとレイアウトが変わってますね!

テキストボックスにごちゃごちゃ入力されてますが、筆者のいたずら心なので許してください。

今回もエミュレータ実行です。テキストボックスに日本語が入力できないのは、エミュレータのlocationがUSだからなのかな?日本語キーボードとか突っ込めないのかな?

実際にアプリ作ってテスト実行する時は実機でやったほうが楽かもしれないですね。

ちなみにボタンのイベント?はまだ実装されていないので、押しても何も起きません。次のチュートリアルでやるっぽいです。

 

別のActivityを開始する

送信ボタンに応答する

いきなりつまずき。一番最初のチュートリアルは言語をkotlinにしてたのに、このページのチュートリアルJavaで書かれてます笑

というわけでいきなりお勉強タイム。勉強させる狙いもあるのか!?

わかったこと

  • オブジェクト指向プログラミング言語である
  • Javaとは記法違うけどJVM上で動作する(なんで!?)
  • クラスを作らなくてもいきなりメソッド(関数)を定義できる
  • アクセス修飾子参照範囲が違う
  • アクセス修飾子を省略した場合はpublicと同等になる
  • 戻り値がないメソッド(関数)はvoidじゃなくてUnit(省略可能)

へー。まぁ記法さえ覚えればオブジェクト指向なんでそんなに難しくないですね。

そんなわけでkotlinの記法に合わせて修正。

※実装内容は、このあと実装する項があるので、そこでまるっと書きます。

 

Intentを作成する

ここでまたお勉強タイム

Intentとはなんぞやってのはチュートリアルに書いてあるので、この記事では触れません

わかったこと

  • 変数(定数)定義の概念が違う
  • 明示的にキャストする必要はない(しなきゃいけないシーンもある)
  • キャストする時はasを使う
  • androidStudioはJavaソースコピペすると、kotlin記法に変換してくれる(微妙に手修正発生しますが)

今回は記法の違いですね。まぁ適当にサンプルコード作ればそのうち覚えるでしょう。

Eclipseはkotlinのプラグインあるかしら?そもそもIntelliJ使えよって話ですが、IDE変えるとショートカットキーを覚えるのがめんどいんですよねぇ。言語もそうですが、操作性も一律同じにしてくれたら良いのに。。

あと汚い言葉ですが、なんかチュートリアル丸コピして、さも自分で作りましたみたいなブログが合ってマジでぶん殴りたくなった。「割愛します」じゃなくて知らないだけだろうが。

話が逸れました。

この項もJavaで記載されてるので、kotlin記法にします。

 

第2のactivityを作成する

チュートリアルを信じて突き進め(適当)

 

テキストビューを追加する

そのまま

 

メッセージを表示する

またつまずいたのでお勉強

わかったこと

細かいところで記法に違いが出るので、若干めんどうですね。

 

Upナビゲーションを追加する

ずっとMainActivityで作ったsendView関数で引数使ってないよ警告が出てて気になってたんですが、この項でページ間の親子関係設定したら消えました。これもちょっと調べんと消えた理由がわからんなぁ。

 

アプリを実行する

ようやくお勉強終わったので、早速実行

f:id:beowolf5963:20190515192935p:plain

fugafugaしてから、SENDボタン押下

f:id:beowolf5963:20190515192938p:plain

おー!ちゃんと入力値渡せてますね!相変わらず小声ですけど笑

 

これにて、チュートリアルは終わりです。ブログ執筆と同時並行でやってたので、気づいたら6時間以上経ってました笑

集中できるものがあると怖いですね。

google本家のチュートリアルを補足する形 + 自分のお勉強兼ねましたがいかがでしょう。あまりチュートリアルはメンテされてないっぽいので、迷ったらこの記事参考にしてみてください。

 

最後になりますが、kotlin記法にしたコードをキャプチャで貼ります。最初だからコピペじゃなくて自分の手を動かして覚えましょう。っていう元社畜からのアドバイスです。

f:id:beowolf5963:20190515193632p:plain

f:id:beowolf5963:20190515193636p:plain

サンプルなので、コメントとかはガチってません。

あとandroid.Rの存在がよくわからないんですよね。これもちゃんと調べなければ。

 

今後の予定ですが、いよいよ自分の考案したアプリの、

  • 要件定義
  • 画面設計
  • 機能設計

的なことを我流でやっていこうと思いますが、割とビジネスになるんじゃね?って密かに期待しちゃってるところもあるので、アプリリリースしてみるまでは、上記3点は漏らさないようにして、行き詰まったところがあれば記事にしていく形にしたいと思います。

 

この記事がなにかの参考になれば幸いです。