Ellieで入るElm入門

Learn Elm 0.19 through ellie-app.com and problems

簡単な課題をElmで解いて、Ellieに載せていくという方法でElmの勉強をする、というアイデアです。
Ellieはsaveすると、urlができるので問題と解答のセットをはてなに書いておけばいつでも見ることができます。

やってみよう。

ハローワールドを表示する

Write a program to print "Hello world" without using Elm Architecture. Solution is here => https://ellie-app.com/5PbTQXnR23wa1

Browser.sandboxを使ってハローワールドを表示する

Write a program ot print "Hello world" using Elm Architecure. Solution => https://ellie-app.com/5Pxh2BFHDMca1

フォントサイズを指定する

How to change the font size => https://ellie-app.com/5PT2rD3dwjma1

1から100000の間のランダムな数字を表示する

Show a random number between 1 and 100000. => https://ellie-app.com/5PCxLNQcgxDa1

ランダムな数字を作成して素数かどうか判断する

Generate a random number and see if it is a prime => https://ellie-app.com/6MggWMZNFw5a1

名前を入力するとハロー++名前 !!! で答える

Write a program to answer by Hello , yurname!!! => https://ellie-app.com/5PJvSjxtkJPa1

ハローワールドのバックに色をつける。文字をh1にする。中央揃えにする

Put background-color, h1 size, font-color, text-align to center , etc. => https://ellie-app.com/5PKBH2dX79va1

文章を書く。たとえば、今日はいい天気です。を10回続けて書く

Write a paragraph where texts are wrapped. => https://ellie-app.com/5PLxYvHWhJFa1

上下左右センタリング

Draw a blue box , text skyblue, centering X, Y => https://ellie-app.com/5PSNpNngPYna1

数当てゲーム

Simple number guessing game => https://ellie-app.com/5YMYFRVGGTZa1

しりとりゲーム

Shiritori , a Japanese word game => https://ellie-app.com/6MDXpy62q29a1

SVGのサンプル。rectとcircle

SVG sample, rect and circle => https://ellie-app.com/5PTPhjhTKHNa1

SVGのサンプル。polygonやpathなど

SVG shapes rect, circle, ellipse, polygon, line, polyline, polygon => https://ellie-app.com/5RRbrHYHC4Xa1

SVG viewBoxの使い方

Understanding SVG viewBox and positioning => https://ellie-app.com/5Q74fMkFV8ra1

SVG fill, stroke, strokeWidthなどの使い方

How to use fill, stroke, strokeWidth, etc => https://ellie-app.com/5Q9sMv77RV8a1

SVG text_, textAnchorの使い方

How to use text_, textAnchor => https://ellie-app.com/5QFR4ZDQtCra1

SVG ベジエ曲線の描き方

How to draw bezier lines =>
https://ellie-app.com/5Twh3LSdD2Ga1
https://ellie-app.com/5TwhNGHXVSWa1
https://ellie-app.com/5TwjxkPVHnza1

SVG 弧の描き方

How to draw arcs =>
https://ellie-app.com/5Twp2Pw5T4ta1
https://ellie-app.com/5TwptpJ9N4Ca1
https://ellie-app.com/5TwpRZ27hypa1

SVG fillとstrokeの使い方

SVG fill and stroke => https://ellie-app.com/5Tw3W3Wb5zFa1

SVG stroke-linecap, butt, square, roundの使い方

SVG stroke-linecap, butt, square and round => https://ellie-app.com/5Tw6R7XsmS5a1

SVG stroke-linejoin, miter, round, bevelの使い方

SVG stroke-linejoin , miter, round and bevel => https://ellie-app.com/5Tw9yvcqRWca1

SVG stroke-dasharray(点線)の使い方

How to use stroke-dasharray for dotted line => https://ellie-app.com/5TzcKnRcf6Sa1

SVG style attributeの使い方

How to use style attrobite => https://ellie-app.com/5TCnpnWNvhFa1

SVG linearGradientの使い方

How to use Linear Gradient => https://ellie-app.com/5TMTXFYx9wwa1

SVG radialGradientの使い方

How to use Radial Gradient =>
https://ellie-app.com/5Z6p82PsZJ9a1
https://ellie-app.com/623ngzqtV6ba1
https://ellie-app.com/623pctB58xTa1

SVG patternの使い方

How to use Pattern =>
https://ellie-app.com/623PT2J8Vyfa1
https://ellie-app.com/625KNHSs3hLa1
https://ellie-app.com/625LtxZmsq3a1

SVG textの使い方

