Help us understand the problem. What is going on with this article?

ElmでHTMLのattributeを自分で作る

More than 1 year has passed since last update.

Tl;Dr;

公式パッケージを読むと色々勉強になるぞ

TOC

  1. 動機
  2. 作り方
  3. 使い方
  4. 他の例
  5. まとめ

1. 動機

最近Elmにハマったばかりのweb初心者なのですが、netlifyで自分のホームページを公開してみることにしました
(書き始めたばかりなのとCSSがないのでまだまだです)
そこでnetlifyのformの投稿を自動で取得してくれる機能を使ってみようと思い、netlifyattributeを追加してみました
(ちなみに、機能としてはは上手くいきませんでした。それは後ほど)

netlify attribute

netlify attributeformタグに追加することで、netlifyが自動的に投稿を取得してくれるようになります。

2. 作り方

作り方は公式のパッケージのelm/Htmlを参考にしました(elmをインストールしてあれば、$HOME/.elm/0.19.0/package/elm/html/以下にあり、自分はそちらを参考にしました)

とても簡単、以下の要領でできます

import VirtualDom

netlify : String -> Html.Attribute msg
netlify str =
  VirtualDom.attribute "netlify" str

3. 使い方

Main.elm
view : Model -> Html Msg
view _ =
  form [netlify]
       [ input [ type_ "text" ] []
       , button [ type_ "submit" ] [ text "submit" ]
       ]

このviewは以下のようになります

<form netlify>
  <input type="text">
  <button type="submit">submit</button>
</form>

思った通りにできたね!やったね!!

他の例

Youtubeの登録ボタンを使用するには以下のような感じです:

dataChannelid : String -> Html.Attribute msg
dataChannelid id =
    VirtualDom.attribute "data-channelid" id


dataLayout : String -> Html.Attribute msg
dataLayout str =
    VirtualDom.attribute "data-layout" str


dataCount : String -> Html.Attribute msg
dataCount str =
    VirtualDom.attribute "data-count" str


view =
  div [ class "g-ytsubscribe", dataChannelid "UCPf-EnX70UM7jqjKwhDmS8g", dataLayout "full", dataCount "default" ] []

こうすると魔王まぐろなちゃんのYouTubeへのリンクができます
イメージ画像↓
screenshot 2019-06-11 16.00.38.png

(但しこれも諸条件があるらしく、ページが開かれた時に読み込まないと上手くいきません。コードのせいというよりは仕組みの問題だと思います)

まとめ

  • 意外とHtml.Attributeの追加は簡単だった!
  • 公式のパッケージが観れるのは本当にありがたい、色々学べる

ちなみにその近くにpropertyの追加方法等も書いてあるので木になる人は是非に...?


netlifyのformとしては上手く行かなかった

実装したのはいいものの、実際に使用してみるとどうやらきちんと機能していないようです。

Netlify comes with built-in form handling.
Our build bots do it by parsing your HTML files directly at deploy time,
so there’s no need for you to make an API call or include extra JavaScript on your site.

https://www.netlify.com/docs/form-handling/

ふむ。

Our build bots do it by parsing your HTML files directly at deploy time,

...

at deploy time

...デプロイ時にHTMLをパースして行いますとのことなので、静的ファイルに存在しないのでアウトでした。

解決策

Elmからではなくindex.html内に置こう

Cj-bc
#shellscript #vim 最近は #haskell 始めた
https://github.com/Cj-bc
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした