Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@torifukukaiou(Awesome YAMAUCHI)infukuoka.ex：福岡Elixirコミュ

「LiveView JP#11：はじめてのLiveView…piyopiyo.ex投稿SPAを題材に」レポート

Last updated at Posted at 2022-10-26

Advent Calendar 2022 164日目1の記事です。
I'm looking forward to 12/25,2022 :santa::santa_tone1::santa_tone2::santa_tone3::santa_tone4::santa_tone5:
私のAdvent Calendar 2022 一覧。

はじめに

Elixirを楽しんでいますか:bangbang::bangbang::bangbang:

2022/10/25(火)は、「LiveView JP#11：はじめてのLiveView…piyopiyo.ex投稿SPAを題材に」が開催されました。
この記事は、イベントのレポートです。

Phoenixとは、ElixirでWebアプリケーション開発を楽しめるフレームワークです。
LiveViewの説明は、「LiveViewとpiyopiyo.exのススメ」をご覧になってください。

Let's get started!

定刻通り19:30に、はじまりました〜

資料

この記事で一番大事なところです。
ポイントです。
繰り返し書いておきます。
この記事で一番大事なところです。

LiveViewとpiyopiyo.exのススメ

piyopiyo.exポータルチュートリアル～感想投稿サイト構築を例にLiveView+tailwindcssの基礎を学ぶ～

elixirと見習い錬金術師 Discord

LiveViewとpiyopiyo.exのススメ

@nako_sleep_9h さんが、以下のことを丁寧に説明くださっています。

  • LiveViewとはなんぞや
  • SPA（Single Page Application）ってなんだっけ？
  • piyopiyo.exってなに？

感動の筆で書き下ろされています！
必読の書です。

以下、いくつか画面キャプチャを載せておきます。
全編は、コチラからご覧になってください :rocket::rocket::rocket:

スクリーンショット 2022-10-25 19.47.54.png

スクリーンショット 2022-10-25 19.48.37.png

piyopiyo.exポータルチュートリアル～感想投稿サイト構築を例にLiveView+tailwindcssの基礎を学ぶ～

@tuchiro さんが説明してくださいました。

途中、質問タイムなどがありました。

０章～できるだけ楽して環境を準備する～

特に印象的だったのは、開発環境の準備です。
初級者泣かせの一番詰まりやすいところです。
ここを越えないと楽しめないのです。

スクリーンショット 2022-10-25 20.06.56.png

紹介されていたのは、WebIDE環境 Replitです。

１章～コマンド一発でWebアプリケーションを作ってみる～

開発環境の準備が無いのでチュートリアルに沿ってあれよあれよという間にLiveViewを使用したSPAアプリケーションが出来上がっていきました。
Phoenixアプリを生成してLiveViewを導入し、MVCの実装を済ませました。

２章～ライブラリを使って簡単にtailwindcssを導入する～

ライブラリを使用してTailwindCSSとdaisyUIをあてがいました。

３章～トップページをイイカンジにする～

トップページのロゴをLiveView JPに変更したところ、引用元のpiyopiyo.exポータルのポップなデザインと絶望的に合わないので、背景色や文字色で調整を加えました。
image.png
(ちなみに二次会ではこちらのLiveView JPの新ロゴは某お菓子のキョ〇ちゃんが一部モチーフに使われているという話をコッソリ...あくまでコッソリと聞かせてもらいました。)

４章～トップページから画面遷移する機能を追加する～

「全部の感想を見る」のエンドポイントに遷移したときトップページを表示するよう、mount/3時にパスのパラメータを受け取ってlist_messageを呼ぶように引数を追加しました。

５章～faviconとページタイトルを設定する～

faviconとタイトルの調整をして、完成となりました。
こちらのリポジトリから各章ごとの完成した断面に合わせてリリースがなされています。

お詫び :pray::pray::pray::pray::pray:

すみません :pray::pray::pray::pray::pray::pray_tone1::pray_tone2::pray_tone3::pray_tone4::pray_tone5:。
本当に、 すみません :pray::pray::pray::pray::pray::pray_tone1::pray_tone2::pray_tone3::pray_tone4::pray_tone5:。
所用で20:25くらいに退出しました。
しかも無言で退出しました。繰り返します。無言です。

以降のことはわかっていません。
ぜひぜひ編集リクエストをください。

@Alicesky2127 さんから編集リクエストをいただきました。
ありがとうございます！

Twitter

Twitterを拾っておきます。

Wrapping up :lgtm::lgtm::lgtm::lgtm::lgtm:

Enjoy Elixir:bangbang::bangbang::bangbang:
$\huge{Enjoy\ Elixir🚀}$

2022/10/25(火)に開催された、「LiveView JP#11：はじめてのLiveView…piyopiyo.ex投稿SPAを題材に」のレポートを書きました。

LiveView JPでは、初心者に優しいコンテンツ、イベントを今後もたくさん提供していくとのことです。

$\huge{ワクワク}$
です。

以上です。

  1. @kaizen_nagoya さんの『「@e99h2121 アドベントカレンダーではありますまいか Advent Calendar 2020」の改訂版ではありますまいか Advent Calendar 2022 １日目　Most Breakthrough Generator』から着想を得て、模倣いたしました。 ↩

8
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?