How to use text =>
https://ellie-app.com/625VH9CyYBva1
https://ellie-app.com/628fRrSYMZca1

SVG transform, translate, rotateの使い方

How to use transform,translate, rotate =>
https://ellie-app.com/62hTXwYJM6fa1
https://ellie-app.com/62nwQn4wcgDa1

SVG clipPathの使い方

How to use clipPath => https://ellie-app.com/63qL6TPZCpFa1

SVG maskの使い方

How to use mask => https://ellie-app.com/63qJSgLmgtxa1

サイコロを一度に2個振る(svg画像つき)

Two Dice at a time with svg => https://ellie-app.com/63BmX88rS5Fa1

SVG styleの使い方

How to use style =>
https://ellie-app.com/63GH2kHVnZCa1
https://ellie-app.com/63GJbXfrrxba1

SVG アイコンの大きさを変える

How to scale, resize svg icon => https://ellie-app.com/6cDD8ZkFJNqa1

四則演算をする

Arithmetic Operators => https://ellie-app.com/647NBR7YSW9a1

関数を作って使ってみる

Make a function and use it => https://ellie-app.com/648Ddz7fPCQa1

カウンタープログラム リセットボタン付き

counter program with addtional reset button => https://ellie-app.com/64JDgZZnDgNa1

文字列を逆順にする

Reverse the contents of a text field => https://ellie-app.com/64LCGXVP5jWa1

formを使って名前とパスワードチェック

form to validate name and password => https://ellie-app.com/64N9csz2R6ka1

直角三角形の斜辺の長さを求める

Calculate the hypotenuse of a triangle => https://ellie-app.com/64NKb35nPmwa1

単位変換 摂氏、華氏、インチ、メートル

Convert Fahrenheit, Celsius, inches, meter. Solution to elm guide exercise => https://ellie-app.com/657KBFDSFrsa1

Result typeの使い方

How to use Result type => https://ellie-app.com/65r8bCvNGzxa1

SPA スケルトンを作ってうまく行ったのですが、ellie-app.com上では動かない

I made a SPA Single Page Application skeleton. It won't work on ellie-app.com
but it worked on local server and github.io => https://kalz2q.github.io/elm-examples/index.html
Source file is https://github.com/kalz2q/elm-examples/src/spa003.elm

Ellieでflagの実験 javascriptからelmにデータを送る

send data to elm from html through flag => https://ellie-app.com/6th9S6qYJqFa1
send data and time to elm through flag => https://ellie-app.com/6tncDw6HBNya1

Ellieでportの実験 elmからjavascriptにデータを送る

very very simple example of port => https://ellie-app.com/6sTFfkTbbXKa1

LocalStorageを使ったTodo

Todo application using LocalStorage with Remove buttons => https://ellie-app.com/6vGQCyLhkP6a1

Firestore(Firebase)を使ったTodo

Todo application using Firestore(Firebase) , flags and ports => https://ellie-app.com/6D8hKZwjy5ja1

マス目を作るカウンター

Kind of n x n board maker => https://ellie-app.com/6LMsMM6HKD3a1

ClickMeおもちゃ

Toy to click => https://ellie-app.com/6LQd3wQbzK8a1

MouseHoverおもちゃ

Toy to simulate mouse hover => https://ellie-app.com/6LWgD5x8p9Za1

素数判定機

Enter a number and see if it's a prime number or not => https://ellie-app.com/6M9JWSz3MRza1

箱を並べる

色付き聖杯

ボタンを押すたびに文章が長くなるボタンを作る

文章の中に他のサイトに飛ぶhrefを入れる

一度に10個のランダムな数字を得る

Get 10 random numbers at once

デジタル時計

カウントダウン

三択クイズ

おみくじ

4clojure problems

99 lisp problems

zen problems

TodoMVCをEllieでFirebaseで動かす

Elm 0.19でEvanczさんのTodoMVCを動かしてEllieに載せました

ソースとデモはこちら

https://ellie-app.com/6K25LFpDjFGa1

Firebaseはテストモードでauthもsecurityもしていないので、だれでも読み書きできて、誰でも見れます。

壊せます。

使ってみて下さい。

Firebase(Firestore)について

元のEvanczさんのはlocalStorageベースなのをfirebase.google.comのデータベースFirestoreを使う形にしました。

ElmとHtmlとのやりとりがキーをタイプするたびに発生する仕組みなので、これでいいのかなぁ、と思はないでもないですが、Evanczさんがそうしているのでこれはこれでとりあえずそのままにしています。

