「人間は名言を作る葦である」　-パスカル-

誰にでも素晴らしい名言を作り、その言葉を欲している人に届けたいという思いはあるかと思います。

そんな名言欲を埋めたい人類のために有象無象の言葉を名言っぽい雰囲気にしてシェアできるサービスを作りました。

twitterアカウントとの連携で簡単に利用できるようになっています、ぜひ使ってあなたの名言欲を解消しましょう！

名言 - MEIGEN - | すべてを名言っぽくして共有するサイト

というわけで、茶番と宣伝が終わったので、本編に入ります

なぜ作ったの?

このサービスは、プログラミングの勉強と、飽きっぽい性格を治すための精神修行、そして自分のポートフォリオづくりの一環で作りました。こんな自分でも頑張ったらサイトが作れるってわかったので、もっと積極的にアウトプットしていきたいと思います。

サービスの構成

今回、フロントエンドをVue + Netlify、バックエンドをKotlin + Ktor + Heroku、データベースをMariaDB + Conohaで作成しました。

なぜこんな構成にしたって？　cors対応やってみたかったのと、kotlinで作りたかったんだ。。。

以下、使ってみた上で発生した問題点なんかを紹介していきます

Vue + Vue Router + Vuex

今回はじめてVue Routerを使ったのですが、**「path: '/list/:page'」のように動的ルートマッチングを使った場合に、「/list/1」から「/list/2」**に遷移するとcreatedが呼ばれず画面の要素が変わらないという問題に遭遇しました。

解決策としては、beforeRouteUpdateを追加してcreatedの処理内容をbeforeRouteUpdate内にも入れるようにするといいと思います。（プロの方もっといい方法があれば教えてくれると嬉しいです）

Kotlin + Ktor

Kotlin + Ktorについてはとにかく情報量が少なく、完成するまでに公式の英語ドキュメントやSampleのソースを何回も見て、どう実装すればいいのかを地道にチェックしながら作っていきました。
もしKtor使ってて実装の仕方がわからないよぉってなった場合は公式英語ドキュメントや公式Sampleの一つであるYoukubeを確認してみるといいかもしれません。

また、Ktorのjsonパーサとして「jackson」を使用していて、「is〇〇」という名前のフィールドを持ったdata classをcall.respondでjson形式にしてクライアントに返した際に、

sample.kt

data class ResponseHoge(val isHoge: Boolean)
get("/") {
    call.respond(ResponseHoge(true)) // 自動でJson形式に変換してクライアントに返される
}

response

{"hoge":true}

「is〇〇」の「is」がなくなってしまうという問題が発生しました。もし使われてる方は注意されることをおすすめします。（その原因についての記事がありましたので貼っておきます）

Penicillin(TwitterAPIClientライブラリ)

twitterへのシェア機能のためのTwitterAPIClientライブラリには**Penicillinを使わせていただきました、とても使いやすいライブラリなのでKotlinでTwitterAPIを叩きたいときにはオススメです!
注意点としては、Json.ktに依存していて、更にそのJson.ktがkotlinx.serializationに依存しているので、使われる場合にはdependencyにPenicillin**以外に、Json.kt、kotlinx.serializationの２つを追加してください（Ktorで使う場合はすでにkotlinx.serializationが入ってるので、Json.ktのみで大丈夫なはずです）

Exposed(ORM)

ORMにはExposedを使ってます。Kotlinの型パワーをフルに使って、安全にSQLを組むことができるすごいやつです。KotlinでORMを使うならこれは良い選択肢になると思います。~~ただC#のDapperのように生SQL書かせてくれてもええのよ~~
コネクションプールにはHikariCPを使いました。

KtorのSessionTransportTransformerMessageAuthentication

公式ドキュメントや署名付きcookieで調べてもよくわからなかったので、誰か詳細を教えてほしいです。。。。。。

サービスを作って得たもの: priceless

今回それなりにサイトを作ってみて、自分の知識が大きく不足しているなとなかなかに痛感する場面がいくつも有りました。HTTP周りの知識、VueやSPAに関する知識、セキュリティ、特にOAuth認証に関してはOAuthとOpenIDConnectで「認可」と「認証」が別れていたり、OAuthを使うとでっかいセキュリティホールが空くとか情報の波に呑まれながらじっくりコトコト調べていきなんとか作ることができました。

他にも、情報が少ない場合には、SampleやGithub上のソースコードから実装の仕方を確認するのも、なかなかいい方法だなと思いました。もっとソースコードを見ていって実装力を上げていきたいなと思ってます。

そして一番は、アウトプットの重要性について。自分の知らないことがより鮮明になるのと、知識だと思ってたことが、実際作ってみると全然足りなくて、もっと掘り下げないといけなかったりと、作ってみて初めて分かることのほうが圧倒的に多かったです。

「情報は知識ではない。知識とは唯一経験から得られるものである」　- アインシュタイン -

という名言がありますが、それをしっかり体験できたような気がします。

今後の予定

検索機能の追加
就職する
もっとデザインを良くしたい()
reCAPCHAv3の設置
いいね機能?
就職する(最重要)
もしかしたら別の作るかも

~~だれか仕事ください~~