zukkeyの技術奮闘記

”当たり前”が誰かのためになる、はず

エンジニアもデザインを学ぼう!- Sketch導入とマテリアルデザインのプラグインの入れかた -

はじめに

お久し振りです。

連日猛暑の中、部屋の大掃除を行ってました、zukkeyです。

 

今日は、技術的な話というよりもツールとプラグインの導入の紹介です。

 

マテリアルデザインを学んでいるのですが、エンジニアであってもデザインの基礎やツールの使い方について学んだ方がいいと最近感じているので、同じような考えを持っている人に少しお役に立てたら嬉しいなと思って書きます。

 

この記事に書いてあること

・Sketchについて

・マテリアルプラグインの導入

 

Sketchについて

Sketchはデザインツールの一種です。

下記リンクからダウンロードできます。

www.sketchapp.com

 

ライセンスを入手するのに年99ドル(2018/7 現在)かかるようです。

トライ版でしたらお試しで30日間無料で利用することができます。

 

使い方に関しましては、下記のようなサイトをみるといいかもです。

僕は必要に応じて、単語を調べて学んでいくようにしてます。

 

techacademy.jp

 

【初心者向け】Sketch(スケッチ)の使い方を徹底解説

 

公式のリンクを開くと、下記のような画面が出てきます。

 

f:id:rozkey59:20180722220507p:plain

 

Try For Freeからダウンロードしてアプリケーションフォルダに移動しましょう!

 

マテリアルプラグインの導入

Androidのデザインに興味関心のある人なら下記の公式のマテリアルデザインのサイトを見ていると思います。

material.io

 

ここでいくつか紹介されているサンプルのデザインをSketchでみることが出来ます!

 

早速始めていきましょう!

まずは下記のサイトからMaterial Theme Editorを使用するためにPluginをダウンロードします。

material.io

 

Downloadしたら下記の画像のようにFinderでダブルクリックした後に、インストールする旨を聞かれるので、OKを選びましょう。

f:id:rozkey59:20180722221319p:plain

 

 

次にSketchを開いて下記の画面でNew Documentを選択しましょう!

 

f:id:rozkey59:20180722220931p:plain

 

その後に、次の画像のようにPlugins > Material > Open Theme Editorを選択してください。

f:id:rozkey59:20180722221448p:plain

 

そうすると、次のようなTheme Editorが出てきます。

f:id:rozkey59:20180722221523p:plain

 

ここから、公式のサンプルで紹介されている、サンプルのデザインを詳しくみることができるので、お好みで選択してStart ...を選んでください。

 

今回、僕はShrineを選択しました。

選択すると下記のようなDialogが出てくるので、OKを押した後に好きなところに保存をしてください。

f:id:rozkey59:20180722221754p:plain

 

これが終わると、次のような画面になります。

f:id:rozkey59:20180722221833p:plain

左の鍵マークをクリックすると中身の詳細を見ることが出来ます。

 

Shrineと書かれたテーマのフォルダの鍵マークを外すことで、各コンポーネントの中身やシンボルなども詳しく見ることが出来ます。

 

ThemeEditorでパレットの色を変えれば、色の変更を行うこともできます。

 

 

おわりに

エンジニアであっても、僕はデザインを学んだり基礎の理解は必要だと思っています。

 

なぜなら、デザイナーとのやりとりがスムーズになるし、忙しい時は自分もデザインタスクの簡単なものならこなせるようになりたいとも考えているからです。

 

また、AndroidiOSと同じデザインで!と言われた時に、Androidマテリアルデザインというガイドラインに乗っ取っている方が、UXが高まるしAndroidユーザーにとっては良いと言えるので、デザインの初歩をエンジニアが学ぶ姿勢は大事です。

 

Sketchの簡単な操作ができれば、画像のサイズを変える程度だったら誰でもできるので、自分で変えて書き出してそのままアプリに入れることもできて、コストを削減することだって可能です。

 

これを機に、マテリアルデザインとSketchについても学んでいきましょう!

僕もまだまだですが、少しずつ学んでアウトプットしていきます。



 

 

 

 

 

 

 

 

Transitionについて調べていて気になった記事の感想

はじめに

こんばんは!

お久しぶりです。もはや隔週になってきたzukkeyです!

 

今回は、AndroidのSharedElementを使ったTransitionについていろいろと調べていたのでメモとして残しておこうと思います。

 

SharedElementTransitionとは?

共有要素を使った途切れない画面遷移のことです。

画面AからBに遷移する際に、同じViewを共有しているものに対して遷移の過程で途切れないやつです。

Twitterで画像をタップすると詳細に行って戻ってくるときに画像に対してアニメーションしながら遷移を実現するためのやつです。

 

僕も以前簡単なものを実装したので、その際に導入などまとめたので下記を参照してください。

rozkey.hatenablog.com

 

今回は、調べている間に勉強になった記事を2つ紹介していきます。

 

 

Circular Reveal & Shared Elements - ArcMotion

記事は下記参照。

blog.usejournal.com

 

これはリストの丸い要素から遷移後に拡大するアニメーションを実現するための方法について紹介してくれています。

 

ここで、学びになったのはArcMotionについてです。

 

Material DesignガイドラインにおけるArcMotionの実装方法についても書かれています。

https://material.io/design/assets/1JLs4KnMsty5jzCOR05u3FtQ9unLSTAAZ/01-handles-arc.mp4

 

遷移前から遷移後のArcMotionは良いですが、戻りはMaterial Designガイドラインとちょっと違う動きに見えるものの、Transitionの属性を変えればいけそうなので基本的にこのブログに書いてあるように実装すればできます。

 

僕も実際にやってみたらいけました!

 

記事中にもありますが、res > transitionの中でtransitionのxmlを下記のように定義します。

 

gist.github.com

 

そのあとに遷移先のActivityの中でTransitionをinflateして、 

window.sharedElementEnterTransition

にinflateしたTransitionを入れることで、ArcMotionを実現できます。

gist.github.com

 

コードとgif付きで記事の中で解説されているので、読むと勉強になります。

 

Custom Transition in Android

記事は下記参照。

medium.com

 

テキストのカラーや色やサイズを変える際にカスタムTransitionを作成して、実現する方法について解説がされています。

 

遷移元と遷移先で色やサイズを変更したい場合は、下記のようにTransitionクラスを継承したカスタムTransitionを作成する必要があります。

gist.github.com

 

captureStartValuesとcaptureEndValuesはそれぞれ遷移前と遷移後の値をキャプチャ―してそれをもとに、createAnimatorで自作する必要があります。

今回はテキストのカラーを例に挙げて解説されているので、勉強になりました。

 

おわりに

今回は小ネタ感になってしまったのですが、僕は勉強になったので読んでみる価値はあると思います!おすすめです。

 

僕もサンプルを作りながら日々勉強中です。

 

マテリアルデザインの動きを実現するためにも、TransitionとAnimationは奥が深いのでGoogleDeveloperのドキュメントを読んだり、Mediumの記事を漁ったりしながら試行錯誤してます。

 

もう少し調べてまとまってきたら、TransitionとAnimationについて解説記事をまた書こうと思います!

 

それでは、またー

MotionLayoutを触ってみた個人的な感想

はじめに

こんにちは!お久し振りです。

だんだん不定期になってきた、zukkeyです。

 

今日は、Twitterで流れてきて興味を持ったGoogle公式のサンプルのMotionLayoutを触ってみたのでその感想を書いていきますー!

 

github.com

 

ググってたらまとまっていた記事を見かけたので、こちらに詳しいことが書いてあった

 

medium.com

 

一応、今回は個人的な感想になります。

伝えたいことは、MotionLayoutスッゲェ!ぬるぬる動く!ってことだけです。

 

DrawerLayout Example

まず始めに気になったのが、DrawerLayoutExampleです。Drawerを開く際にもモーションをつけており、オシャレな感じが僕は好きです。

実際に動かしてみたのが次の通りー!

f:id:rozkey59:20180701204831g:plain

 

下記リンクから持ってきたものですが、レイアウトXmlを読んでみました。

github.com

中身を深く読んでみるとこのモーションを実現するためには、scene_13_menu.xmlをみると良さそう。

 

Motionの定義はres/xmlの位置にやるのが良いみたい。上のMediumに書いてた。

 

MotionSceneタグの中に、Transitionタグを用意してstartとendの対象となる要素をConstraintSetでそれぞれ設定していくみたい。

 

Transitionタグでは遷移のスピードと遷移の方向を定義して、ConstraintSetのなかでどこから遷移して回転するかなどを決めれば実現できる感じですね。

 

 

簡単にMotionを実現することができそう。

 

Side Panel Example

次に気になったのは、横スライドして画面をそのまま縮小しながら要素を表示することができるレイアウトのサンプルです。

 

実際に動かしてみたのが次の通りです。

f:id:rozkey59:20180701204154g:plain

 

またまた、コードを追ってみました。コードの中身は下記リンクから。

github.com

 

MockViewというのが作られたみたい。多分、前からなかったはず。僕が知らないだけかな。

これを使えば、このMotionを実現することができるっぽい。

app:mock_labelBackgroundColor="@android:color/white"

で真ん中のラベルの背景色を変えることができたし、

app:mock_diagonalsColor="@color/colorAccent"

でクロスしてる所の色変わったからこのMockView追加でできるっぽいね。

 

MockViewで囲んで要素とか表示できるのかな??

ちょっと作ってみないとわからないけど、後で試してみる。

 

Complex Motion Example

次に気になったのが、このサンプル。

実際に動かしてみたのが次の通り!

f:id:rozkey59:20180701204504g:plain

今回もまた、コードを追ってみました。

下記リンクを詳しくは参照ですね。

github.com

iボタンがImageViewになっていて、onClickを押した際に、DemoActivityのchangeStateを呼んでいるんですよね。

で、changeStateでは何をやっているかというと、motionLayoutのnullチェックをしてprogressという関数の閾値によって、Transitionのstartとendを呼ぶようにしてる。

progressではTransitionしている間のpositionをみてるみたい。

 

もとのmotion_20_reveal.xmlに戻るとscheneが設定されてて遷移自体の内容はこっちのxmlで定義しているよう。

なんにせよ、クリックした際はstateを変えるのにMotionLayoutのprogressで決めて、実際の内容はMotionScheneタグで囲んだxml内で定義していくみたいですね。

 

おわりに

MotionLayoutが入ったおかげで、遷移のアニメーションとか簡単になったのかな?

アニメーションあんまりわかってないけど・・・

 

見た感じパッと実装に移ることが出来そうなので、個人的に触っていこうかなと思う。

まあ、今日感じたのは、MotionLayout便利そう!触って見てすごいなーと思った。

Mediumに記事があるのでそっちもチェックですねー

あとは、I/Oの動画全然見てないからちょくちょく見ていかなくてはー

毎朝一個ずつ見てくか。今日はこんな感じ。

 

 

 

 

Stethoの使い方(初級編)

はじめに

みなさん、こんにちは!

お久しぶりです。完全に口だけになっておりました、zukkeyです。

 

ようやくブログ書くモチベーションが上がったので、書いていきます。

会社のブログも書かなきゃならんので、今日は軽くやってみた系です。

 

今日はStethoを個人アプリにも導入したので、その際のメモになります。

 

Stethoとは?

Fasebookが出しているライブラリで、Androidでは通信をデバッグしてChromeで見るのによく使います。

 

github.com

 

多分、大体どこのアプリにも入っていると思います。

他にも通信をデバッグするのには、Charlesを使ったりしますがそれはまた別のお話。

(というより、僕が勉強中なだけ)

www.charlesproxy.com

 

で、今日はStethoの導入がとても簡単なのでやっていきます。

 

導入の仕方

appのgradleの中に以下を記入してください!

 

// stetho
compile 'com.facebook.stetho:stetho:1.5.0'

 

Retorofitを用いる場合は、Intercepterをかませる必要がありますので、下記も必要になります。

compile 'com.facebook.stetho:stetho-okhttp3:1.5.0'

 

2018年6月現在、最新版は1.5.0です。

 

Stethoを使うためには、Applicationを継承したクラスで初期化する必要があります。

 

Applicationクラスでの初期化

僕のアプリの場合は下記のようにしています。