前回作ったのはAddとかDeleteとかのたびに書き換えだったのですが、今回のはデータのやりとりが多いのでユーザー数が増えたら課金されてしまうかもしれないので、その時は書き換えます。

ElmプログラムとHtml

Elmプログラムの方は触っていません。

Htmlは別ファイルだったcssをheadに入れていれました。headが巨大になってしまって本体が下の方になって読みにくいですね。すいません。

Firebaseの設定と関数はlocalStorageと違うので試行錯誤しました。ドキュメント少ない。動いたからいいけど。

ElmでTodoアプリを作る

ElmでTodoリストを作りました。

ソースとデモはこちら。

https://ellie-app.com/6D8hKZwjy5ja1

(Qiitaに載せたのと同じものです)

簡単に解説します。

Addで追加されて、Deleteで削除します。 ということは一応CRUDが実現できているのかな。

データベースにFirebase(Firestore)を使っていて変更は保存されて、次回開いた時(他の人でも)反映されます。 使ってみて下さい。

データベースとのやりとりはHtml経由でFlagsとPortを使っています。

起動時にFlagsを経由して全件読み込み、変更はAddやDeleteがあるたびに全件updateしています。 なのでデータベースとは完全同期なハズ。

Html(Javascript)で起動時にデータベースを読み込むことと、ElmにFlagsでデータを渡すことのタイミングをとるのが思いつくまで試行錯誤しました。

読み込みも書き込みも両方ともPortsで、というのは無限ループになってしまうと思う。 けど、チャットとかを作るには考えなければいけませんね。これからの課題。

HtmlとElmのソースをコピペしてローカルで運用することもできます。 Firebaseは自分で設定してHtmlに反映してください。

今回ソースとデモをのせた、Ellieという環境は左側にソース、右側で実行結果がでますので、学習環境として最高だと思います。

実際に動くプログラムほど説得力のある教材はないと思う。 動いてナンボだよねー。

壊しても元のは再読込すれば元に戻りますので、

壊して学ぶプログラミング!!

ができます。

Ubuntu 19.04とNvidiaのグラフィックボード

えっと。結論から先に言うと、ubuntu 19.04でnvidiaのグラボが使えています。

nvidiaのグラボが刺さっていると、19.04はクリーン・インストールでも、18.04や18.10からのupdateでも起動ができなくなります。

起動ができなくなってからの解決方法は、一旦電源ボタンで強制終了して、再度起動します。

起動時にShiftの連打、ubuntu advanced -> reocovery mode -> root -> vi /etc/gdm3/custom.conf -> uncomment WaylandEnable=false -> save&quit resume

で起動できるようになる。

次回からは普通に起動します。

これから19.04にしよう、という人は

