仕事ついでにアプリの作り方教える

PC、ネット

2013/12/12

1： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:41:49.18 ID:26+RRMQy0: iPhoneアプリ作りたいやつは
macのApp StoreからXcodeをダウンロード
Androidアプリ作りたいやつは
http://developer.android.com/sdk/index.html
からEclipse+SDKをダウンロード
3： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:42:55.87 ID:2ugB5zVN0: Androidアプリってもう儲からないでそ
5： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:43:23.57 ID:FMyOKsZhP: でもAppleは実機導入してテストするの有料じゃん
7： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:44:53.01 ID:26+RRMQy0: >>3
どんなアプリでもやり方次第だろ
今はむしろiPhoneよりAndroidが狙い目だと思う

>>5
作るだけならエミュレーターでもいいけどな
公開したいんなら契約しといたほうがいいな
9： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:46:57.01 ID:FMyOKsZhP: >>7
公開どころか自分の手持ちの端末にすら入らないじゃないの
作ってもエミュ上でしか動かないとかゴミ過ぎる
11： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:48:03.73 ID:26+RRMQy0: >>9
いやなら契約しろよ
でも契約有効期間は１年間なんだから
作れるようになってから契約してもいいと思うけどな

10： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:47:17.72 ID:DN7THo0H0: 自作でホラーノベルアプリ作るのが夢です
13： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:50:48.41 ID:26+RRMQy0: >>10
ホラーノベルアプリか

実際の作り方は違うけど、ノベルっぽいアプリを作ってみようか
とりあえずiPhoneから
14： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:51:08.86 ID:FMyOKsZhP: AdobeのFlashBuilder落して作れば両方対応したのが簡単に作れる
16： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 11:55:45.02 ID:26+RRMQy0: >>14
有料だけどな
UnityやCocos2d-xでもいいぞ

なんかスクショ貼っていこうとおもったけどあぷろだにアップするのが面倒すぎるので
テキストで。
まずはXcodeを起動して、FileメニューからNew→Projectを作成。
プロジェクト名とかはなんでもいいけど、最初のテンプレートは
Single View Application を選んでみようか
18： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:00:32.70 ID:26+RRMQy0: Projectが作成されたら、Main.storyboardを開こう。
InterfaceBuilderという機能で、GUIを設計するぞ。