class MakepuraApplication : Application() {

override fun onCreate() {
super.onCreate()

Stetho.initialize(
Stetho.newInitializerBuilder(this)
.enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
.enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
.build()
)
}
}

 

Qiitaにすでに先人がいたので参考にしました。

enableDumpappはアプリをダンプさせるのに必要みたいです。

enableWebLitInspectorはChrome DebugToolsのデバッグを有効にするのに必要です。

 

qiita.com

 

初期化が終わったらAndroidManifestにも忘れずに

githubのページを見ていただくと中段あたりに書かれてありますが、AndroidManifestのapplicationタグの中に自分のApplicationを継承したクラス名を書くのを忘れないでください。

これをやらないと、うまく動作しません。

僕の場合は次の通りに記載しています。

<application
android:name=".MakepuraApplication">

 

これで準備が整いました!

 

さっそくデバッグしてみる

アプリをビルドして立ち上げた状態で、下記のようにChromeに検索窓にchrome://inspect/#devicesと入れます。

 

f:id:rozkey59:20180618230424p:plain

 

そうすると次のような画面が出てきます。

f:id:rozkey59:20180618230542p:plain

inspectという青い部分をクリックすると、下記の画面が出てきます。

f:id:rozkey59:20180618230707p:plain

これで、アプリのレイアウトの構成を見ることができたり、Retrofitにかませれば、アプリの通信を見ることができます。

 

もし、うまくいってなかったり、アプリを立ち上げていないと下記のようになって出てきません。

f:id:rozkey59:20180618230756p:plain

inspectが表示されていない時は、何かしら問題があるときです。

初期化しているか、AndroidManifestに追加しているかなど確認してみましょう。

 

もう一つ、chrome://inspect/#devicesと入れなくてもStethoデバッグをできます。

 

f:id:rozkey59:20180618230932p:plain

 

新しいタブを開いて右クリックを押すと検証というのが出てきます。Ctrl + Shift + Iでもいけます。

 

そうすると下記のような画面が出てきます。

f:id:rozkey59:20180618231026p:plain

 

この時に右上ある×ボタンの左の3つの点があるとこをクリックすると、下記のような画面が出てきます。

f:id:rozkey59:20180618231121p:plain

 

More Tools > Remote Devicesを選択することで、次の画面に行けます。

f:id:rozkey59:20180618231202p:plain

下部の方にDevicesの端末名が表示されたところでInspectを選択することでもStethoデバッグの画面を開くことができます。

 

おわりに

今日は、Stethoの導入の仕方の紹介でした。

小ネタになりましたが引き続き、なるべく更新頻度を落とさずに頑張っていきます!

 

 

 

RxJava: 登録画面でcombineLatestを利用するのはなぜか

はじめに

こんばんは!お久しぶりです。

固定回線がいまだに繋がっておらず、著しくテンションが落ちてブログをお休みしていました、zukkeyです!

 

今回は、Rx関連で登録画面においてcombineLatestを利用するのはなぜか、ということについてメモを残しておきます。

 

個人的な見解で間違っている部分もあるかもしれないので、その場合は申し訳ないです。

間違いあればコメントで指摘していただけると幸いです。

 

充分ハードルが下がったところで説明していきます。

 

よくある登録画面

今回はサンプルとしてデザインは適当ですが、以下のようなよくある登録画面を作りました。

 

f:id:rozkey59:20180526193344p:plain

 

 入力する項目を三つ作り、入力がされないと一番下のボタンを押すことができないようになっています。

 

 今回はcombineLatestだけに焦点を当てているので、正規表現を使って文字列とマッチしているかといった処理は行わずに、ただ単に三つの入力項目に対して文字列が空かどうかを見てボタンの選択状態が変わるようにしています。

 

作っている最中に以下のリンクとほぼ同じもの作ってた!と気づいたのですが、色々な結合オペレータがある中で、なぜcombineLatestかについては触れられていなかったので、書いていきます。

今回は、combineLatestとzipを比較していきます。

もしかして需要無かったりするのか。。。。

 

dev.classmethod.jp

 

 

combineLatestの時の挙動

combineLatestのときの挙動が以下になります

