Terry’s blog

VRに関しては情報集収を欠かさないしがない学生。最近ではUnityとRailsを中心にプログラミングの勉強に励んでいる

Cocoda!β版 0からデザインを学ぶ(2)

今回からトレースのコースをやっていこうと思います。感想の意見として

  • 全くデザインについて知らない初心者
  • 同系統の他サービスを利用(主にProgate)

といった視点で書いていこうと思います。

まずはbosyuのUIトレースのコースをやろうと思います。

トレースのコースではすぐにトレースを始めるのではなく、bosyuに関する説明、またデザインの前準備の説明があります。そして実際にサイトを触ってみてサイトの構造についてまとめ、気づいたことや感じたことを書くといったことをします。一度触ることで感覚的にデザインを知ることができるため、デザインを学ぶ上では大切だと思うのですが、最初に構造をまとめて、感想を書いてと言われても何も思い浮かばなかったです...。(というよりそもそも何を募集することがなかった...)

f:id:abyssTerry:20180624225910p:plain

なのではじめの方はさらっと読むだけにして、トレースに入ろうと思います。

このコースで最初にトレースする画像はこちら。

最初に見本画像をダウンロードできるのですが、この画像とは違っていました。動画の説明ではこちらの画像を使っていたので多分こっちであってるのでしょう

f:id:abyssTerry:20180624225530p:plain

コースの中では動画によるトレースのやり方の説明、アクションのポイントとして主な流れ、デザイナーさんからのワンポイントアドバイスなどが書いてあります。

動画では目標のものを作るまでの工程が見れるので分かりやすいのですが、文字や言葉の説明がないので、どのボタンを押したらいいかというのもなんとなくでしか分かりません。例えば、途中の工程で角の丸い四角を作るのですが、そのやり方などの説明はないので自力で調べて作りました。(radiusという項目を弄ると角を丸く出来るみたい)

f:id:abyssTerry:20180624225706p:plain

あと一つつまづいたのが、作った図形が背景の後ろに回りこむ問題。色々やってわかったのはこの左に並んでるのは図形の上下関係のこともいっているんですね。上にやりたいものは位置を上にずらすことで隠れなくなりました。

f:id:abyssTerry:20180624233347p:plain

図形の大まかなトレースをしたら次は文字のトレース。文字の書体や大きさ、行間などを考慮しながら同じものを作っていきます。ここでも動画で工程を詳しく説明しているのですが、自分の今のバージョンが違うせいか、画面構成が違い、同じようにできない。文字の厚さみたいなのどうやって設定するんですかね......。

f:id:abyssTerry:20180624235930p:plain

あと思ったのが前の工程を見るにはホームに戻ってまたコースを選ばないと見れないということ。どこかポチッと押してすぐ戻れたらいいなと思いました。

なんか文句ばっかりいっているような気がしますが、β版で色々意見を集めているということで思ったことをつらつらやりながら書いていきました。

まだまだ時間かかりそうなのでとりあえず今回はここまでにします。もっとさっさとトレースできるようになりたいです。では、また。

Cocoda!β版 0からデザインを学ぶ(1)

ついにCocoda!のβ版のテスト枠として利用できるようになったので、今後はこのサービスでの私の進捗となんとなくの私の感想を書いていこうと思います。

まずはこのCocoda!についての説明から。私はデザインについてはてんで知らないので間違っている部分があるかもしれないので、そこはこそっとコメントにて指摘をお願いします。

Cocoda!はゴールデンウィーク前に下記のサイトにて一般にお披露目されたデザインを学ぶサービスです。私が説明するといってもほとんど下記のサイトを読めば分かります。

note.mu

「デザイナーになりたい人に向けて、もっとデザイナーになる道がオープンになっていくようなサービス」

と書かれており、今後デザインを学ぶ人の足掛けとなるようなサービスを目指しているのだと思います。そもそも「デザインを学ぶ」というのはかなりざっくりしたものであり、今までこれといった方法がほとんどなかったようです。ちなみに私はこのサイトで初めて知りました。

現状の私の感想としては「Progateのデザイン版」という認識。Progateはプログラミング初学者に対してとても優しいサービスとなっており、プログラミングを学ぶ敷居をかなり下げたサービスです。Cocoda!も同じようにデザインを学ぶ敷居を格段に下げるサービスになるのではないかとデザインをこれから学ぶ身としては期待しています。(そもそもデザインを学ぶ敷居の高さが現状どれぐらい高いのか知らないけど...)

ざっとCocoda!について概要を紹介したところでサービスを始めてみます。まずはホームのページから。初期アイコンの猫が可愛いです。

f:id:abyssTerry:20180613003609p:plain

現在利用できるのは二つのトレースのコースと、いくつかのカイゼンコンペというものがあります。

f:id:abyssTerry:20180613013036p:plain

まずトレースの方ではUIコース、UXコース、デザイナー別コースと分かれており、β版ではUIコースのみ利用できます。

この三つがどういう区分で分けられているのかさっぱりだったので調べたところ、UIとはユーザーインターフェース(User Interface)、「ユーザーがPCとやりとりする際の入力や表示方法などの仕組み」を意味し、UXとはユーザーエクスペリエンス(User Experience)、「サービスなどによって得られるユーザー体験」を意味するそうです。分かるような分からんような説明ですが、とりあえずUIは見た目、UXは操作性、という簡単な括りで理解しておきます。

デザイナー別コースはよく分からないけれど、おそらくデザインといっても様々な種類があり、プログラミングでいうwebアプリケーションかiPhoneアプリケーションかというような枠組みがあるのではないかと思います(要調べ)。これに関しては利用できるようになってからのお楽しみ。

f:id:abyssTerry:20180613005844p:plain

f:id:abyssTerry:20180613005851p:plain

もう一つ利用できるカイゼンコンペとは、説明を見るにある程度デザインを学んだのち、既存のデザインについて自分だったらどういうデザインにするかを提案(制作)してみたり、他の人のデザイン案を見れたりするというものらしいです。おそらく今後は自分のデザイン案について他の人からコメントをもらったり、制作したものの中でよりよかったものは実際にデザインとして採用されるたりということを想定しているのだと思います。(現に「良いデザインがあった場合、実際の画面に反映されることがあります。」と記述あり)

ある企業が「こういうデザインにしたい!」とコンベをだし、Cocoda!利用者がそれをこなすことで報酬を貰えるといったことまでできるようになったら凄いなと勝手に想像しています。

 

現状利用できるところの説明はこんなところです。もし興味が湧いたら、現在下記のサイトより利用申し込みができるのでよかったら申し込んでみてください。(手作業で申請をさばいているようなので、利用できるようになるにはしばらく時間がかかりそうですが)

www.cocoda-design.com

次からは実際にトレースのコースをやっていこうと思います。

では、また。

TechAcademy iPhoneアプリコース 雑記(3)

今回はlesson6に関しての振り返り。

このレッスンではタスク管理アプリを通してデータベースの扱いについて学ぶ。このlessonを通してやることで利用者が記入したものを保存し、その記入したものを表示する、というToDoアプリでは当たり前の挙動をさせられるようになる。

f:id:abyssTerry:20180608142805p:plain

今回から本格的に自身でクラスを作ってそのクラスを利用するということをやるのでクラスに関して曖昧な人は高確率でつまるだろうと思われる。私もまだ理解したとは言えないほどなのでかなり理解に苦しむ部分があった。しかし、このlessonを通してやることによってswiftでのコードの書き方が前より分かった気がするので進歩したと言えると思う。

最後の課題ではこのlessonで制作したタスク管理アプリに追加でカテゴリーでタスクを絞り込み表示させるというもの。 

今回の知識はオリジナルアプリを作る際にも要になると思うので、また改めて振り返りたい。では、また次のlessonで。

TechAcademy iPhoneアプリコース 雑記(2)

次はlesson6の内容に入る。

ここでは主にアプリ作りにおいて必要なドキュメントの見方やMVC()Model-View-Controller)の考え方、Appleの推奨する設計の原則の説明がなされている。またエラーが出たときの対処の方法も説明されている。基本的にアプリ作りはエラーとの戦いになるので、この話は大事。

またアプリ作りの実践としてカウントアップタイマーを作ります。これを作ることによって時間を進める、止める、リセットの方法がわかります。

今回の課題はスライドショーアプリというもので下の動画のようなアプリを作る。

 

写真の入れ方を多少調べ、今回のlessonは終了。特に難しいところはなかったのでさっさと次のlessonにいきます。では、また。

TechAcademy iPhoneアプリコース 雑記(1)

現在、私はTechAcademyのUnityコースとiPhoneアプリコースの二つを受けており、ちょうどUnityコースが終わってiPhoneコースを始めたところです。ということでこれからiPhoneアプリコースを受けようかなと思っている人の参考なればと思い、やっていることを雑記で書いていこうかなと思います。ちなみに8週間ずつ、合わせて16週コースを受けています。

