Qiita や自分のブログに GitHub のリポジトリのリンク貼ってもなんか寂しいからいい感じのカードっぽいやつ生成するやつを作ったって話です． iframe で埋め込むことができます。 だがしかし！Qiita などに任意の iframe が埋め込めるわけないジャーーーン！ ということに，だいたい完成してから気づいた orz GitHub Card 特別定義はないけど，こんな感じのを iframe で作りたかった． 作る マイフェィバリット JS 系プログラミング言語 Elm を使った． だいたい半日ぐらいかかった．GWの最終日．GW最高． リポジトリはこれ: GitHub Pages に置いたので誰でも試せる． ただし，裏では GitHub API v3 をトークンなしで叩いてる... こんな感じになる: 上がユーザーのカードで下がリポジトリのカード． Embed: の下に書いてある
Releases, Offers & More Be the first to hear about our newest content, best promotions and upcoming events. Plus get 25% off your next purchase. Newsletter Sign Up Download Accounts Your email address is your account identifier. You can create a password, or just download from the links sent via email. My Orders (Resend order emails) How We're Different Hands-on instructions Solutions to real-worl
Elm の本を書いていました。 基礎からわかる Elm 実は 2017 年時点で Amazon に存在していたのですが「出した直後に Elm がバージョンアップして紙くずになりました」という事態をどうしても避けたかったので 0.19 が出るのをひたすら待ってました。0.18 から半年くらいで出るだろうと踏んでいたんですが、蓋を開けたら１年半経ってました。実際バージョンアップで elm-make が elm make に、 elm-package.json が elm.json に、 elm-lang/* が elm/* に、toString が Debug.toString や String.fromInt に、Html.program が Browser.element に、と色々変わってしまったので、あの時点で出していたら本当に紙くずになってましたね。 内容 Elm は公式ガイドがかな
ElmとFirebaseの記事が絶望的に少なかったので書いておくことにしました。特に認証が絡んだ記事がなかったので良ければ参考にしてください。 今回やったこと 今回行ったことは単純です。 Google認証をする -> 認証が成功すればinputが出現 -> Firestoreからデータを取得inputのvalueとして埋める -> inputの値が変更されたときFirestoreの値(uidごと)を書き換える JavaScriptとのやりとり: Ports まず前提知識としてFirebaseのようにJavaScriptの基本機能ではなくライブラリでElmからその資産を使いたい場合には、Portsという仕組みを使います。Portsの基本的な使い方や概念については公式ドキュメントを読むと良いでしょう。 ドキュメントから大事な部分を抜き出しておきます。 Elm と JavaScript は、ポー
ポエムです。 自分の今の立場としては「Elm の人」ということになってるんだけど、どういう変遷でここまできて今どういうスタンスなのかっていうのはあんまり話す機会がない。だから整理のために考えてることを書いていくよ、というのがこの記事の趣旨。 非 Web の立場から そもそも自分は「Web 系」の出身ではない。新卒入社したワークスでは ERP パッケージを提供するのに画面を Web 技術で作ってるというだけで、別に SEO の順位を競ったり広告をどうという話ではないし、瞬時に画面が表示されないと離脱率が〜という話でもない。ただ、画面はとにかく複雑で設定項目とががうじゃうじゃある。 あと、学生時代に PC に触れたのが Windows で「黒画面なにそれ美味しいの？」くらいに GUI に染まりきってたというのがある。工学系の研究を効率化するために C# で GUI を作ってたら、なんかソフトウ
Elmになります。HTMLが。 そんなAtom拡張を作りました。 HTMLからElm化したい 既にコーディング済みのHTMLをElm化したいときってありませんか？ 僕はあんまり無いです。 あんまり無いんですが、 「HTMLのコードをコピペするだけでElmのコードに変身する」拡張機能があったら便利かも、と思って作りました。 Atom用です。 html-elmfier html-elmfierという名前の拡張機能です。 リポジトリ： https://github.com/jzmstrjp/atom-html-elmfier Atomのパッケージ紹介ページ： https://atom.io/packages/html-elmfier 使い方 HTMLソースの中でElmのコードに変換したい部分をコピーして、 .elmファイルにペーストするとElmのコードに変身します。 それだけです。 似たようなの
最近、複雑なJSONをElmで扱いたい的なことがあり、JSONとElmについて知ったのでまとめる。 (思いついたまま書いたので、二番煎じ以降だったらごめんなさい) 前置き ElmでJSONを扱うには とりあえず公式の、 https://package.elm-lang.org/packages/elm/json/latest/ を使いましょう。 公式でDecodeできる型 String Bool Int Float List,Array Dict null これとその他の関数を組み合わせて、あらゆる(正しい)JSONをパースして、必要な情報を取り出すことができる。 ただし、取り出すときに、取り出したい情報のkeyと型がすでにわかっていなければならない。 ##本題 ここで思いついてしまった。 「あらかじめ取り出したい値のkeyや型がわからない場合にも、とりあえずElmの世界に持っていきたい」
本記事は Elm Advent Calendar 2018 の11日目の記事です． elm-jp の Discord で突如無茶振りされたので頑張ります． elm/url elm/url は Elm 0.19 で刷新されたパッケージ群にしれっと混ざってきた URL に関するパッケージ． Browser.application でも使われているのでみなさんも頑張って使えるようになりましょう． ちなみに本記事では ver1.0.0 の elm/url を想定している． Url の型 こんな風に定義されている: type alias Url = { protocol : Protocol , host : String , port_ : Maybe Int , path : String , query : Maybe String , fragment : Maybe String } ty
ElmはフロントエンドのWebApplicationのフレームワークを内蔵したDSL言語です。シンプルながら高機能なElm言語は言語の分類として純粋関数型言語という枠組みに含まれます。そのシンプル故に快適というElmでの開発の特徴は純粋関数型言語の特性でもあるように思います。なので、他の言語をやっている人に純粋関数型言語の魅力を伝えるべくこの記事を書きました。では早速Elmの世界をのぞいてみましょう。 定義と型と値と関数 Elmでは、以下のようにして関数や値の定義をします。 -- valを123として定義 val = 123 -- strをString型の"hoge"という文字列として定義 str : String str = "hoge" -- numberを引数にとってnumberにする関数の定義 twice : number -> number twice n = n * 2 --
スナップショットテスト スナップショットテストはご存知でしょうか？ スナップショットテストはそうなって欲しい結果を何らかの形で保存しておき、それと実際の結果のdiffを取ることでテストをする手法です。何らかの形とは、画像・HTML・JSXだったりします。詳しくは以下のリンクを参考にしてください。 screenshot-tests-for-android Jest snapshot-testing どのようにreduxのreducerのテストを書くか？ なぜスナップショットテストをしたいか？ なぜスナップショットテストをしたいのでしょうか？ それはプログラム変更における影響が起きていないか、リグレッションテストを行うより早い開発段階でデグレーションを発見するためです。例えば、あるロジック対する単体テストを書いておきロジックの妥当性を担保していたとしても、そのロジックを用いて画面の描画を行う場
はじめに 既存のプロジェクトがあり Elm を導入したいというとき，全体を置き換えることはできなくても，一部だけ Elm で置き換えるということができれば良いですよね．Web Components を使って Elm を React や Angular，Vue などの既存のプロジェクトと組み合わせて使えないかなと思い，実際に組み合わせてみました． 成果物は calmery/elm-advent-calendar-2018: Elm Advent Calendar 2018 にあります． Web Components とは Web Components は，再利用可能なカスタム要素を作成し，ブラウザ上で利用するための技術，HTML Templates や Custom Elements，Shadow DOM をまとめた総称です．これまで React や Angular，Vue などのフレームワ
Elm で描画した要素の中に JavaScript のコンポーネントを埋め込みたくなることがたまにあります。この記事では、よくある例としてエディタを埋め込むサンプルを作ってみます。今回使うライブラリは CodeMirror です。 というわけで出来たのがこちら。 DEMO コード これだけだと分かりにくいですが、エディタはちゃんと Elm の中にいます。下手に DOM をいじると Virtual DOM がエラーを出しますが、ポイントさえ押さえれば特に問題ないようです。 Elm 側のコード #editor 要素を元に CodeMirror に初期化してもらいます。 CodeMirror 特有の事情としては、この要素のすぐ後にエディタの要素が挿入されるため、その場所に他の要素は置かないようにします。 view : Model -> Html Msg view model = div [ cl
Elm 0.19 で新しいオプション --optimize が導入されました。 記事を見ただけだと実際に何をしているのかがちょっとわかりにくいので説明します。 関数単位のデッドコード除去（--optimize 不要） まずデッドコード除去ですが、実は --optimize フラグをつけなくてもデフォルトで有効です。 このデッドコード除去は記事に解説がある通り関数単位で行われます。つまり、大量の関数を用意しているモジュールの一部だけを利用する場合にも、使った関数だけがアウトプットに含まれます。 レコードのフィールド名の変更 こちらは --optimize の機能です。 コード上でどんなに長いフィールド名 student.mostRecentGrade でも student.m のような短い変数名に変更します。 JavaScript で同じことをやろうとしても、 student['mostRe
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? (※アイキャッチ画像は、この記事に関係あるようで関係ないウサギ対ウナギ画像です) アドベントカレンダー『Elm2』の昨日の記事は、ababさんの『Elmで副作用を扱う仕組みCmdがとっても良い理由』でした。副作用のある部分とない部分を分離する「純粋」な言語は、作用を扱うのが面倒くさい言語だと思われがちですが、実は作用を扱うのがとても上手なんですよね。ElmのCmdは、Haskellみたいにモナモナせずにシンプルに作用を扱う方法としてElmがたどり着いた、ひとつの解答であります。 さて、Elm と PureScript は、どちらも Al
はじめに Elmでは、TEAと呼ばれるフレームワークに基づいて、イベント補足とモデル更新を行います。複数画面を持ち、複数ファイルにviewを持つアプリケーションの更新処理を一箇所で記述すると、コードの保守性が下がってしまいます。特に外部APIとのアクセス時には、記述量が多くなってしまうため、わかりにくさが顕著になってしまいます。 この記事では、こういった問題の整理と、自分なりに考えてみた対策案を考えてみます。案については「これが正解」ということではないと思うので、この手の話題の参考になれば、というところです。 なお、本記事はElm0.18ベースで書きますが、話の本質は0.19でも同じかと思います。自分の案件の0.19化が完了して気が向いたら0.19向けに書き直す、かもしれません。 それから、本記事はアドベントカレンダー4日目（序盤!）ということで、勢いだけで書いてみました。いろいろ荒いです
elm-ui CSSができなくても安心！elm-uiで簡単レイアウト！ もう上下左右中央揃えでググらない！elm-uiで簡単レイアウト！ 要素の検証はもういらない！？elm-uiで簡単UIデバッグ！ 「今まで上下左右中央揃えでググった回数を覚えているか？」 整列は大事ですよね。特に中央揃えしようと思って都度都度調べてる人はいると思います なんとelm-uiなら簡単素直に任意の要素をそろえることができるようになります では実際にやってみましょう！ 「まずはrow, columnがあった」 Ellieで実際のコードと見た目を確認してください view : Element msg view = row [ width fill, height fill, spacing 16 ] [ text "hello", text "world" ] さて、ご覧の通り左寄せの上下中央揃えで要素が表示されて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