f:id:rozkey59:20180526194931g:plain

各項目で入力された文字列のデータが通知されてきて、一つのデータの流れが変わることによりボタンの状態が変化します。

 

zipの時の挙動

zipの時の挙動が以下になります

f:id:rozkey59:20180526205202g:plain

各項目で入力された文字列のデータが通知されてきて、全てのデータの流れが変わることによりボタンの状態が変化します。

 

サンプルのアプリの中で起こっていること

画像でサンプルで起こっていることについて説明していきます。

 

combineLatestのとき

 

f:id:rozkey59:20180526201043p:plain

 

RxJavaの結合オペレータのmerge、zip、combineLatestでは複数のデータの流れが来た際に1つのデータの流れに合わせる作用があります。

 

各々のオペレータでの違いはあるのですが、combineLatestだけに限定して言うと下記のような流れになります。

 

f:id:rozkey59:20180526201632p:plain

combineLatestの場合は一つのデータが変更されるのに合わせて、結合されたデータの流れに入っていきます。

 

 zipのとき

f:id:rozkey59:20180526211231p:plain

zipはcombineLatestと同様に複数のデータが合わさったタイミングで新しいデータの流れを作ります。

 

 

f:id:rozkey59:20180526211241p:plain

挙動のgifをもう一度見直してもらうと分かるのですが、一つの項目を変えてもボタンの状態が変化していないことが分かります。

zipとcombineLatestの違いはここにあります。

 

 

f:id:rozkey59:20180526211255p:plain

全ての入力を変えることではじめて新しいデータの流れをつくります。

 

まとめ

登録画面などの複数の入力をRxで処理する際に、combineLatestがよく利用されるのは一つのデータが変わった際に状態が変わってほしいからだと僕は思っています。

 

zipの場合を見ていただけると分かるように、一つの入力を変えるたびにすべての入力に対して、何かしら通知を行うようなアクションを行わないと状態が更新されません。

 

 なので、登録画面のような場合にはcombineLatestを積極的に使っているのだと思います。

 

おわりに

最後まで見ていただきありがとうございます!

疑問等、指摘などありましたらコメントしていただけると幸いです!

今回のサンプルは以下のリポジトリをクローンすることで試せるのでよかったら試してみてください!

 

github.com

Androidアプリにシェイクアクションを入れるための簡単な実装方法

はじめに

こんばんは!

1日更新が遅れてしまい申し訳ない。。

引っ越しが来週なので、引越しの家電買ったり、諸々準備があったため遅れてしまいました。

 

今日は前回お話しした、以下の記事の技術面でシェイク機能を簡単に実装する方法をご紹介します。

rozkey.hatenablog.com

 

 シェイク機能を実装するために使用したライブラリ

上の記事にも書いてあるアプリの中で、シェイク機能を実装するために次のライブラリを使用しました。

 

github.com

 

こちらを利用することでシェイクした際の動作を追加するのを簡単に実現することができます。

 

導入方法

appのgradleファイルの中に以下のものを追加してください。

 

// shake
compile 'com.squareup:seismic:1.0.2'

 最新のバージョンは、1.0.2です。(2018年5月現在)

 

導入はたったこれだけです

 

つかいかた

 

実装したいActivityに下記のようにShakeDetector.Listenerを継承させます。

今回はMainActivityに持たせたいので下記のように実装しています。

class MainActivity : AppCompatActivity(), ShakeDetector.Listener

 

次に、onCreateの中でリスナーにセットします

val sensorManager = getSystemService(Context.SENSOR_SERVICE) as SensorManager
val sd = ShakeDetector(this)
sd.start(sensorManager)

 

Context.SENSORの中身を見ると下記のようになっていて、


/**
* Use with {@link #getSystemService} to retrieve a {@link
* android.hardware.SensorManager} for accessing sensors.
*
* @see #getSystemService
* @see android.hardware.SensorManager
*/
public static final String SENSOR_SERVICE = "sensor";

 

sensorManagerというハードウェアのセンサーにアクセスするために必要なので上のようにしています。その後、リスナーをセットしてstartを呼び出すだけでシェイクを検知するようになります。

 

