見た目はHaskell中身はMLっぽいAltJS, ElmについてのAdvent Calendarです。 Elmのタグをつけて記事を書いたことがある方を適当に招待します。
![Elmのカレンダー | Advent Calendar 2015 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e468eb5ee3a2564ed69f63f8ff901c4cb400968/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent_calendar%252Fogp%252Fcalendar-ogp-background-c24e7570f8dc39b6f4e1323cbd83d11f.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark-x%3D142%26mark-y%3D128%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzRkZGRkZGJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dD1FbG0lMjBBZHZlbnQlMjBDYWxlbmRhciUyMDIwMTUmdz05MTYmcz1hOTY5OThmZmJlNzE2NWMzNjNlMWM5MzliNDdiYTY2Zg%26blend-mode%3Dnormal%26blend-x%3D142%26blend-y%3D491%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzRkZGRkZGJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dD0lNDBpZ3JlcCZ3PTkxNiZzPTAzMjVlZGQ4MjJlN2JkNDE4NTMxMDg1YmIwYzgwZjQ5%26s%3Da78ddde40394aca098f40d18fcac2273)
http://giisyu.github.io/elm-signalCatalog/ Signalの性質がひと目で分かる、かもしれないSignalのデモを作った。 Signalによっては画面をクリックしたり、キーボードを押したり、押しっぱなしにする必要があります。 ソースコード Signalがどんな挙動をするのか、関数を通すとSignalの型がどうなるのか、どのSignalが優先されるのかとか、カタログで確認してみてください。 表示の見方 1 map : (a -> result) -> Signal a -> Signal result () ------------------------()----------- Mouse.clicks 4 3 2 関数の型 Signal a になるコード タイムライン、右から左に時間が流れている。シグナルが出る(発火する)と、その時の型が出る。(
皆さん、そろそろElmやりましょう。 Elmって何なの? Webブラウザで動くFRP(Functional Reactive Programming)言語です。 コンパイルするとHTMLやJavaScriptを吐き出します。 Elm 公式サイトに動くサンプルが大量にあるので見てみると面白いです。 どうして今やるの? これまでElmと言えば、良くも悪くも理想を追求した言語で、一般的なWebの部品(HTML/CSS/JavaScript)と相性が悪く、「まぁちょっとCanvas使っておもちゃアプリでも作るかー」くらいが関の山だったのですが、最近になってその状況は一変しました。 HTMLライブラリのサポート Ajaxなど非同期タスクのサポート JavaScriptとAPIを通じて相互接続可能 エコシステムの登場 順序はちょっと忘れましたが、0.14とか0.15で色々出来るようになりました。 im
今回、文字を入力して、リストを作ったり消したりできるアプリに、 行動毎の自動履歴保存機能をつけてみる。(ちょっとレンジの挙動が怪しいが) MVUとは? channel -------------------→ channel ↑ send+merge ↓ subscribe main = View ---------- fopdp update --------- 1 : 1 ↕ Model mainの前がmain = view <~ modelとなり、このmodelを作るのにmodel = foldp update initModel (subscribe appChannel)というふうに、全てのユーザーのアクションをまとめたChannelがあり、update内のcase式でアクションごとの処理を書く。みたいな感じに書くスタイル。 Elm使ってるとだいたいこうなる。 この形はChan
10 อันดับเกมมือถือน่าเล่น แนะนำเกมมือถือสนุกๆ ปี 2023 มีเกมไหนบ้างที่คอเกมมือถืออาจจะติดแล้วนอนไม่หลับ? มีทั้งเกมเล่นคนเดียวและเกมให้เล่นกับเพื่อน ในการเลือกโทรศัพท์หลายๆ คนคงนึกถึงกล้องเป็นอันดับแรก หรือฟังก์ชั่นต่าง ๆ แต่แน่นอนว่าหลายคนซื้อมือถือเพราะอยากเล่นเกมต้องบอกว่าเกมมือถือยุคใหม่มันดีมาก โดยเฉพาะหากเล่นกับโทรศัพท์ที่มีประสิทธิภาพดีอย่างแน่นอน 10 อันดับเกม มือ ถือ 2023 ปัจจุบันโทรศัพท์มือ
「リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべブログ ♨」という記事があり、興味深いのでElmのリアクティブプログラミングで似たようなことをやってみました。 全画面表示はこちらから。 コードは以下で、プロジェクト全体はこちらにあります。 import Text import Window import Time import Mouse import List import Signal import Graphics.Element(..) import Graphics.Collage(..) import Color(..) import Signal(Signal,(<~),(~)) import AnimationFrame -- マウスの座標をCollageの座標に変換するいつもの関数 mousePos : Int -> Int -> Int
説明 WebSocketというのは、TCPで使える(主にブラウザー用の)プロトコルです。 WebSocket(ウェブソケット)は、コンピュータ・ネットワーク用の通信規格の1つである。インターネットの標準化団体であるW3CとIETFがウェブサーバーとウェブブラウザとの間の通信のために規定を予定している双方向通信用の技術規格であり、APIはW3Cが、WebSocket プロトコルはIETFが策定に関与している。プロトコルの仕様は RFC 6455。TCP上で動く。 引用元 Wikipedia Javascriptから簡単に利用することができ、Httpに比べ低いレイテンシーでリアルタイムな通信に向いていると言われています。 WebSocketプロトコルについては次の2つのウェブサイトが参考になりました。 RFC6455 — The WebSocket Protocol 日本語訳 RFC6455の
elmでやってみるシリーズ3: xeyesっぽい目が動く。 import Mouse -- 目の輪郭を書く eyeframe x y = move (x,y) <| outlined { defaultLine | width <- 5 } <| oval 40 50 -- 目玉を書く eyeball x y = move (x,y) <| filled black <| circle 5 -- 目(=目玉+目の輪郭)を一個分書く。tは目玉の見ている方向。 eye r x y t = [eyeframe x y, eyeball ((r * (cos t))+x) ((r * (sin t))+y)] -- 目を2つ書く eyes t = collage 200 200 <| (eye 15 -20 0 t)++(eye 15 20 0 t) -- 「目の座標位置を計算する(=「マウス座標
前書き Egison のドキュメントをいろいろ眺めていたところ The 6 Programming Languages Interesting to Try を読んで Elm という言語を知り、これは面白いと思い Egison そっちのけで Elm をダウンロードしていろいろ遊んでみました。そのうちにいろいろと思うところがあったので Elm Advent Calendar に乗じて徒然なるままに書いてみることにしました。 もし Elm のことは全然知らないというならば、まずは Examples で遊んでみてください。Web 上で Elm を実行して遊べます。 純粋関数型の世界から JavaScript の世界へ Elm は Haskell に非常に良く似た文法を持っています。Haskell と同様、副作用を暗黙に生じさせない「純粋関数型」のアプローチを取っていて、コンパイラは厳密な静的型付
この記事は「Elm Advent Calendar 2014」の23日目として書きました。 今回は、作成したElmのライブラリをElmコミュニティライブラリに公開してみます。公開するブツは以前こっそりと作成してすでに登録していた「IntRange」というもので、たいしたものじゃございません*1。今回Elm 0.14に対応させた上で、elm-packageコマンドの登録手順を整理してみます。 プロジェクトを作る 何はともあれ、公開したいプロジェクトを作ります。 ディレクトリを作ってそこにcdしてelm-packageを実行。 $ mkdir IntRange $ cd IntRange $ elm-package install Some new packages are needed. Here is the upgrade plan. Install: elm-lang/core 1.0
Elmにおけるインポートの方法を説明する。本説明が対応するElmのバージョンはElm 0.14かそれ以降、ただしインポートの仕様は今後大きく変更される可能性がある(今後についての関連情報)。 他モジュールで定義され、エクスポートされた識別子(型コンストラクタ、値コンストラクタ、型エイリアス、定数・関数など)は、インポートすることで始めて使用可能となる。Elmのimportは、この点でJavaのimportと異なっている。Javaではimport宣言をしてもしなくてもFQCNを指定すればクラスパスにあるすべての識別子を参照可能であるが、Elmでは、インポートの明示的な宣言をしない限り、他モジュールの識別子を利用できない(ただし、いくつかのモジュール・識別子はデフォルトでインポートされている。後述)。 インポートの宣言をする方法は大きく分けて2つある。 Qualified Import Ope
このブログ記載のElmの記事で、動作するElmの実行プログラムをiframeで貼っていたのですが、いくつも動かなくなっていたので、動くようにしました。 ちなみに動かなくなっていた原因は2つありました。 Elmのコード共有サイトshare-elmの仕様がかわった。対処としてはリンクをはりなおしました。 elm-runtimeへのリンクが、src="http://elm-lang.org/elm-runtime.jsで参照していたのが、404エラーになるようになったため。そうなった正確な理由は不明ですが、バージョンに依存するはずなので、いずれにせよこの絶対リンクが上手くうごかなくなるのはあきらかでした。対処としてはgithub-page上の固有のものにリンクをはるようにした。 たいへん失礼しました。以下のとおりです。今はすべて動くはずです。 「プログラムでシダを描画する」をelmで描画する -
今回は、Elmを通して、FRPに対する個人的な理解、そしてVirtual DOMがFRPに合っているということを述べていきます。 関数プログラミングはどのように「状態」を扱うのか? 「Functional Reactive Programming」とあるように、FRPは関数プログラミングのパラダイムの技法だと思います。なので、関数プログラミングについてまず、「状態」について考えてみたいと思います。 状態とは何か? まず、状態とは何でしょうか? CTMCPによると、 状態(state)とは、必要とされる計算の途中結果を含む、値の時系列である とあります。関数プログラミングのような宣言的なプログラミングは、そしてこの書籍では暗黙的状態を扱い、オブジェクト指向のような命令的なプログラミングは明示的状態を扱うと述べています。 値と、オブジェクトと、「状態」 関数プログラミングは、「値」を扱います。
昨日に引き続き失礼します! Elm標準ライブラリであるcoreには結構多くのモジュールが存在しています。 Javascriptに同じ様なコンテナが存在するため、あー、アレ使っているんだろうなーと思いきや、関数型言語であるElmとの相性のためか、イミュータブルなデータ構造を定義しているモジュールも多いです。 各モジュールで定義されているデータ型とその内部実装について見ていきましょう。 直和型 基礎知識としまして、Elmにおいて直和型は以下の様にctorフィールドを持つObjectとして表現されます。 elmにおける、
Elmでやってみるシリーズ7: elm-htmlでTwitter Bootstrapを適用。 つい先日、「Blazing Fast HTML」と銘打って、elm-htmlライブラリが公開されました。これはElmでDOMツリーを構築・更新するための低レベルライブラリであり、Virtual DOMという技術を使っているので非常に画面更新速度が速いそうです。SPA(Single Page Application)ではDOMの更新速度が重要になりますが、Elmは純粋関数型・イミュータブルデータなのでそのことを利用してさらに効率良く実装できるそうな。 従来、ElmはCSSとの連携はあまり重視されておらず、「ElmはCanvasを使ったアニメーションが得意」とされてきましたが、現代的な見た目のHTMLベースのアプリも自在に開発できるようになる、という道筋の第一歩なわけです。まだ未成熟ですがね。 個人的
Elm触ってみると面白くてハマりまして、この記事もそんな一人による紹介記事になります。 この記事が一番ストック数が多いので、v0.17になったことに合わせて書き直しました。(2016年5月18日) Elmとは ・コンパイルすると、HtmlやCSSやJavascriptになる。 Elmとは、コンパイルするとHTML、CSS、Javascriptを生成するプログラミング言語です。 ・Elmアーキテクチャで書ける。 v0.17から正式にElmはフレームワークを兼ね備えた言語になりました。 後述するElmアーキテクチャというパラダイムでブラウザアプリケーションを書きます。 ・Elmはシンプルで小さな関数型の言語です。 ElmはHaskellやいろんな関数型言語を参考にして、とても小さく強力な構文を持っています。 ・学習が始めやすいです。 かなり学習のしやすさや学習曲線を大事にしているのでちょっと見
ここ数日、Elm触ってみていますが、とても楽しいですね!! Elmの現バージョンは0.13となっておりますが、まだまだ発展途上でバグを踏むこともしばしば有ります。 私もバグを踏んだので、issue立てるために開発版を使って確認しようとしたところ、コンパイラをどうやってコンパイルするのかすらわからない……!みたいな状況になったりしたので、作業ログと(まだ殆どCHANGELOG書かれてないので)気付いた変更点などについて書かせていただきます。 どのあたりがElm-0.14での確定情報となるのかイマイチわかりませんが、現時点で使うならばこの様な感じです。 コンパイラなどのコンパイル 2014/12/11 03:20 追記 記事から6時間ほどでElm-0.14が正式にリリースされ()、公式サイトからバイナリがダウンロード出来る様になったのでそれを使いましょう! 1週間前と様変りしている感じなので、
はいはい。ども@nobkzです。 Elmが楽しいことを伝えられそうな記事を書きたいかなーとか思っています。 Elmでランダムウォークやった話をしまつー。 ランダムウォークとは? 一歩一歩、ランダムに、歩くことを言います。これを、Elmでシュミレートしました。 Elmでランダムォーク walk関数を作る まず簡単に、純粋な関数を作ります。walk関数は、数字0~3と、(Float,Float)を取り、(Float,Float)を返す関数として実装します。 walk choice (x,y) = if choice == 0 then (x+1,y) else if choice == 1 then (x-1,y) else if choice == 2 then (x, y+1) else (x,y-1)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く