18.xxの段階で、sudo+自分使っているエディターで /etc/gdm3/cumstm.confのWaylandEnable=falseの行をコメントでなくする(行頭の#を取る)。

19.04でクリーンインストールする人は、クリーンインストールした直後にviで同様のことをしてから、ubdateをかければ大丈夫だと思います。

Nvidiaのグラボのドライバーはソフトウェアとアップデートの追加のドライバーで入れるのがいちばん簡単だと思います。

Nvidiaのグラボが使えているかどうかはgoogle mapで3Dでグリグリできるかどうかでわかると思う。

viはvimが使えれば使えると思う。
今回の用件だけで言えば、
矢印キーで該当の場所までカーソルを移動する。
xキーで#を削除。
:(コロン)wqで保存と終了。
です。

もうすぐ19.10になりますが、楽しみですね。

そそ、起動時にbashの.profileがなんとかというエラーはエラーメッセージが意味不明なので

mv .profile profole_old

として退避させておけば大丈夫です。次回からはエラーが出なくなる。

Dosparaなどで数年前の高級ゲーミングPCが中古で3万円前後で手に入ります。これをUbuntuにして使うのがいちばん安くて快適なパソコン環境だと思うのですがいかがでしょうか。

韓国国債価格上昇の理由

韓国経済 国債上昇 金利下落 株安 通貨安

説明して。

なぜ通貨安でインフレになって債権が下落しないのか。

通貨安でインフレになって債権は下落しているがそれはウォンの話であって、韓国の国債はドル建てなので下落しない。ということか。

この現代、かつてのように国家が破産することはあり得ないという風にマーケットが見ているか、デフォルトまでにはまだ時間と手間がかかるので、ギリギリまではドル建て国債は上がり続けるということなのか。
例によってババ抜きなのか。

韓国は格付けが非常に高く、日本よりも高いので、ドル建て債権は発行すれば飛ぶように売れる。なので、国債を発行してそのドルでウォンを買い支えることができるし、対外投資して利ざやを儲けることもできる。

それよりなにより通貨安により貿易環境が劇的に有利になってるので、期せずして好況が訪れようとしているのかもしれない。

まあ、そう都合よくマーケットが動いてくれないだろうから、やはり株安、通貨安だけど期待ほどは通貨が安くならずデフレが進行し、ドル建て、ウォン建てに限らず国家経済は借金が膨れ上がっていく。デフォルトへの道ではあるが、韓国より経済が脆弱な国は多数あるので、韓国は安全な方なのだろう。

まあ、少なくともマーケットを見る限りでは誰も韓国がデフォルトすると思っていないということだと思います。

ということは文在寅はバラマキ政策を続ける余裕があるということで、デフレの時には財政出動が必要なことは経済の常識なので思い切って、ベーシックインカムとかやってみたらいいと思う。

そしたら輸出に頼らずに需要ができて世界が喜ぶ。

どうでしょうか。

韓国はこれからどうなるか

韓国はこれからどうなるか。今の考え。

経済崩壊して左翼独裁政権が成立して、国民は一生懸命働いて良い国になる。

反日は変わらないので日本には不愉快だし危険だが、難民大量発生とか対馬に攻めてくるとかはないのでラッキーかもしれない。

つまり、北朝鮮は中国側左翼独裁国家、韓国は自由陣営側左翼独裁国家

ヨーロッパの国々が自由陣営側左翼国家で問題なく運営できているし、日本もアメリカも昔の感覚で言えば左翼国家だろう。

独裁か民主主義という観点からは、自由にものが言えるのは世界でアメリカと日本とイギリスくらいなのと、そもそも民主主義が機能している国などない。

どうでしょうか。

追記

これだけだとあとで自分で読んでなんだかわからなくなりそうなので、説明を加えておきます。

韓国の大統領は5年で次の期はないので、文在寅の次の大統領が保守になるか革新になるかですが、反日を推し進めることによって支持率を維持できるので、過去は保守も革新も政権末期は反日が政策の目玉になる。 そのような中で選ばれるので文在寅以上に反日親北の候補が出れば一気に人気をさらってしまう。
韓国民も自殺行為だとわかっていてもそうせざるを得ない心理状態になる。
特に今回の場合、人気のある文在寅が敵としているのが日本なので、親日方向にカジが切られることは考えられない。

直接投票で大統領を選び、選ばれた大統領が独裁的な権力を持つ韓国の仕組みが民主主義上たいへん危ない仕組みなのでそれを正さないと左傾化ポピュリズム化してしまい止める手立てがない。

ただ政権をとってしまえば決して無能な国民ではないので、というか優秀な人たちなので、安くなった通貨を利用して国家を立て直すと思います。
具体的には国家として正しく借金をして、必死に国民を教育、労働に駆り立てて立ち直ると思う。

北朝鮮が飢えているので経済的に失敗していると思いがちですが、実際にはそこそこ生産性を維持し、食べ、ミサイルまで飛ばしている。
韓国も同じことができないわけはないし、条件的にははるかにいい場所にいる。
過去の経済危機からの立ち直りが証明していると思います。

それでうまく行ったら、5年ごとの大統領選挙は止めて独裁国家にしてしばらく様子をみることになる。
米中対立のなかでアメリカ側についていればそこそこの支援は得られる。
サウジアラビアみたいな位置になるのかな。
独裁が安定すれば反日に血道を上げる必要はないので、対日関係も多少はよくなるけれど、主義主張が変わるわけではないのでお互い適度なおつきあいになる。

VSCodeで選択範囲の改行を一度に削除する方法

VSCodeで選択範囲の検索対象を一度に削除する方法

1.マウスやキーで範囲を選択する

2.Ctrl-Hで検索置換を呼び出す

3.ファイル全体の検索対象が対象となっていたらAlt+Lで選択範囲内の数だけになる

4.選択範囲内だけが対象になっているのにAlt+Lを押すとファイル全体になってしまうので、Escで抜けて初めからやりなおし

5.目的の検索対象が選択されていることを確認して、すべてを置換するアイコンを押す(Ctrl-Alt-Enterでもよい)

注意 Alt-Lがトグルスイッチで、前回の設定が次回に影響するので動きが変。納得がいかない。自動化できない。
まあいいか。

そそ、検索置換で検索方法を正規表現にして、\nと書くと改行が検索される。置換の欄を空白にすることによって削除です。