リスナーを継承させた場合にhearShake関数をオーバーライドする必要があります。

override fun hearShake() {
// やりたい処理を書く
}

 

この中にシェイクの動作をした際にやりたい処理を書くことでシェイク機能を簡単に実装することができます。

 

検知しているかどうかを簡単に試したい場合は、この関数の中で、下記のように実装することで振った際にToastが出るようになるので簡単に試すことができると思います。

override fun hearShake() {
Toast.makeText(this@MainActivity, "Everybody Shaked!", Toast.LENGTH_SHORT).show()
}

 

自分のアプリの場合には、データベースからランダムにデータを取って来たものをadapterに新たに追加する処理を行っているので、シェイクした際に新しくランダムな順番で10件のTweetを読み込むようにしています。

 

 

おわりに

今回はアプリにシェイク機能を簡単に実現する方法について紹介しました!

一週間開いた割には軽い感じでしたが、引っ越して時間ができたらもっと質を意識して書いていこうと思います。

 

最後まで見ていただきありがとうございました!

質問や疑問点などありましたらコメントに書いていただけると嬉しいです!

10日間でアプリ作ってリリースした話

はじめに

皆さんこんばんは!お久しぶりです。

開発をやっていたのでブログの更新を1週間お休みしていました、zukkeyです。

 

GWはいかがお過ごしでしょうか?

連休中に遠出した方も多いと思います。

 

僕は、引っ越し間近なので内見に行ったり引っ越しの準備をしたりしながらアプリを作ってリリースしました!

 

やったー!

 

ちなみに作ったのは以下のモノです。

f:id:rozkey59:20180505213616j:plain

 

今日は、その際に勉強になったことや学んだことについて書き残しておこうと思います。

 

全体で書いてある流れは以下の通りです。

  • はじめに
  • はじめたきっかけ
  • アプリを完成させるのに意識していたこと
  • どうしてこのアプリを作ったのか
  • 個人開発のすゝめ
  • 今後について
  • おわりに

ちょっと長くなると思いますが、しばしおつきあいください。。

 

一応先に、今回は技術的な話はあとでまた記事にする予定なので開発の感想と個人アプリ開発のすゝめをエモい感じで書いていきます。

 

技術的な部分に興味がある方はブラウザバック(推奨)

 

はじめたきっかけ

兎にも角にも、個人アプリを前々から作ってみたい!と思っていて、今年中に何とかリリースさせてグロースさせていくことを目標にしていました。

 

グロースさせる前にまずはいくつかリリースしなきゃじゃん!と思って、やる機会を狙っていたんですが、、、、

 

中々平日は仕事が忙しく余裕の持てる時間がなかったために、GWで引っ越しのこともあるから遠出しないだろうし、お金も使うのももったいないと思っていたので、この機会にマイクロリリースまでもっていこうと考えていました。

 

そういうわけで、前々から作ってみたい!と思っていたアプリを作ることに。。

 

一応、最初のコミットを遡ったところ、次のようになっていました。

f:id:rozkey59:20180505213417p:plain

 

10日前に初めてのコミットをしていて、10日間で一つのアプリを無事にリリースしました。

 

ストアの画面は次の感じ!

f:id:rozkey59:20180505214124p:plain

 

play.google.com

 

 

 

こんな感じでリリースすることはできたので、ここまでで意識していたこととか何を目的にしてやっているのかとかお話していきます。

 

アプリを完成させるのに意識していたこと

短期間で、一人でかつ技術的に未熟な人がアプリをリリースさせるために意識していたことは以下の三点です。

  • 色々と考えすぎない
  • 最低限必要な機能に絞る
  • 完成すること、が最大目標

 

一点目は、色々と考えすぎない、ということです。

 

アプリを作る前は、設計はMVPもしくはMVVMでモダンな設計にして、モダンなライブラリ使って、ソースコードも公開して次につなげられるようにしよう。。。とかいろいろと余計なことを考えてしまいがちです。

 

確かに、こだわることであったり次につなげようとか言う意識は大事ではあると思うのですが、僕はそういった考えはすべて捨てました。

 