1 TeachAcademyの基本的な進め方

基本的にTechAcademyが与える教材に沿って勉強していき、その中で分からないことや疑問に思ったことをチャットで質問し、週に2回あるメンタリングで進捗や直接聞きたいことをメンターに聞き、課題をクリアしていく、という流れです。

2 今のところの感想

現在lesson0~9ある中のlessson4を終えたところですが、Unityコースから通して思うに、これらを全くの初心者から受けるのはかなりハードなんじゃないか、ということです。私はUnity,Swift共に12月ぐらいから独学で勉強してから受けたのである程度内容がすんなり入ってきますが、「初見では無理ゲーだろ」と思うところがいくつかありました。具体的にはiPhoneコースではswiftという言語を扱うのでプログラミング言語を学ぶのが初めての人のために、変数とは、といったところから説明するのですが、一つのlessonでクラス、さらには継承の話も出てきます。コースの説明では「全部を理解しなくてもいい」と書いてありますが、その後も普通に言葉として出てくる以上、分からないと大変だろうなということは想像に難くないです。

ということで私としては一通りSwiftを勉強してから(Progateなど)、受講した方がオススメです。

現在は前準備段階なので、コースの具体的な内容は次のlessonを終えてからにしておきます。では、また。

Unityで作ったゲームをAppleStoreに出すまでの手順まとめ

申請から5日、ついにAppleStoreにゲームが公開されました。

もしよろしければ下記よりダウンロードして遊んでくださると幸いです。

SlimeSplits

SlimeSplits

  • yoko ito
  • ゲーム
  • 無料

 

ということで最新のstore申請事情について触りつつ、手順をまとめておきます。基本的な手順は夜更かし工房さんのブログを参考にしています。

1 Apple Developer Programへの申請

この段階では特につまづくところはありません。注意しないといけないことは下記の二つの点です。

  1. 法定年齢に達していなければならない。
  2. 登録料として11800円(税込12744円)必要(※1年毎に更新料あり)

一つめは多くの国では18歳ですが、日本では20歳なので、もしそれを満たしていない場合、登録することができません。なお、私は20に満たなかったので親のアカウントで進めました。後からアプリを移動させることができるとうことを聞いたのでとりあえず、といった感じです。

二つめはかなり重要で、GooglePlayでは$25、しかも最初だけだけでしたが、appleの場合は1年毎に11800円必要です。これは結構な値段だと思うのでしっかり確認しておいてください。

unitynightowlgames.hatenablog.com

2 Certificate(配布証明書)の作成

基本下記のサイトに従えばいいのですが、強いて言えばDeveloperサイトのメンバーセンターというところがAccountに変わっていることですかね。

f:id:abyssTerry:20180524224415p:plain

nitynightowlgames.hatenablog.com

3 AppIDの登録

特に問題なし。下記参照

unitynightowlgames.hatenablog.com

4 Provisioning Profile(プロビジョニングプロファイル)の作成

ここも特に問題なかったという記憶

unitynightowlgames.hatenablog.com

5 Xcodeでのプロジェクト設定

夜更かし工房さんの記事ではここからXcodeの設定に入るのですが、ここでエラー地獄で私は参ってしまった。そのため現在講座を受けているTechAcademyのメンターに質問したところ(TechAcademyについては後々詳しく記事にする予定)、最近のUnityではここら辺をUnity側で設定できるようになったということ。

unitynightowlgames.hatenablog.com

ということで上記のサイトは無視し、下記のサイトを参考にしながらUnityで設定を行う。

indie-du.com

6 iTunes Connectからアプリを申請する

最後の手順です。ここでアプリの名前や説明を設定します。iTunesConnectでの設定は手順に沿っていけば大丈夫ですが、XcodeでArchiveした後の画面が違うのでそこの手順だけいうと、Validateして成功したらUpload to App Store...のボタンを押せば大丈夫です。

f:id:abyssTerry:20180524230912p:plain

これでSucceeded!とどちらも出れば問題ないのですが、私の場合はそんなに簡単に終われるほど甘くはなく、ここからが本当の戦いだった......。

エラーその1 「アイコンの大きさが規定通りじゃないー、はいダメー」

このエラーはArchive後Validateした時に言われた気がします。iTunesConnectでもアイコンを設定する場所があったと思いますが、Unityでも同様のサイズのアイコンを設定する必要があります。(BuildSetting->Player Settings->Default Icon)

規定は「サイズ:1024px × 1024pxサイズ / フォーマットがJPG、PNG

