他サイト更新RSSぴぽぺ速報最新記事

水曜日も仕事してるので仕事ついでにアプリの作り方教える(続編)

このエントリーをはてなブックマークに追加 LINEで送る

1: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:23:59 ID:c240ULaz0

水曜日も仕事してるので仕事ついでにアプリの作り方教えます

3: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:27:38 ID:fcJa4FkE0

仕事の方が気になる


4: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:30:07 ID:c240ULaz0

これの続きです

日曜日も仕事してるので仕事ついでにiPhoneアプリの作り方教えてやる


6: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:31:26 ID:ccAuTIXJ0

アプリの作り方はいいからIT企業で働く事がどれだけ辛いことなのか教えろ

ちな文系知識無し


7: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:33:03 ID:c240ULaz0

>>6
どんな会社でも辛さは一緒じゃない?
個人的には、顧客との知識レベルの差が埋まらない事を辛く感じるので
なんだそんなことかと思えればやっていけそう


8: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:34:06 ID:hKWv2qmbi

アプリの作り方おなしゃす


9: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:35:23 ID:chTsoVHY0

大学でjava勉強した程度でも大丈夫かな?
オブジェクティブC使うことは知ってる


10: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:40:21 ID:c240ULaz0

>>9
基礎知識あったほうがわかりやすいと思う
というか基礎知識ある前提ですすめる。

前にノベルゲームっぽい動きをつくろうということで、途中まで進めていた
iPhone版の続きから行う


11: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:45:09 ID:c240ULaz0

以前はUIを作成し、画面と接続するためのコードを書く所まで進んだ。
次は、コードで記載したIBOutletとIBActionをUIと接続する。
IBの画面へ移動し、ノードツリーより View Controller と書いてあるオブジェクトを右クリックする。
するとなんかリストがでてくる。



12: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:50:30 ID:chTsoVHY0

はい


13: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:54:31 ID:c240ULaz0

このリストの中に、haikei_gazou とか tekisutoとか
以前のコードにIBOutletとして定義したものがでてきているのがわかると思う。
haikei_gazouはUIImageViewとつなげたいため、
横のちょぼをドラッグアンドドロップして、画面上のUIImageViewへもっていく。



15: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 13:58:29 ID:c240ULaz0

そうすると、haikei_gazouとUIImageViewが接続されたという表示がでてくると思う。
同じようにtekisutoはUILabelと接続しよう。
あと、下の方にReceived ActionsというカテゴリにpushButtonというのがある。
これはUIActionで定義したアクションになるのだが、これをボタンを押した時の処理としたい。
コレも同様にちょぼをドラッグアンドドロップで画面上に配置したUIButton(透明)と接続しよう。
接続する時に、アクションのタイミングを聞かれるので TouchUpInsideを選択しておく。



16: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:04:53 ID:c240ULaz0

TouchUpInsideというのは
タッチした指を上げる時 かつ ボタン内に指があるとき
にアクションが発動する条件のこと。
Touch Downでやってみいいんだけど、実際さわってみると
Touch Upの方が動きが良いと思うので、そのへんは、適宜変更してやってみてほしい。
あとIBで作ったUIからコードを生成する機能もついてるんだけど、やっぱりコードは書いて覚えないといけないので、ということで、このような順番で進めています。


17: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:13:44 ID:c240ULaz0

次に、実行コードの方にうつる。
ViewController.mを開き、コードを記述する。

まずは初期化の処理を書きたいので、 viewDidLoadに記述することにする。
viewDidLoadは一番最初に画面を表示する前に、画面を生成する処理が1度だけ走るのだが、その直後に呼ばれるメソッドであるので、この辺がよく初期化につかわれる。

テキスト原稿の原文を配列で設定する。 @[ @"", @"", @"" ];
最後にnil がいるんだったかどうだったかわすれたんでそのへんは後で確認する。



23: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:22:04 ID:c240ULaz0

残りのコードを書いてしまおう。
IBで、UILabelにテスト文字列をいれていたんで、それを消す処理をviewDidLoadにいれておく。
[tekisuto setText:@""]; というのがそれ。
この記法がObjective-Cの特徴なものなんだけど、なれるしかない。
他の言語で書くと
$tekisuto->setText("");
みたいなことだ。
その他のコードは次で解説。



24: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:27:44 ID:c240ULaz0

まず、テキスト原稿を、画面上に表示する処理として、 setGenkoというメソッドを作っておく。
[tekisuto setText:[arrTekisuto objectAtIndex:tekisuto_idx]]; なんていう記述で意味不明に見えるかもしれないが、
解読すると大したことはない。
arrTekisuto配列からtekisuto_idx(最初は0)番目にある要素を取り出して、tekisuto(UILabel)にセットする。
ということ。
次にボタンが押された時の処理として -(IBAction)で定義していたメソッドを記述する。
これの処理内容は、tekisuto_idxの値を+1して、上のテキスト表示メソッドを呼ぶだけ。
これで、配列の値を1つずつ画面に表示していける。
最後に、viewDidAppearメソッドをつくり、ここでもテキスト表示メソッドを読んでおく。
viewDidLoadと似たようなもので、画面がディスプレイに表示された直後、に呼ばれるメソッドになっている。


