Laravelチュートリアル改 をしたった@大人プログラミング部

アプリ画面例1:light Englishモード http://dodo.teffs.net/

今プラスさんの大人プログラミング部(もくもく会)で、hypertextcandy.com さんのチュートリアル『入門 Laravelチュートリアル』(1)から(11)を行いました。

とても分かりやすいチュートリアルに感謝しかありません。

チュートリアルの結果を発表するにあたり、アプリに手を加えましたのでその内容をご紹介します。

改:チュートリアルアプリからの変更内容

アプリ画面例2: dark ひらがな モード
  • 画面色をマテリアルデザインを意識したものに変更(アプリ画面例1)- 季節的にミカンとリンゴ( Orange & Green Apple)をイメージ。柿と緑茶かも?!渋い。
  • 言語切り替え機能付加 – 日本語 にほんご English – にほんご(ひらがな)は簡単な言葉&和語にこだわってみました。
  • ダークモード切り替え機能付加(アプリ画面例2) – cssファイルの切り替えで対応。 🌄 🌙絵文字も使ってみました。
  • フォルダ編集、削除機能の付加 – 基本機能なので追加しました。
  • タスク削除機能の付加 – 基本機能なので追加しました。
  • フォルダ数、タスク数の制限機能の付加 – 基本機能なので追加。上限に達すると作成ボタンが表示されなくなるだけです。
  • メイン画面のボタン配置変更 – フォルダやタスクの作成ボタンの位置をパネル上部から下部に変更しました。本格的なアプリとするなら、UIデザインは検討の余地が大いにあると思います。
  • 公開用デモ版対応
    デモアカウントのみログイン可能としました。
    編集やメール送信の制限のため、注意書き追加と送信ボタンを無効化しました。
  • flatpickrの日英言語対応とダークモード対応 – なりゆき上の変更です。
  • 専用urlに割当て – Heroku のサブドメインでも良かったのですが、簡単に行えるとのことなのでやってみました。teffs.jp はネームサーバーの設定変更が行えず、取得済であった teffs.net のサブドメインとしました。 http://dodo.teffs.net/

技術ポイント

今回のチュートリアルで学んだことを羅列します。(順不同)

  • Laravel – ウェブアプリケーション・フレームワークの概要が分かりました。
  • PHP class – クラスを使ったPHPプログラミングは初めてでした。
  • Docker – Laradock導入により触りました。
  • Composer – 同上。
  • Laradock – 簡単かと思ったら、意外に手間取りました
  • File/Directory permissions – 基礎ですよね。分かっていたんですが、この手のことでこれ以上悩みたくありません。
  • Bootstrap – CSSのフレームワーク。良くできています。cdn版を使っています。
  • Bootflat – Bootstrapの補助的フレームワーク。良くできています。cdn版を使っています。
  • Flatpickr – カレンダー形式での日付選択ライブラリ。日本語にも対応しています。
  • Material.io – 春にAndroidの勉強をした甲斐がありました。
  • git – ようやく使えるようになりました。
  • Heroku – サービスの公開が簡単。素敵なサービスです。
  • Mailtrap.io – デバッグ用 smtpサービス。
  • Sendgrid – smtpサービス。
  • Sublime Text – テキストエディタ。ATOMに乗り換え予定。
  • mysql – 開発環境用DB。Version 8.0以降は認証方式が異なるのでひと手間かかります。
  • phpMyAdmin – mysql管理用アプリ。
  • postgreSQL – 公開サーバー(Heroku)のデータベースは postgreSQLです。
  • SQL lite – チュートリアル中でちょっとだけ使いました。これはこれで良し。
  • Qiita.com – 掲載されている記事には何度となくお世話になりました。
  • DEV.to – 多言語対応の時に見つけたサイト。世界の広さが実感できます。
  • GitHub.com – 実はまだ使いこなせていません。
  • 設計手順 – チュートリアルではザーッと流していましたが、設計って非常に大事です。設計がきちんとされていると実装作業が捗りますね。
  • 記録のとり方 – 最初は Google Keepにメモっていましたが、開発環境に専用ディレクトリを用意し、そこにテキストメモを貯めていくことにしました。

心残り

  • cssフレームワークのBURMAも触ってみたかった。
  • SNSアカウントでのログイン機能も実装してみたかった。
  • PWA化してみたかった。
  • 画像のアップロード機能も実装してみたかった。
  • 本格アプリ化してみたかった。(設計からやらねばいけません。)