ちなみに私は画像の編集にオンラインのPixir Editorを使っています。他の方法を知らないので比較は出来ませんが、サイズも自由に変えられ、透過画像も作れるので便利です。Online Photo Editor | Pixlr Editor

 

エラーその2 「そのversionすでにあるからだめー」エラー

修正するためにArchiveを何度かすることがあると思いますが、その際気をつけなければいけないのがおなじversionは一度しかArchive出来ないということ。なので「最初に出すときのversionは1.0じゃなきゃだめ!」という人はversion1.44とか適当なversionで試して上手くいったら1.0でやる、といった方法を取るそうです。特にそういったことを気にしないのであればarchiveする毎にXcodeの設定のところでversionを増やしていけばいいと思います。

エラーその3 わけわからんエラー

一つよく分からないエラーがありまして、結局容量が足りないことが原因でした。一時期システムが80GB使用しており、そりゃねーだろって感じでした。Xcodeで作業していると気づいたら容量がパンパンになっているということはよくあることらしいのでその改善方法の記しておきます。

macOS Sierra以上なら、Finderのウィンドウを開いた状態で[Command + Shift + . ]のショートカットキーを押すと不可視ファイルの表示・非表示を切り替えられます。ファイルを見ても容量を食っているものが見つからない場合、不可視ファイルの場合があるので、この方法で見つけて消していきます。詳しくは下記のサイトが参考になります。

qiita.com

次は申請時にrejectされた場合です。この場合は色々なことで拒否されることがあると思うので、理由をよく読んで対処するしかないと思います。今回一例として私の場合をご紹介します。

rejectされた理由1 「iPadの大きさにゲームが合わないじゃねーか」

これ、ゲームを作っている間は気にしていなかったのですが、iPadの大きさにもゲームを対応させなきゃいけないらしく、(対応させなくてもいい方法があるかもしれませんが)地味にその作業が大変でした。下の図のように変更してしっかり確認しましょう。

f:id:abyssTerry:20180525002343p:plain

rejectされた理由2 「iPadのスクリーン画面が実際のゲーム画面と違うじゃねーか」

iTunesConnectでスクリーンショットを何枚か設定すると思いますが、この際、私のようにiPhone用のゲーム画面を適当にサイズだけ合わせてiPadスクリーンショットに設定してもバレますのでしっかりiPad用の画面を用意しましょう。実際iPadを持っていなくてもUnity上でゲームを実行した画面でをスクショすれば大丈夫です。ちなみにスクリーンショットのサイズは下記のサイトを参考にしてみてください。

suzushinlab.com

ということでざっとiOSでゲームを提出する方法をまとめました。ここに載ってないエラーが出たとしても挫けず、エラーの内容をしっかりみて対処することが大事です。

このまとめが一人でも多くの人の参考になることを願って。では、また。

 

Unityで作ったゲームを GooglePlayストアに出す方法

現在Unityで作ったゲームのiOSへの申請途中なのですが、忘れる前に先にGooglePlayでの提出方法をまとめておこうと思います。iOSでの申請に比べたらつまづくところは少なかったです。(基本他サイトの引用)

 1 インストール必要なものの手順

(JDK, AndroidStudio, Unity)

qiita.com

2 Google Play Developer アカウントの登録

unitynightowlgames.hatenablog.com

3 apkファイルの作成

(下記サイトのリリースビルドの部分)

matatabisoft.com

4 Google Play Developer Consoleでのアプリ申請

unitynightowlgames.hatenablog.com

の順番で行えば大丈夫だと思います。私がつまづいたところとしては、

  • JDKが9や10ではうまくいかない

  →JDKを8にしたら解決。

  • Unityでの謎のエラー「Unable to list target platforms. Please make sure theandroid sdk path is correct. See the Console for moredetails. See the Console for details」の発生

 →下記サイト参考にtoolの差し替え

qiita.com

(なお、Macの場合は 

http://dl-ssl.google.com/android/repository/tools_r25.2.5-macosx.zip

をダウンロードすれば良い)

 

もし同じところで困っていたら参考にしてください。

またBuildに関しては私は実機を持っていなかったので下記のサイトを参考にPCだけでどんな感じになるかを試してみました。

hep.eiz.jp

これらがGooglePlayストアへの提出方法です。上記のサイトを参考にすればなんとかなりますので困っている方がいましたら参考にしてみてください。次の記事では他のサイトを参考にしてもうまく提出できなかった(詳しい人に聞いて出来た)iOSでの提出方法をまとめようと思います。では、また。