今は１個だけビュー（画面）がある状態なので、それを選択する。
まずは左のノードツリーからViewControllerを選んで、
Orientation を Landscapeにしよう。
縦画面でもいいんだけどね。
19： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:02:13.37 ID:lRznaZ4Oi: すでに意味が分からないので離脱します
さよなら
21： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:05:55.11 ID:26+RRMQy0: >>19
どの辺が意味がわからないんだ？
もっと全部説明していったほうがいいのか？
20： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:05:11.33 ID:26+RRMQy0: InterfaceBuilderで横画面表示にしただけでは、
実際のアプリは横画面にならないので、アプリ自体の設定をしておく必要がある。
プロジェクト名を選択し、GeneralタブからDeviceOrientationのPortraitをオフにしよう。
Portraitというのは通常縦画面、Upside Downというのはホームボタンが上にくるように逆持ちした場合。
Landscapeはそれぞれ横画面で右に傾けたか左に傾けたかということ。
23： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:12:25.51 ID:QvuW5srq0: Xcodeとかいうのだけ説明してるけど
Exlipse+SDKも同様の操作方法なの？
30： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:26:49.28 ID:26+RRMQy0: >>23
Eclipseでの操作方法や作り方は変わるので、それはまた別途説明する。
31： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:29:04.27 ID:QvuW5srq0: >>30
じゃあ別途説明待ってる
32： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:31:09.59 ID:26+RRMQy0: まずは画面の構成要素を設置していく。
配置の仕方は、先ほどのInterfaceBuilder(以降、IB）の画面に戻る。

現在は画面要素としてViewというものがひとつあるだけの状態になっている。
Viewというのはすべての画面構成要素の元になるもの。
ここに、アイテムを張り付けていくわけだ。
ひとまず、ノベルゲーなら背景画像がいりそうなので、画像を表示するための
UIImageViewを貼り付けたい。

こんな感じで右下のリストからImageViewを探して、マウスでドラッグ＆ドロップしてViewへ貼り付ける。
少しマウスを離すまで時間を置くと、自動的に画面サイズに合わせてくれる。
34： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:33:16.75 ID:5AOIjioc0: このスレで完結してアプリまで作ったら凄い
38： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:42:16.06 ID:26+RRMQy0: >>34
さすがにそこまで突っ込んでやると時間かかりすぎるな

後わかりにくいんだけど、ボタンを画面に配置する。
これも全画面にして、Titleを空にすれば透明ボタンになる。

古い開発環境のやつはButtonTypeをCustomにすれば、透明になる。
35： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:36:50.55 ID:04WJgYzB0: 今のところすげぇ簡単なように見えるな
36： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:37:07.62 ID:26+RRMQy0: 次に、テキストを表示したいので、UILabelを配置したい。
Labelも同じようにマウスで貼付け適当に位置調整しよう。
普段は１行分しか表示できないので、Linesを３にして、３行表示。
また、背景色をつけて、さらにAlphaを下げて、半透明にしよう。
本当は、UILabelをこんな使い方すると、文字まで半透明になるのでよくない。
できれば背景にもう一個UIImageViewを配置して、そちらを半透明にしてあげよう。
41： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:49:02.86 ID:26+RRMQy0: 次に、コードの方にうつろう。
IBは結局画面配置しかできないので、処理はコードで書いてやらないといけない。
とりあえずコードはこんな感じだ。

コピペできないように画像で貼り付けるあたり俺の優しさだと思ってください。

まず最初の@interfaceの行の後に {} で枠組みをしているが
これがこのクラスのプロパティだぞ、という意味をもっている。

IBで貼り付けた、UIImageViewとUILabelをコードから利用したいので、
プロパティとして宣言してあげる必要がある。
ようは画面で貼り付けたやつをコードで使うから名前をつけるね、ということだ。
IBでコードと関連付けるために、IBOutletと記述しておいてあげる必要がある。

つづく。
44： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 12:58:50.07 ID:26+RRMQy0: NSArrayというのは配列を管理するクラスになっている。
ここでは、テキストを文字送りしていくときの、元の原稿を格納するように使う。
配列という概念は既に知っているものとして進める。
現在配列がどこまで進んでるかを保持するために int tekisuto_idx を用意しておく。
intは符号あり整数を扱う変数だと知っているものとして進める。

そしてカッコの外側にメソッドを追記する。
ここでは、ボタンを押した時になんらかの処理を行いたいので、pushButtonというメソッドを宣言しておく。
これまたIBと接続するために、IBAction と記述しておく必要がある。
48： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 13:03:15.26 ID:qOrVCDXXi: ノベルゲーじゃなきゃ一日かけて初心者でもアプリ作れるまではいけそうだがね
50： 以下、名無しにかわりましてVIPがお送りします：2013/12/08(日) 13:07:41.06 ID:26+RRMQy0: >>48
最初はじゃんけんゲームにしたら完成まで行けそうだと思ったが
まあいいや

日曜日も仕事してるので仕事ついでにアプリの作り方教えてやる
http://hayabusa.2ch.net/test/read.cgi/news4vip/1386470509/l50

1： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 13:23:59.13 ID:c240ULaz0: 水曜日も仕事してるので仕事ついでにアプリの作り方教えます
6： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 13:31:26.52 ID:ccAuTIXJ0: アプリの作り方はいいからIT企業で働く事がどれだけ辛いことなのか教えろ

ちな文系知識無し
7： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 13:33:03.54 ID:c240ULaz0: >>6
どんな会社でも辛さは一緒じゃない？
個人的には、顧客との知識レベルの差が埋まらない事を辛く感じるので
なんだそんなことかと思えればやっていけそう

9： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 13:35:23.38 ID:chTsoVHY0: 大学でjava勉強した程度でも大丈夫かな？
オブジェクティブＣ使うことは知ってる
10： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 13:40:21.38 ID:c240ULaz0: >>9
基礎知識あったほうがわかりやすいと思う
というか基礎知識ある前提ですすめる。

前にノベルゲームっぽい動きをつくろうということで、途中まで進めていた
iPhone版の続きから行う
11： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 13:45:09.01 ID:c240ULaz0: 以前はUIを作成し、画面と接続するためのコードを書く所まで進んだ。
次は、コードで記載したIBOutletとIBActionをUIと接続する。
IBの画面へ移動し、ノードツリーより View Controller と書いてあるオブジェクトを右クリックする。
するとなんかリストがでてくる。
13： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 13:54:31.53 ID:c240ULaz0: このリストの中に、haikei_gazou とか tekisutoとか
以前のコードにIBOutletとして定義したものがでてきているのがわかると思う。
haikei_gazouはUIImageViewとつなげたいため、
横のちょぼをドラッグアンドドロップして、画面上のUIImageViewへもっていく。
15： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 13:58:29.67 ID:c240ULaz0: そうすると、haikei_gazouとUIImageViewが接続されたという表示がでてくると思う。
同じようにtekisutoはUILabelと接続しよう。
あと、下の方にReceived ActionsというカテゴリにpushButtonというのがある。
これはUIActionで定義したアクションになるのだが、これをボタンを押した時の処理としたい。
コレも同様にちょぼをドラッグアンドドロップで画面上に配置したUIButton（透明）と接続しよう。
接続する時に、アクションのタイミングを聞かれるので TouchUpInsideを選択しておく。
16： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:04:53.93 ID:c240ULaz0: TouchUpInsideというのは
タッチした指を上げる時　かつ　ボタン内に指があるとき
にアクションが発動する条件のこと。
Touch Downでやってみいいんだけど、実際さわってみると
Touch Upの方が動きが良いと思うので、そのへんは、適宜変更してやってみてほしい。
あとIBで作ったUIからコードを生成する機能もついてるんだけど、やっぱりコードは書いて覚えないといけないので、ということで、このような順番で進めています。
17： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:13:44.05 ID:c240ULaz0: 次に、実行コードの方にうつる。
ViewController.mを開き、コードを記述する。

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

テキスト原稿の原文を配列で設定する。 @;
最後にnil がいるんだったかどうだったかわすれたんでそのへんは後で確認する。
23： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:22:04.19 ID:c240ULaz0: 残りのコードを書いてしまおう。
IBで、UILabelにテスト文字列をいれていたんで、それを消す処理をviewDidLoadにいれておく。
; というのがそれ。
この記法がObjective-Cの特徴なものなんだけど、なれるしかない。
他の言語で書くと
$tekisuto->setText("");
みたいなことだ。
その他のコードは次で解説。
24： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:27:44.52 ID:c240ULaz0: まず、テキスト原稿を、画面上に表示する処理として、 setGenkoというメソッドを作っておく。
[tekisuto setText:[arrTekisuto objectAtIndex:tekisuto_idx]]; なんていう記述で意味不明に見えるかもしれないが、
解読すると大したことはない。
arrTekisuto配列からtekisuto_idx(最初は0)番目にある要素を取り出して、tekisuto(UILabel)にセットする。
ということ。
次にボタンが押された時の処理として -(IBAction)で定義していたメソッドを記述する。
これの処理内容は、tekisuto_idxの値を+1して、上のテキスト表示メソッドを呼ぶだけ。
これで、配列の値を１つずつ画面に表示していける。
最後に、viewDidAppearメソッドをつくり、ここでもテキスト表示メソッドを読んでおく。
viewDidLoadと似たようなもので、画面がディスプレイに表示された直後、に呼ばれるメソッドになっている。
25： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:30:27.97 ID:c240ULaz0: これで、プログラムを実行してみよう。
XCodeのツールバーにある再生ボタンのようなやつを押せば、デフォルト設定だと
エミュレーターが起動する。
3.5inchだと画面が見きれるので、4.0inchのエミュレーターで動かしてほしい。
画面が立ち上がり、画面内をクリックしていくと、文字が変わっていくのがわかる。
26： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:35:25.62 ID:c240ULaz0: 背景画像がないじゃねーかってことで、なにか画像を表示してみたいと思う。
画像をIBから設定すればいけるんだけど、せっかくなのでネット上で拾った羅生門の画像を表示してみる。

viewDidLoadへ追記する。
URLから画像をダウンロードして、背景へ設定する処理となっている。
27： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:36:59.27 ID:c240ULaz0: これで実行をしてみたのが、こちら

ざっくりすぎるけど、この要領でテキストを切り替えながら
画像も変更して行ったりすれば、読み物的なやつは作れないことはない。
29： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:40:22.78 ID:c240ULaz0: 同様の流れを今度はAndroidでやってみたいと思う。
Androidは解像度の問題などなど、あるので全く同じようにはならないので
ご了承願いたい。
30： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:45:02.30 ID:c240ULaz0: 事前にダウンロードしてきたADT Bundle SDKを立ち上げよう（中身はEclipse）
Windowsの人はJavaのパスなりなんなりの設定がいるのかもしれない。
もう忘れてしまった。
メニューより->[New]->[Android Application Project]と選ぼう
ひとり語り寂しい
31： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:47:34.46 ID:c240ULaz0: いや、その前に開発に必要なバージョンのSDKをダウンロードする必要があったかもしれない。
[Window]->[Android SDK Manager]を選んで、最新のAndroidOSのSDKがダウンロードできるので、やっておこう。
32： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 14:49:56.14 ID:EYQQBHVii: >>1の年齢は？
34： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:01:45.01 ID:c240ULaz0: プロジェクトはプロジェクト名を決めて、後はNextNextですすんでいけばおｋ
新規プロジェクトができたら、実行すると、エミュレーターしかない人はエミュレーターが
起動してうごくし、実機ある人はUSBでつないでると、実機に転送されてアプリが動く。
Nexus7で動かしてみた
36： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:07:09.18 ID:2HTfBTZ5P: 低スペでもできる？
38： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:15:23.80 ID:c240ULaz0: >>36
Eclipseは結構重たいからな－
多少メモリはあったほうがいいかも
37： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:12:44.67 ID:c240ULaz0: Androidも、まずは画面を作成するところから始めてみよう
projectツリーの中からresフォルダを開きlayoutフォルダを開く。
Androidはこのlayoutというもので画面構成を作成する。中身はXML。
activity_main.xmlを開こう。
XCodeのIBほど賢いエディタではないが、GUIエディタで一応変更が行える。
Orientationボタンで横画面モードにしておこう。
40： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:19:56.08 ID:c240ULaz0: layoutファイルの修正とか説明が難しいんだが、まずTextViewというHelloWorldとかいたものがあるので、これを選択して、削除しよう。
次に、RelaytiveLayoutというものが残っている、これのプロパティリストからPadding関連の項目の
設定を0dpに設定しておこう。
41： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:26:01.52 ID:c240ULaz0: 次に、Paletteの中からImageViewを探し、layout上へドラッグアンドドロップする。
その後、ImageViewのプロパティリストから、Layout->Widh, Heightの値を、match_parentとしてやる。
するとキャプチャ画像のように、画面全体に伸びたImageViewになる。
XCodeほど直感的ではないので注意されたい。
42： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:36:48.84 ID:c240ULaz0: 次にTextViewを配置する。
これもパレットから選んで、Layoutへいれる。その際に、画面下部との間に下向きの矢印が表示されるように
アイテムを追加する。
Widthをmatch_parentと設定し、heightは80dpとする。
便宜上このようにしているが、実際はたぶんこんなlayout作成方法じゃいけない。今回だけね。
44： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:46:25.42 ID:c240ULaz0: XMLで表示するとこんな感じ
45： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 15:52:01.84 ID:1sFTBXID0: 説明わかりやすくて助かる
46： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 16:00:04.70 ID:c240ULaz0: あとはコードの方にうつる。iPhoneと違い、Androidで透明ボタンを配置するのは
なかなかあれなので、違う方法で実現する。
とりあえずコード画面１

コードの説明は、ほぼiOS版と同様。
TextView など記述すると赤色でエラー的に表示されたりするが、
マウスを載せて、import なんたらとかいうのを都度やっていくと、解決する。
onTouchEventは画面をタッチした時のイベントが飛んでくるので、透明ボタンのかわりに
こちらを利用する。
47： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 16:02:06.74 ID:c240ULaz0: ちなみにコードはsrc->com.example.novel->MainActivity.javaに記述する。
コード２

onStartは、iOSでいうviewWillAppearと同様。
ここまでを記述して実行すると、それっぽい動きのアプリが出来上がる。
48： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 16:15:16.20 ID:c240ULaz0: Andoird.manifestファイルというのがあるのでそれをいじる。

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

mainのactivityの設定に、screenOrientationを追加して、landscapeを設定しておく。
これで横画面対応になる。
51： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 16:25:42.86 ID:c240ULaz0: manifestのpermissonが大文字になっていたが
正確には

だった。

画像をダウンロードして、背景にセットする処理を追加
どうしてもAsynkTaskを使わないとだめだったので、AsynkTaskをつかう
これは覚えるより慣れろ
52： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 16:28:20.85 ID:c240ULaz0: てわけでこれで実行してやる。
見にくいので、TextViewに背景色をいれるとこんなかんじ。
53： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 16:30:28.02 ID:c240ULaz0: 長々とやったけどこんな感じです。
ここがわかんねーとか、これなんでこうなるのとかあれば
質問にお応えします
55： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 17:13:26.91 ID:EYQQBHVii: テキストの背景透過はどうやってる？
56： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 17:25:17.90 ID:c240ULaz0: >>55
TextViewのlayoutで
android:background="77ffffff"

とかいれてやるといける
最初の２桁はアルファ値で後ろ６桁はカラーコード
57： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 17:34:18.92 ID:4c709mjD0: Androidアプリ勉強中だから為になる
ノベル作るときってこんなふうにダウンロードさせてやったほうがいいの？
アプリ内に全部ぶち込んだほうがいい？
58： 以下、名無しにかわりましてVIPがお送りします：2013/12/11(水) 17:43:04.27 ID:c240ULaz0: >>57
全部ぶちこんだほうがいいけど、
リソースファイルだけで何百MBとかなるのだったら
アプリのダウンロードの時間がかかってしまうので、
ゲーム初期時にDLさせるとか、したほうがいいかなぁ