8月第4週（実績）
※ この記事では自己学習時のタスクをタスク、業務内で行うタスクを業務内タスクとして使い分けをしています。
土曜日:4h（体調不良で時間確保できず）
- CKeditorとs3への画像アップロードついて
- 質問画面での画像投稿(ckeditorとcarrierwave)で実装しようと1日格闘
- 情報が古いものばかりでなかなか苦戦、しかも現状のアプリは画像の管理を
ActiveStorageで管理していて別管理しないといけなくなってしまう。 - 現状の
ActiveStorageへの紐付けで簡単に管理できる方法はないか調査 - rails6の標準機能として提供される
ActionTextの記事を発見 - tech.libinc.co.jp
- ちょっと体調悪いので明日、vue.jsで出来そうか調査して実装案を固める。
- CKeditorとs3への画像アップロードついて
日曜日:3h（引き続き体調不良...）
#vimのインストールの上にあったnodejsのインストールを削除 RUN apt-get update -qq && apt-get install -y build-essential \ libpq-dev \ mysql-client \ vim ###########################ここから########################### # yarnパッケージ管理ツールをインストール RUN apt-get update && apt-get install -y curl apt-transport-https wget && \ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ apt-get update && apt-get install -y yarn # Node.jsをインストール RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \ apt-get install nodejs ###########################ここまで########################### RUN mkdir /myapp
一応公式の資料とチュートリアルを添付
調査結果から結論
- rails6の
ActionTextを使用して実装する - 理由
- マークダウンに対するgemを調査したがどれも古いのが気になった
ActionTextのチュートリアルをやったところかなり簡単に導入（画像アップロードまで）出来た- github.com
- これから、実際の要件でマークダウンを実装するという要件があるのか微妙なところ
- 実装へ向けて
- 既存のアプリは
webpack入っていないのでそれを入れるところから考えるとテスト含め5日が妥当なところかと見積もり。
- 既存のアプリは
- rails6の
月曜日：朝2h=2h
- 既存のアプリケーションにのdockerfileへ
webpackを導入する- そもそも
webpackの理解が0%だったのでインプット - JavaScriptファイルの依存関係の処理や圧縮・結合を行うらしい。1つにまとめる系みたいね。
- 参考
- gemfileへ
gem 'webpacker'を追加しdocker-compose buildからのdocker-compose run web bin/rails webpacker:install経由でとりあえずは動いた。 - docker-compose.yml改修
- そもそも
db:
##追加
webpacker:
build: .
command: ./bin/webpack-dev-server
environment:
NODE_ENV: development
RAILS_ENV: development
WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
WEBPACKER_DEV_SERVER_PUBLIC: 0.0.0.0:3035
volumes:
- .:/app
ports:
- '3035:3035'
##追加
web:
- 本番へのデプロイでハマる匂いがプンプンだなー。
rails action_text:installした後のdb:migrateコマンド打ったら、yarn install --check-filesをしろ。と言われた。dockerfileに記述する必要あるかも。- 夕活へのメモ...db:migrateでalready existでエラーで止まってる。
火曜日：朝:2h、夕:2h=4h
- 月曜の続き
docker-compose.ymlにwebpack用のコンテナ設定- とりあえずwebpackでcompileも成功しているみたいだけどactiontextが表示されない
- てか、webpack遅い。
- 以下でwebのコンテナの中にまとめちゃってるけどいいのかな？
- qiita.com
actiontextだけじゃなく他のjsも機能しなくなっているのでそこを解決するようなアクションを取れば何か変わるかも
水曜日：朝1.5h、2h=3.5h
- webpack導入続き
- 相変わらずactiontext他のjsが効かない問題
- 現状の
app/javascript/packs/application.jsがどうなっているか。
console.log('Hello World from Webpacker')
import "actiontext"
// import '../javascripts/application';
// import '../stylesheets/application';
// require.context('../images', true, /\.(png|jpg|jpeg|svg)$/);
- コンソールがどうなっているか。
- とりあえずここで詰まったので某雑食系へ質問を投げた。
- kentakatsumata.net
- 今回は華麗にスルーされた。
- とりあえずdocker環境を整えよう（1コンテナ内でrailsとwebpackを動かす）
- qiita.com
- まずはwebpackの使い方からインプットした方がいい。
木曜日：朝:1h,夕:0h=1h
- 業務の方が離脱のためのタスクで少しキツくなってきたため今日は予定に入っていた自己学習作業は一切せず積んでいた本を
Webを支える技術：内容要約文は随時執筆中。- 夕活は気分転換を兼ねて美容院へww
- 初めて訪れた美容院、恵比寿の
仕事がめちゃくちゃ丁寧な美容院だった。これはこれでイロイロ参考になり休養して正解だった。 ヤバいかもって時は勇気を持って休もう。- とは言え明日のタスクのために少し調査を...
- ics.media
普通にモジュールが入っていないだけかも。ということでnpm i -D webpack webpack-cli style-loader css-loadernpm i -S bootstrap jquery popper.js- 以上のコマンドを実行してみる
金曜日：朝:1.5h,夕:2h=3.5h
- 以下の理由で
DM機能を先に実装する。- リッチテキストの画像投稿機能についての調査した結果...
Webpackを使うためにWebpackerの勉強をして、設定をしなきゃいけない。という学習コスト高めの壁があり、結構手間がある。 - 本ポートフォリオにはvue.js導入の予定があるため、そのタイミングでリッチテキスト⇆画像を実装しようと判断。
- リッチテキストの画像投稿機能についての調査した結果...
- 判断が遅すぎたかもしれない。。。実際の業務に換算しても1.5日分だからちょっと判断が遅いか。。。
- 実際の業務じゃなかったのがせめてもの救いで,夕活以降はとりあえず
DM機能を実装することとする DM機能
- 考え方は以下を参考に
-qiita.com
- 最低限の形なら30分で出来た。
- 考え方は以下を参考に
-qiita.com
- 結果論だけど1週間で1昨日は実装できた形ww
- DBの設計とかはまとめてQiitaに執筆しよう。