こだわってしまうと、自分の実力と時間的に完成しないというのと普段の仕事とは違ってUIのデザインであったり仕様であったり考えることが多いので使えるリソースが限られています。なので、設計であったりアーキテクチャである部分は次からのリリースで修正していくことにして、取り合えず形にすることを大前提にして取り組んでいました。

 

もうひとつ、次につなげようとかは単純に今の仕事には満足しているので単純に考えてませんでした。

 

二点目は、最低限必要な機能に絞る、ということです。

 

色々とやりたいことが多すぎて、機能をたくさんつけたくなってしまいがちなのですが、機能が多いと工数がかかるしデザインだけでなく裏側も作っていかなくてはならないので10日間では無理!と思って、自分は次の三つの機能に絞り込みました。

  1. 投稿機能
  2. スワイプでGoodとBad評価できる機能
  3. 振ってランダムにデータベースから取ってくる機能

これさえできれば、今回のリリースでは完成と決めて取り組んでいたので無事に予定よりも一日早く終えることができました!

 

三点目は、完成することが、最大目標、ということです。

 

個人アプリって、結局のところ、自己満足なんですがリリースさせないとまずは誰かに使ってもらったり評判聞けたり出来ないですよね。

 

昔は、ローカルで渡して使ってもらうだけで嬉しかったけど、やっぱり顔も名前も知らない誰かにリアルな評価を受けてやっていきたい!という気持ちがあったので何があってもリリースにこぎつけることを目標にしていました。

 

以上が、僕がアプリを完成させるのに意識していたことになります。

 

 

どうしてこのアプリを作ったのか

 

なんで、このアプリを作ったのかという疑問に対していうと、一つは勉強のため、もう一つは匿名型SNSを前々から作ってみたかったから、というのがあります。

 

やっぱり個人アプリを作ると、今までの技術の復習にもなるし、今回はDataBindingとFirebase Realtime Databaseといった新しく触った技術も取り入れているので学びが多くなり、視野が広がったなぁと感じました。

 

あとは、大学時代からローカルで動くものなら作っていたものの、DBとやり取りする部分はサーバー立てたり、サーバー側の言語学んだりしないとたいへんだなぁとおもって何気に手を出せていなかったので、Firebase Realtime Databaseでできるやん!と気づいたので作ってみることにしました!

 

Twitterとかだと、皆で交流したり情報収集したりが目的だったりするのですが、なんでもいいから吐き出す受け口と新感覚のSNSが作れたらいいなぁと漠然と考えていたので作ってみることにしました。

 

こういった理由から、個人アプリ開発をやることにしました!

 

個人アプリ開発のすゝめ

個人アプリ開発は、いうなれば独りよがりの場でもあるので、普段できないことやサービスの質にあっていないことを試すことができる遊び場にもなるし、今まで学んできたことの復習にもうってつけです!

 

皆わりと小さいころからガツガツやってました!という人だったら、あんまり関係ないかもしれないけど、自分のように部分的にわからないことがあるとかだったら一旦一から全部ひとりでやってみると知らなかったことを知れるし、やっているのも楽しいのでオススメです!

 

大してコストもかからない上に、自分こういうのやってます!とかアピールにも使える(下心)し、もしかしたらうまくいけば広告収入でウハウハになるかもしれない(笑)ので、作りたいものができたらまずは完成させることを目標にしてやってみることが良いと思います!

 

みんなで試行錯誤して共有しあえるとプラスの方向に行ける気がする。。

 

今後について

取り合えず、今回作成したShakeTweetについては今後機能追加とインストールされるかとか様子見ながら試行錯誤して試していこうと思います!

内部的なアーキテクチャもモダンなものに変更したいのでそういうのもちょくちょくやっていこうと思います!

また、今回アプリを作るにあたって結構学びが多かったので技術的な記事も追加して今後書いていきます!

 

 

おわりに

今回は10日間でアプリ作ってリリースした話でした!

以前から、ブログで書いている、価格相場アプリ「Makepura」については、今回こだわるなーと言っているんですが急ぎじゃないので、アーキテクチャの部分でこだわって詰まっていてまだリリースは先になりそうですがちょくちょく作り上げてリリースまでもっていこうと思います!

 

最後まで見ていただきありがとうございました!