25: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:30:27 ID:c240ULaz0

これで、プログラムを実行してみよう。
XCodeのツールバーにある再生ボタンのようなやつを押せば、デフォルト設定だと
エミュレーターが起動する。
3.5inchだと画面が見きれるので、4.0inchのエミュレーターで動かしてほしい。
画面が立ち上がり、画面内をクリックしていくと、文字が変わっていくのがわかる。



26: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:35:25 ID:c240ULaz0

背景画像がないじゃねーかってことで、なにか画像を表示してみたいと思う。
画像をIBから設定すればいけるんだけど、せっかくなのでネット上で拾った羅生門の画像を表示してみる。




viewDidLoadへ追記する。
URLから画像をダウンロードして、背景へ設定する処理となっている。


27: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:36:59 ID:c240ULaz0

これで実行をしてみたのが、こちら



ざっくりすぎるけど、この要領でテキストを切り替えながら
画像も変更して行ったりすれば、読み物的なやつは作れないことはない。


28: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:37:09 ID:1sFTBXID0

こういうの見るとmac買いたくなる


29: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:40:22 ID:c240ULaz0

同様の流れを今度はAndroidでやってみたいと思う。
Androidは解像度の問題などなど、あるので全く同じようにはならないので
ご了承願いたい。


30: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:45:02 ID:c240ULaz0

事前にダウンロードしてきたADT Bundle SDKを立ち上げよう(中身はEclipse)
Windowsの人はJavaのパスなりなんなりの設定がいるのかもしれない。
もう忘れてしまった。
メニューより[File]->[New]->[Android Application Project]と選ぼう
ひとり語り寂しい



日本語なら「Android アプリケーション・プロジェクト」
表示されていない場合はADTを用意。ヘルプから新規ソフトウェアのインストールでリポジトリ追加のロケーションにhttps://dl-ssl.google.com/android/eclipse/で


31: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:47:34 ID:c240ULaz0

いや、その前に開発に必要なバージョンのSDKをダウンロードする必要があったかもしれない。
[Window]->[Android SDK Manager]を選んで、最新のAndroidOSのSDKがダウンロードできるので、やっておこう。


32: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:49:56 ID:EYQQBHVii

>>1の年齢は?


33: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 14:57:33 ID:c240ULaz0

>>32
あらさー

Androidは事前準備がめんどくさいな。
実機を持ってない人もいるとおもうので、エミュレーターの設定もしておくといい。
[Window]->[Android Virtual Device Manager]から
エミュレーターを作成できる。
適当につくって、IntelCPUを選んでやれば、高速で動くはずなんだけど、なんか動かんかった。
OSが新しくなったからだろうか。


34: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:01:45 ID:c240ULaz0

プロジェクトはプロジェクト名を決めて、後はNextNextですすんでいけばおk
新規プロジェクトができたら、実行すると、エミュレーターしかない人はエミュレーターが
起動してうごくし、実機ある人はUSBでつないでると、実機に転送されてアプリが動く。
Nexus7で動かしてみた


36: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:07:09 ID:2HTfBTZ5P

低スペでもできる?


38: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:15:23 ID:c240ULaz0

>>36
Eclipseは結構重たいからな-
多少メモリはあったほうがいいかも


39: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:18:27 ID:fcJa4FkE0

やりたくてもすでに諦めムードだからなぁ


37: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:12:44 ID:c240ULaz0

Androidも、まずは画面を作成するところから始めてみよう
projectツリーの中からresフォルダを開きlayoutフォルダを開く。
Androidはこのlayoutというもので画面構成を作成する。中身はXML。
activity_main.xmlを開こう。
XCodeのIBほど賢いエディタではないが、GUIエディタで一応変更が行える。
Orientationボタンで横画面モードにしておこう。


40: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:19:56 ID:c240ULaz0

layoutファイルの修正とか説明が難しいんだが、まずTextViewというHelloWorldとかいたものがあるので、これを選択して、削除しよう。
次に、RelaytiveLayoutというものが残っている、これのプロパティリストからPadding関連の項目の
設定を0dpに設定しておこう。


41: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:26:01 ID:c240ULaz0

次に、Paletteの中からImageViewを探し、layout上へドラッグアンドドロップする。
その後、ImageViewのプロパティリストから、Layout->Widh, Heightの値を、match_parentとしてやる。
するとキャプチャ画像のように、画面全体に伸びたImageViewになる。
XCodeほど直感的ではないので注意されたい。



42: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:36:48 ID:c240ULaz0

