ゼロから3日でチャットボット開発チャレンジの3日目。
最終日は、『秋野カエデ』というチャットボットと、ランディングページを作成、そしてHerokuでデプロイしたアプリケーションに独自ドメインの設定を行った。
参考にした教材はこちら。
書籍の中で使われている言語はPHPだが、チャットボットの基礎的な仕組みについて丁寧に解説してあり、Pythonでの開発にも応用が非常に簡単であった。
チャットボットのつくり方について体系的にまとめられたリソースは非常に少ないので助かる。
本記事の構成
この記事の構成は以下の通り。
今回作成したページは
今回作成したページはこちら。
秋野カエデのお金の相談室
短期間で作ったこともあり、細かいレイアウトは整え切れてないため恥ずかしさがあるが記録として残す。
今回意識した点としては以下の4点。
・ランディングページ(風)の1カラムレスポンシブレイアウト
・CSSによるアニメーションの実装
・ページの読み込み速度向上の工夫
1カラムレイアウトはbootstrapで特に問題なく実装できた。
困ったこととしては、キャラクターを載せるためにCSSのpositionを使ったのだが、いまいち挙動が理解できなかった。
どうやらポジションの起点は画像のてっぺんに設定されているっぽい？
top: 100%;と書いたら、画像が完全にボックスからはみ出してしまった。
CSSはまだまだ全然使いこなせていないので、色々試してみたいな。
CSSでのアニメーション
今回CSSはでのアニメーションに使ったのは、animate.cssとdelitersである。
これだけシンプルにアニメーションを実装できる仕組みがあるのか、というのはちょっと感動した。
animate.cssは、classを変えるだけで簡単にHTMLにアニメーションを追加できる超便利ツール。
使い方はAnimate.cssの便利な４つの使い方を解説！とか読んでみるといいかも。
delitersは、超軽量＆簡単にスクロール時の動作を実装できるツール。
こちらもclassで簡単に操作できる。
アニメーションはCSSで書く必要がある。
普通にjQueryでスクロール時のアクションを実装しても良かったのだが、常時スクロール判定を行い続けるのは負荷が大きいため、何か他の軽い実装方法がないか探したところ出会った。
これは公式のページを見れば大体の使い方もわかるので簡単に使える。
deliters
Herokuへの独自ドメインの設定方法
今回はムームードメインで作った独自ドメインを設定。
簡単すぎて一瞬で終わった。
ただ、Herokuの無料枠では、HTTPS通信は使えないらしい。
月700円程度のプランに変える必要がある。
ドメインの追加はこのページを参考にした。
Herokuで独自ドメインを設定する方法
これでいいのか不安になるくらいあっさり終わったので、Herokuにデプロイできた人なら特に問題ないと思う。
私としては、この記事の解説の雑さがこれでいいのかって感じだ。
今回の開発チャレンジの反省点
ここまで雑に進めてきたが、ここからが今回の記事のメインテーマ。
開発チャレンジの振り返りを行う。
○良かった点
・チャットボット公開を有言実行できた！
・ORMという概念、PythonでのDB操作を知ることができた！
・CSSでのアニメーションの作り方を学べた！
・チャットボットの基礎的な動かし方を理解した！
・flaskのアプリケーションをデプロイできた！
・Twitterのフォロワーが増えた！
・一日13時間PCの前に座ってた！
○改善点
・Twitterのチェックで勉強の集中力を落とさない。時間を区切って行う。
・完成形のイメージがなく、手探りで進めていた。ゴールイメージを明確に持つ。
・本来の目的とは関係ないLPの作成に実質1日費やした。目的を明確に持つ必要があった。
・動かすこと優先で基礎理論を飛ばしていた。動くものを作ったので、これから基礎知識も学ぶ。
とりあえずパっと思いつくものだけ並べてみた。
相変わらずPDCAの能力が低くて悔しい。
今後はPDCAの訓練もしつつ開発に取り組んでみよう。
