ここ最近やってた作業がきりのいいところまで終わったのでログ代わりのブログです。もともとピュアなSPAとして作っていたものをGatsbyに乗せて静的化しました。コアのゲーム部分は以前と変わらずSPAとして動きますが、Googleにインデックスさせる部分は実体のHTMLがちゃんと存在する状態になっています。
GitHub - rei-m/web_hyakuninisshu
去年公開した時の記事
事前の素振りとして検証した記事
Androidアプリ版もあるよの記事
個人で公開しているSPAが素朴なReactで作られていてSSRも何もしておらず、もうちょっとGoogle先生のBotに優しく作ってあげようということで、前段階の準備としていろいろ試してみたメモです。対象のサイトはそんなに大きくないので、SSRを頑張るのではなくて事前にレンダリング済のページを静的なHTMLに出力して配信という形式にします。
いきなり作り変えるには知見がないのでReduxのチュートリアルでよくやるTodoアプリケーションをGatsby.jsを使って実装して、できたものをNetlifyにデプロイしました。言語は一部のGatsbyの設定ファイル以外はTypeScriptで書いています。
で、作ってみたのがこちら gatsby-ts-todo.netlify.com
オリジナルのチュートリアルには無いページですがTodoの詳細のページを追加していて 、pathはtodos/:id/ になります。Gatsby.jsで動的に静的なページを生成するための検証として、Todoを2つ初期状態で登録済にしておいて、これらのTodoの詳細ページは静的なページとして配信して、URLを直接叩いて見えるようになっています。
これは直接見える https://gatsby-ts-todo.netlify.com/todos/1/
これは直接見えない。 https://gatsby-ts-todo.netlify.com/todos/3/
ページを動的に生成するためにはgatsby-node.jsに生えているAPIを実装するのですが、ここもTSで書きたいなあというとこで、ちょっと試行錯誤しました。結果としては以下のようになりました。
gatsby-node-config.tsにTSで実装を書いてます。createPagesではStoreの初期データからcreatePageしてるのがわかると思います。
gatsby-node-config.ts
import { resolve } from 'path'; import { GatsbyCreatePages, GatsbyOnCreatePage } from './types'; import { initialData } from '@src/state/todos'; import { Todo } from '@src/types'; export const createPages: GatsbyCreatePages<{ todo: Todo }> = async ({ actions }) => { const { createPage } = actions; initialData.forEach(todo => { createPage({ path: `/todos/${todo.id}`, component: resolve(`./src/templates/todos.tsx`), context: { todo, }, }); }); }; export const onCreatePage: GatsbyOnCreatePage<{ todo: Todo }> = async ({ page, actions }) => { const { createPage } = actions; // page.matchPath is a special key that's used for matching pages // only on the client. if (page.path.match(/^\/todos/)) { page.matchPath = '/todos/:id'; createPage(page); } };
で、本来実装する gatsby-node.js では gatsby-node-config からrequireしてexportしてスルーパスしています。configのビルドはts-nodeを使うことでうまいこと通りました。
gatsby-node.js
'use strict' require('source-map-support').install() require("tsconfig-paths").register({ baseUrl: './', paths: { '@src/*': [ 'src/*' ], '@test/*': [ 'test/*' ] } }); require('ts-node').register({ compilerOptions: { module: 'commonjs', target: 'es2017', noImplicitAny: false } }) const { resolve } = require('path'); const config = require('./gatsby-node-config'); exports.createPages = config.createPages; exports.onCreatePage = config.onCreatePage; exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ resolve: { alias: { '@src': resolve(__dirname, 'src/'), '@test': resolve(__dirname, 'test/') } } }) }
Gatsbyはチュートリアルが充実してたので、Reactを触ったことがあれば基本的な機能は割とすぐ使えるかなという印象です。GraphQLまわりのところがちょっとまだ完全には把握できてないので、そのあたりをもうちょっとドキュメントを読みつつ試してみようかなと思います。
全体のコードはこちら
GitHub - rei-m/gatsby-todo: Todo Application created by Gatsby with TypeScript.
このエントリは、今年一年の自己の振り返り Advent Calendar 2018 - Adventar の23日目の記事で、34歳のWeb界隈で働いているおじさんが2018年を振り返ります。
2016年の12月にリリースしたやつです。順調にDL数が伸びてこの記事を書いてる時点で13.4Kでした。あんまり機能改善はできてないけど今年はAndroidX対応したり、AAC取り入れたりと、まあまあモダンな感じに手を入れました。
↑のアプリのWeb版てことで春ぐらいにリリースしました。しばらく放置していてユーザーも全然来なかったのですが、10月くらいにSEO意識してコンテンツ見直したら改善しました。今は百人一首で検索すると1ページの3〜5番目の表示で安定しています。↓は劇的に改善されたのがよくわかるグラフ。
osechi.jpというドメイン買ったのでおせちのメタサーチサイト作りました。が、改善する前にシーズンのピークが過ぎたのでまた来年。
この記事は Android Advent Calendar 2018 の5日目（の代打）です。
サンプルはこのRepositoryの中のmotionlayoutディレクトリをビルドすれば試せる github.com
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" app:layoutDescription="@xml/scene" // 作成したSceneを指定 app:showPaths="true" android:background="@android:color/white" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height="64dp" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
<Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" /> <KeyFrameSet> <KeyPosition motion:framePosition="33" motion:keyPositionType="pathRelative" motion:percentY="-0.3" motion:target="@id/button" /> <KeyPosition motion:framePosition="66" motion:keyPositionType="pathRelative" motion:percentY="0.3" motion:target="@id/button" /> </KeyFrameSet> </Transition>
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" /> <KeyFrameSet> <KeyAttribute motion:framePosition="50" android:scaleX="2" android:scaleY="2" motion:target="@+id/button"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorPrimaryDark" /> </KeyAttribute> </KeyFrameSet> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorAccent" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="@color/colorAccent" /> </Constraint> </ConstraintSet> </MotionScene>
val motionLayout = view.findViewById<MotionLayout>(R.id.motionLayout) val button = view.findViewById<Button>(R.id.go) button.setOnClickListener { val current = motionLayout.progress val next = current + 0.1f motionLayout.progress = if (next > 1) 0f else next }
特に知見というほどのものでもないのですが、AndroidX対応したやつをStoreに載せたので作業ログなど。ASは3.2.1、対応するアプリはKotlin製です。
Migrating to AndroidX | Android Developers 移行の手順と旧ライブラリ群がどのようにAndroidXにmappingされるのかが書いてあります。
Refactor -> Migrate to AndroidXでガツンと変えてくれるらしいのですが、build.gradleが3.2.0より小さいと実行できないと言われるので、まず上げます。このときは3.2.1に上げました。
改めてASのメニューからRefactor -> Migrate to AndroidXします。すると今までSupportライブラリを使っていたファイルのパスがandroidx.XXXまたはcom.google.android.material.XXXに置き換わります。ただ、一部うまく変換できてないところがあったので変換後の差分はちゃんと見たほうがいいです。僕のやつだとimportしてる部分が変換されてるのに引数の型がFQDNで指定されてたりしました。
ビルドするも通らず。。。原因はDataBindingが生成するActivityXXXBinding系のファイルでDataBindingComponentが見つからないと言われました。generatedJavaを見ても確かに見つかりません。gradle.propertiesのenableJetifierが怪しいかなと思い、フラグをfalseにすると生成されました。ただ、このフラグ自体は旧supportライブラリとAndroidXをつなぐために必要な設定なのでfalseにはできません。
似たような事例をさがすとバージョンは微妙に違うものの同じ問題でDagger16に戻すと解消するというPostがあり、戻してみると該当の問題は解消しました。
ビルドするもまだ通らず。。。原因はSQLiteのORMにOrmaを使っていて、Ormaが生成するスキーマのファイル内で旧Support系のライブラリを使っていて、それの参照エラーになっていました。AnnotationProcessorで生成される分についてはgradle.propertiesのenableJetifierは面倒を見てくれないということですね。こちらはちょうど作業中にAndroidX対応のバージョンがリリースされたので、バージョンを更新したことで事なきを得ました。
個人で開発したアプリがDL数10万/評価1000件まで育ってくれて、いい機会なので現時点で取れている各種情報をキャプチャしておきます。個人のアプリ開発の参考にどうぞ。
※作ったときに書いたブログ
| 項目 | 数値 | 取得元 |
|---|---|---|
| インストール数 | 118.87K(うちアクティブは24,000) | PlayStore |
| 平均評価 | 4.408 | PlayStore |
| レビュー/評価数 | 375/1,000 | PlayStore |
| ANR/直近30日 | 99.9% | PlayStore |
| クラッシュ/直近30日 | 99.5% | PlayStore |
| DAU | 直近の8末で700前後。全期間での最高値は3500 | Firebase |
※補足: クラッシュ率はProguradの設定で事故ったリリースがあったのでそれを抜かすともうちょっといい数字のはず
https://github.com/rei-m/android_hyakuninisshu
出落ちですがAndroidのモダンな設計周りの話はPEAKSで出ているこの本を読んだ方が手っ取り早く吸収できます。AACとFluxの話も載ってます。
とはいえ、いろいろ自分でも試行錯誤しないと理解が進まないので、上記を踏まえた上で自分なりに実装してみた話です。自分でリリースしているアプリ↓をいじっています。
action/Dispacher.kt
@Singleton class Dispatcher @Inject constructor() { private val processor = PublishProcessor.create<Action>() fun dispatch(action: Action) { Logger.action(action) processor.onNext(action) } fun <T : Action> on(clazz: Class<T>): Observable<T> = processor.onBackpressureBuffer() .ofType(clazz) .observeOn(AndroidSchedulers.mainThread()) .toObservable() }
action/karuta/KarutaActionDispatcher.kt
@Singleton class KarutaActionDispatcher @Inject constructor( private val karutaRepository: KarutaRepository, private val dispatcher: Dispatcher, private val schedulerProvider: SchedulerProvider ) : SingleExt { fun fetch(karutaId: KarutaIdentifier) { karutaRepository.findBy(karutaId).scheduler(schedulerProvider).subscribe({ dispatcher.dispatch(FetchKarutaAction(it)) }, { dispatcher.dispatch(FetchKarutaAction(null, it)) }) } }
presentation/karuta/KarutaStore.kt
class KarutaStore(dispatcher: Dispatcher) : Store() { private val karutaLiveData = MutableLiveData<Karuta?>() val karuta: LiveData<Karuta?> = karutaLiveData private val notFoundKarutaEventLiveData = SingleLiveEvent<Void>() val notFoundKarutaEvent = notFoundKarutaEventLiveData init { register(dispatcher.on(FetchKarutaAction::class.java).subscribe { if (it.error == null) { karutaLiveData.value = it.karuta } else { notFoundKarutaEventLiveData.call() } }) } class Factory @Inject constructor(private val dispatcher: Dispatcher) : ViewModelProvider.Factory { @Suppress("UNCHECKED_CAST") override fun <T : ViewModel> create(modelClass: Class<T>): T { return KarutaStore(dispatcher) as T } } }
presentation/karuta/KarutaViewModel.kt
class KarutaViewModel( store: KarutaStore, actionDispatcher: KarutaActionDispatcher, karutaId: KarutaIdentifier ) : LiveDataExt { val isLoading: LiveData<Boolean> = store.karuta.map { it == null } val karutaNo: LiveData<Int?> = store.karuta.map { it?.identifier()?.value } val karutaImageNo: LiveData<String?> = store.karuta.map { it?.imageNo?.value } val creator: LiveData<String?> = store.karuta.map { it?.creator } val kimariji: LiveData<Int?> = store.karuta.map { it?.kimariji?.value } val kamiNoKuKanji: LiveData<String?> = store.karuta.map { it?.kamiNoKu?.kanji } val shimoNoKuKanji: LiveData<String?> = store.karuta.map { it?.shimoNoKu?.kanji } val kamiNoKuKana: LiveData<String?> = store.karuta.map { it?.kamiNoKu?.kana } val shimoNoKuKana: LiveData<String?> = store.karuta.map { it?.shimoNoKu?.kana } val translation: LiveData<String?> = store.karuta.map { it?.translation } val notFoundKarutaEvent = store.notFoundKarutaEvent init { if (store.karuta.value == null) { actionDispatcher.fetch(karutaId) } } class Factory @Inject constructor(private val actionDispatcher: KarutaActionDispatcher) { fun create(store: KarutaStore, karutaId: KarutaIdentifier): KarutaViewModel = KarutaViewModel(store, actionDispatcher, karutaId) } }
presentation/karuta/KarutaFragment.kt
class KarutaFragment : DaggerFragment(), FragmentExt { @Inject lateinit var storeFactory: KarutaStore.Factory @Inject lateinit var viewModelFactory: KarutaViewModel.Factory private var listener: OnFragmentInteractionListener? = null private val karutaId: KarutaIdentifier get() = requireNotNull(arguments?.getParcelable(ARG_KARUTA_ID)) { "$ARG_KARUTA_ID is missing" } override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { val viewModel = viewModelFactory.create(obtainActivityStore(KarutaStore::class.java, storeFactory), karutaId) viewModel.notFoundKarutaEvent.observe(this, Observer { listener?.onError() }) val binding = FragmentKarutaBinding.inflate(inflater, container, false).apply { setLifecycleOwner(this@KarutaFragment) } binding.viewModel = viewModel return binding.root } ... }
GitHub - rei-m/android_hyakuninisshu
