htmlをhamlに変換するサイトhtml2hamlを勢いで作った

こちら html2hamlf:id:rochefort:20201122143927p:plain
 
当初全く別のものを作ってたのですが、css frameworkのサイトに記載されてるhtmlの例をいちいちhaml(hamlit)に変換するのが面倒だと思い勢いで作りました。
知らないことばっかり試せたので、いろいろ面白かったです。

実装方式

フロント

Vue.js。reactでも良かったのですが、なんとなく。
css frameworkは、Vuetify
あまりこだわりはなかったのですが、vue.jsと親和性の高いものが良かったので選定。

久しぶりにvue触ったら、Vue CLI が出来ていて、さくっとテンプレ作ってくれて助かりました。

# project作成(prettier使いたかったので、manualを選択)
vue create my_project

# plugin追加
vue add vuetify
# version
vue: 2.6.12
vue/cli: 4.5.8

APIのRequestはaxios使ってささっと実装。
ちょっと調べたところだと、google analyticsどうするのかぐらいで、割とフロント周りは悩まずに出来ました。
環境変数の扱いが特殊で、そこだけははまりました。(あとで詳細書きます。)

サーバーサイド

どれ使うか結構悩んだのですが、最終的にはThe Serverless Application Frameworkを利用し、 AWS+API Gateway+Lambdaでの実装となりました。
 
serverless 自体は、コマンド打ったら勝手にデプロイしてくれてめちゃ便利ではあるのですが、API Gateway + Lambdaの辛みが結構しんどかったです。 正直、sinatraAPI作って、githubにpushして、herokuにデプロイが最短だった気がします。

特にLambdaでrubyのnative extensionsのgemを利用する方法が切ないです。
lambci/lambda - Docker Hub を使ってbuild・開発するのが定石のようなのですが、 それ自体がだるいのでlambda側でデプロイ時にGemfile.lock見てinstallしてくれよ。頼むよって感じです。 (serverless-hooks-pluginというのでhookできそう。ただ、buildに時間がかかるのでlayerを使って別管理するのが良いのかも)
この辺は忘れそうなので、詳細起こしておこうと思います。

変換処理自体は、haml/html2hamlを利用しているだけです。ありがとうございます。

# serverless version
Framework Core: 2.12.0 (local)
Plugin: 4.1.2
SDK: 2.3.2
Components: 3.4.0

ドメイン

Google Domain。設定変更もsimpleで使いやすい印象。
他の詐欺みたいな業者使ったらダメですよ!
Google Domainを利用してみた - rochefort's blog

デプロイ

環境は(glitchなどと)迷いましたが、Netlify を利用しました。
Github Actionsを使ってbuild結果を送信することで、自動デプロイの仕組みを実現しています。
Github Actionsそれなりに便利でいいんですけどね(jenkinsおじさんを思い出す)。

Google Domainを利用してみた

なんとなくdevドメイン欲しくなり、勢いで購入。
お名前なんとかみたいな詐欺みたいなドメイン業者の利用はしたくなかったのでGoogle Domainを利用してみました。

デフォルトプライバシー保護が有効

f:id:rochefort:20201121211933p:plain

Whoisの代行がデフォルトon状態でした。googleさんありがとう。
どっかの詐欺みたいな業者だと、初回設定時にこの設定を忘れると個人情報垂れ流し状態となり、変更のためには毎年料金が必要になったりします。悪質ですね。ダメ絶対って感じ。

ご参考

ドメインを購入する際に注意すべき 5 つのこと – 貴社のドメインをこの先安心して委ねることができますか? - Google Domains

Semantic UIをRails + Webpackerで使う

Semantic UI
css frameworkで使ったことないものを利用してみようと思って、installしたら少し嵌ってしまったのでメモ。

ちなみに、当初はTailwind CSS を使ってみようと思ったのですが、こっちはどうも慣れないのとclassがhtmlにつきまくってメンテしづらそうな印象だったのでやめました。

Introduction

素でyarn addするとgulpのversion不一致のエラーになったので、(対応方法はあるんだけど)一瞬諦めかけたのですが、doabit/semantic-ui-sass だとさくっとInstallできて便利そうと言うことでこちらを試してみました。

Installation

READMEに書いてはいるのですが、このままだと少し足りないので補足していきます。 https://github.com/doabit/semantic-ui-sass#ruby-on-rails-version-6

1. yarn

yarn add jquery popper.js semantic-ui-sass

これはREADMEと同じで良いです。

2. config/webpack/environment.js

const webpack = require('webpack')

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)
environment.config.resolve.alias = { jquery: 'jquery/src/jquery' }

ちゃんとしたドキュメントが見つからず、少し予想が入ってますが、 library内部で同梱しているjQueryが呼ばれるのを阻止するために resolve.alias を使って jquery/src/jqueryを呼ぶようにしています(多分)。

他のやり方としては pluginの設定の方で $: 'jquery/src/jquery', みたいにしておくのでも良いはずです。 が、冗長なので、resolve.aliasで対応。

3. app/javascript/packs/application.js

require('semantic-ui-sass')
import '../src/stylesheets/application'

jsはsemantic-ui-sassを呼び出すだけ。 cssもwebpackで管理したいので、別ファイルをimportさせます。 (ここはassets使う人もいるかもしれませんね。)

4. app/javascript/src/stylesheets/application.scss

$icons-font-path: '~semantic-ui-sass/icons';
$flags-image-path: '~semantic-ui-sass/images';
@import "~semantic-ui-sass";

cssも@importすれば良いとREADMEに書いてますが、追加でiconとfontのパス指定が必要です。

5. app/views/layouts/application.html.haml

-    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
+    = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

(一応触れておきます。)webpack用にcssの読み込むメソッドも変えておきます。