次にTextViewを配置する。
これもパレットから選んで、Layoutへいれる。その際に、画面下部との間に下向きの矢印が表示されるように
アイテムを追加する。
Widthをmatch_parentと設定し、heightは80dpとする。
便宜上このようにしているが、実際はたぶんこんなlayout作成方法じゃいけない。今回だけね。


44: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:46:25 ID:c240ULaz0

XMLで表示するとこんな感じ


45: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 15:52:01 ID:1sFTBXID0

説明わかりやすくて助かる


46: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:00:04 ID:c240ULaz0

あとはコードの方にうつる。iPhoneと違い、Androidで透明ボタンを配置するのは
なかなかあれなので、違う方法で実現する。
とりあえずコード画面1



コードの説明は、ほぼiOS版と同様。
TextView など記述すると赤色でエラー的に表示されたりするが、
マウスを載せて、import なんたらとかいうのを都度やっていくと、解決する。
onTouchEventは画面をタッチした時のイベントが飛んでくるので、透明ボタンのかわりに
こちらを利用する。


47: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:02:06 ID:c240ULaz0

ちなみにコードはsrc->com.example.novel->MainActivity.javaに記述する。
コード2



onStartは、iOSでいうviewWillAppearと同様。
ここまでを記述して実行すると、それっぽい動きのアプリが出来上がる。


48: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:15:16 ID:c240ULaz0

Andoird.manifestファイルというのがあるのでそれをいじる。



uses-permisson という記述でINTERNETを許可してあげる。
これで、外部サーバーから画像を取得できる。

mainのactivityの設定に、screenOrientationを追加して、landscapeを設定しておく。
これで横画面対応になる。


50: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:21:10 ID:chTsoVHY0

起きた


51: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:25:42 ID:c240ULaz0

manifestのpermissonが大文字になっていたが
正確には
<uses-permission android:name="android.permission.INTERNET" />
だった。



画像をダウンロードして、背景にセットする処理を追加
どうしてもAsynkTaskを使わないとだめだったので、AsynkTaskをつかう
これは覚えるより慣れろ


52: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:28:20 ID:c240ULaz0

てわけでこれで実行してやる。
見にくいので、TextViewに背景色をいれるとこんなかんじ。


53: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:30:28 ID:c240ULaz0

長々とやったけどこんな感じです。
ここがわかんねーとか、これなんでこうなるのとかあれば
質問にお応えします


54: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:53:20 ID:e7t9PW6v0

ほしゅ


55: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 17:13:26 ID:EYQQBHVii

テキストの背景透過はどうやってる?


56: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 17:25:17 ID:c240ULaz0

>>55
TextViewのlayoutで
android:background="77ffffff"

とかいれてやるといける
最初の2桁はアルファ値で後ろ6桁はカラーコード


57: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 17:34:18 ID:4c709mjD0

Androidアプリ勉強中だから為になる
ノベル作るときってこんなふうにダウンロードさせてやったほうがいいの?
アプリ内に全部ぶち込んだほうがいい?


58: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 17:43:04 ID:c240ULaz0

>>57
全部ぶちこんだほうがいいけど、
リソースファイルだけで何百MBとかなるのだったら
アプリのダウンロードの時間がかかってしまうので、
ゲーム初期時にDLさせるとか、したほうがいいかなぁ


49: 以下、名無しにかわりましてVIPがお送りします 2013/12/11 16:18:14 ID:sRhnC7QXi

時間帯が悪い


元スレ:http://hayabusa.2ch.net/test/read.cgi/news4vip/1386735839/
sosu



このエントリーをはてなブックマークに追加 LINEで送る
↑この記事をみんなに広めよう↑

↓ランキングクリックよろしくお願いします↓
 にほんブログ村 2ちゃんねるブログ 2ちゃんねる(ニュース)へ にほんブログ村 2ちゃんねるブログ 2ちゃんねる(ゲーム)へ

コメントをどうぞ

メールアドレス
コメント本文

  • あなたのコメントが、更にこの記事をおもしろくします。

プロフィール

PipopeFavicon

ぴぽぺ速報です。

下らないニュース、
おもしろい事件、
ゲームなど色々扱っております。
1日約70記事です。

Twitter
RSS

↓ランキングクリックよろしくお願いします↓
 にほんブログ村 2ちゃんねるブログ 2ちゃんねる(ニュース)へ にほんブログ村 2ちゃんねるブログ 2ちゃんねる(ゲーム)へ

新着情報

逆アクセスランキング

アクセスカウンター

  • 59現在の記事:
  • 1489740総閲覧数:
  • 187今日の閲覧数:
  • 167昨日の閲覧数:
  • 536811総訪問者数:
  • 121今日の訪問者数:
  • 122昨日の訪問者数:
  • 128一日あたりの訪問者数:
  • 0現在オンライン中の人数:

genzou1919 world