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

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

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

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

箱を並べる

四則演算をする

色付き聖杯

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

絵(img)を表示する

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

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

Get 10 random numbers at once

デジタル時計

カウントダウン

サイコロを一度に3個振る

数当てクイズ

三択クイズ

おみくじ

4clojure problems

99 lisp problems

zen problems

Ubuntuで音がでない(解決)

わからないまま解決したので記事にするのはためらわれるのですが、とりあえず備忘ということで書いておきます。

環境はUbuntu 19.04。

いつものように自動でアップデートして、再起動したら音がでない。NetflixYoutubeも声がでない。

設定のサウンドの出力のところからライン出力・内部オーディオが消えている。
ダミー出力になっている。

テストボタンを押してテストをしても音がでない。

あちこち検索して、

sudo apt remove timidity -y

して再起動したら音が出るようになって、設定のサウンドの出力のところにもライン出力・内部オーディオが現れました。

timidityを入れたのはfrescobaldiでmidiファイルの音を出すためだったので、これがどうなったかを調べる必要があります。

また追記します。

追記

lilypondでmidiが鳴らなくなっていたので、

sudo apt install timidity

したら、無事音がでるようになりました。

NetflixYoutubeの音もちゃんと出ます。

めでたし。

Mac miniでウィンドウズキーボードでVSCodeを使う

Mac miniにウィンドウズのキーボードつないだ場合のキーバインド

=>のあとに付け足しました。
ほとんどはいままでCtrlを押していたのをウィンドウキー(Cmd)に読み替えるだけで同じ動作になりますが、一部違うものがあるので注意が必要です。

一般

Ctrl+Shift+P, F1 コマンドパレットを開く=> Cmd+Shift+P, F1
Ctrl+P 任意のファイルに移動(クイックオープン)=> Cmd+P
Ctrl+Shift+N 新規ウィンドウ=> Cmd+Shft+N
Ctrl+W ウィンドウを閉じる=> Cmd+W
Ctrl+, ユーザー設定(Settings) => Cmd+,
Ctrl+K Ctrl+S キーボード・ショートカット=> Cmd+K Cmd+S

基本編集操作

Ctrl+X 行削除=> Cmd+X
Ctrl+C 行コピー => Cmd+C
Ctrl+Shift+K 行削除=> Cmd+Shift+K
Alt+Up/Down 行を上下に動かす=> Alt+Up/Down
Ctrl+Enter 行末に改行(カーソルは下に移動)=> Cmd+Enter
Ctrl+Shift+Enter 行頭に改行(カーソルは上に移動)=> Cmd+Shift+Enter
Ctrl+Shift+\ 対応するカッコにカーソル移動=> Cmd+Shift+] <= 違うので注意!!
Ctrl+]/Ctrl+[ 行をインデントする=> Cmd+[/Cmd+@ <= 違うので注意!!
Home/End 行の先頭、末尾に移動=> Home/End
Ctrl+Home/End ファイルの先頭、末尾に移動=> Cmd+Up/Down<= 違うので注意!!
Ctrl+Up/Down 画面を1行ずつスクロールする=> ない!!
Alt+PageUp/PageDown 画面を1ページずつスクロールする=> PageUp/PageDown
Ctrl+Shift+[/] 折りたたみ/展開 => Cmd+Alt+@/[
Ctrl+K Ctrl+[/] 再帰的に折りたたみ/展開=> Cmd+K Cmd+@/[
Ctrl+K Ctrl+0 すべて折りたたみ => Cmd+K Cmd+0
Ctrl+K Ctrl+J すべて展開=> Cmd+K Cmd+J
Ctrl+K Ctrl+C 行コメントの追加=> Cmd+K Cmd+C
Ctrl+K Ctrl+U 行コメントの削除=> Cmd+K Cmd+U
Ctrl+/ 行コメントの切り替え=> Cmd+/
Ctrl+Shift+A ブロックコメントの切り替え=> Alt+Shift+A
Alt+Z 折返しの切り替え=> Alt+Z
Ctrl+Z アンドゥやり直し元通りにする=> Cmd+Z
Ctrl+Shift+Z リドゥやり直しのやり直し=> Cmd+Shift+Z

言語編集

Ctrl+Space 候補表示=> Ctrl+Space
Ctrl+Shift+Space パラメーターヒント表示=> Ctrl+Shift+Space
Ctrl+Shift+I ドキュメントの整形=> Alt+Shift+F
Ctrl+K Ctrl+F 選択範囲の整形=> Cmd+K Cmd+F
F12 定義へ移動=> F12
Ctrl+Shift+F10 定義を覗く=> Alt+F12
Ctrl+K F12 定義を横に開く=> Cmd+K F12
Ctrl+. クイックフィクス=> Cmd+.
Shift+F12 すべての参照を表示=> Shift+F12
F2 シンボルの名前修正=> Cmd+F2
Ctrl+K Ctrl+X 末尾の空白のトリミング =< Cmd+K Cmd+X
Ctrl+K M 言語モードの変更 => Cmd+K M

マルチカーソルと選択

Alt+Click カーソルの挿入 => Alt+Click
Shift+Alt+Up/Down カーソルを上下に挿入=> Cmd+Alt+Up/Down <= 違うので注意!!
Ctrl+U カーソル操作のアンドゥー(元に戻す)=> Cmd+U
Shift+Alt+I 選択範囲の各行末にカーソルを挿入=> Alt+Shift+I
Ctrl+L 行選択 => Cmd+L
Ctrl+Shift+L すべての一致を選択=> Cmd+Shift+Left
Ctrl+F2 単語ですべての一致を選択=> Cmd+F2
Shift+Alt+Right 選択範囲を拡大 => Alt+Shft+Right
Shift+Alt+Left 選択範囲を縮小 => Alt+Shift+Left
Shift+Alt+マウスドラッグ 矩形(ボックス)選択 => Alt+Shift+Mouse Drag

表示

F11 フルスクリーン切り替え => Ctrl+Cmd+F <= Mac標準!!
Shift+Alt+0 エディターレイアウトの縦横切り替え => Cmd+Alt+0
Ctrl+=/- 拡大/縮小 => Cmd+^/-/+
Ctrl+B サイドバー表示の切り替え => Cmd+B
Ctrl+Shift+E エクスプローラーを表示/フォーカスの切り替え => Cmd+Shift+E
Ctrl+Shift+F 検索の表示 => Cmd+F
Ctrl+Shift+G ソース管理の表示 => Ctrl+Shift+G (Git画面の表示)
Ctrl+Shift+D デバッグの表示 => Cmd+Shift+D
Ctrl+Shift+X 拡張機能の表示 => Cmd+Shift+X
Ctrl+Shift+H 複数のファイルで置換 => Cmd+Shift+H
Ctrl+Shift+J 検索の詳細の切り替え => Cmd+Shift+J
Ctrl+Shift+C 新規のコマンド/ターミナルを開く => Cmd+Shift+C
Ctrl+K Ctrl+H アウトプットパネルを表示 => Shift+Cmd+U
Ctrl+Shift+V マークダウンプレビューを開く => Cmd+Shift+V
Ctrl+K V マークダウンプレビューを横に開く => Cmd+K V
Ctrl+K Z 禅モードに移行(Esc Escで抜ける) => Cmd+K Z

検索と置換

Ctrl+F 検索 => Cmd+F
Ctrl+H 置換 => Cmd+Alt+F
F3/Shift+F3 次を検索/前を検索 => F3/Shift+F3
Alt+Enter 検索に合った対象をすべて選択 => Alt+Enter
Ctrl+D 次の検索に合った対象を選択に追加=> Cmd+D
Ctrl+K Ctrl+D 次の検索に合った対象に選択を移動=> Cmd+K Cmd+Down

ナビゲーション

Ctrl+T すべてのシンボルを表示 => Cmd+T
Ctrl+G ライン番号へ移動 => Ctrl+G
Ctrl+P ファイルへ移動 => Cmd+P
Ctrl+PageUp/PageDown タブの切り替え => Cmd+Alt+Right/Left
Ctrl+Shift+O シンボルへ移動 => Cmd+Shift+O
Ctrl+Shift+M 問題パネルの表示 => Cmd+Shift+M
F8 次のエラーまたは警告へ移動 => F8
Shift+F8 前のエラーまたは警告へ移動 => Shift+F8
Ctrl+Shift+Tab エディターのグループヒストリーを選択 => Ctrl+Tab
Ctrl+Alt+- 戻る => Cmd+Alt+-
Ctrl+Shift+- 進む => Cmd+Alt++

エディター管理

Ctrl+W エディターを閉じる => Cmd+W
Ctrl+K F フォルダーを閉じる => Cmd+K F
Ctrl+\ エディターを分割する => 機能しない!!
Ctrl+1/2/3 n番目のエディターグループのフォーカスを移動
Ctrl+K Ctrl+Left フォーカスを前のエディターグループに移動 => Cmd+K Cmd+Left
Ctrl+K Ctrl+Right フォーカスを次のエディターグループに移動 => Cmd+K Cmd+Right
Ctrl+Shift+PageUp エディターを左へ移動 => Cmd+Alt+Left
Ctrl+Shift+PageDown エディターを右へ移動 => Cmd+Alt+Right
Ctrl+K Left アクティブなエディターグループを左(上)へ移動 => Cmd+K Left
Ctrl+K Right アクティブなエディターグループを右(下)へ移動 => Cmd+K Right

ファイル管理

Ctrl+N 新規ファイル => Cmd+N
Ctrl+O ファイルを開く => Cmd+O
Ctrl+S 保存 => Cmd+S
Ctrl+Shift+S 名前をつけて保存 => Cmd+Shift+S
Ctrl+W 閉じる => Cmd+W
Ctrl+K Ctrl+W すべて閉じる => Cmd+K Cmd+W
Ctrl+Shift+T 閉じたエディターを再度開く => Cmd+Shift+T
Ctrl+K Enter プレビューモードで開いたファイルを開く => Cmd+K Enter
Ctrl+Tab 次のタブを開く => Ctrl+Tab
Ctrl+Shift+Tab 前のタブを開く => Ctrl+Shft+Tabp
Ctrl+K P アクティブファイルのパスをコピー => Cmd+K P
Ctrl+K R アクティブファイルをエクスプローラーで表示 => Cmd+K R
Ctrl+K O 新しいウィンドウでアクティブファイルを開く => Cmd+K O

デバッグ

F9 ブレークポイントの切り替え => F9
F5 スタート/コンティニュー => F5
F11/Shift+F11 ステップの開始/終了 => F11/Shift+F11
F10 ステップオーバー => F10
Shift+F5 ストップ => Shift+F5
Ctrl+K Ctrl+I ホバーの表示 => Cmd+K Cmd+I

統合ターミナル

Ctrl+` 統合ターミナルを表示 => Ctrl+`(半角全角漢字)
Ctrl+Shift+` 新しい統合ターミナルを作成=> Ctrl+Shift+`
Ctrl+Shift+C 選択対象のコピー=> Cmd+C
Ctrl+Shift+V アクティブターミナルに貼り付け=> Cmd+V
Ctrl+Shift+Up/Down スクロールアップ/ダウン => Up/Down
Shift+ PageUp/PageDownn ページ単位のスクロールアップ/ダウン=> PageUp/PageDown
Shift+ Home/End 一番上にスクロール/一番下にスクロール=> Cmd+Home/End

キーワード: 逆引き, Visual Studio Code, キーバインド, キーバインディング, Mac

elm-uiから入るelm入門

ホームページelm-lang.orgにElmのチュートリアル(guide)があってそれはそれはすばらしいので、そこ以外で勉強するのはもったいないので、余計な入門は書かない方がいいのですが、思いついたのでしょうがない。

あとたぶんどんどん仕様が変わっているので他のところのサンプルが全滅しているよね。

だから本家のホームページで勉強しなさい。

と責任のがれをしておいて、

やっぱ本家のサンプルは色がついていなかったり、フォントがいじくってなかったりさびしいよね。

ハローワールドを書いて、すぐ色をつけたいとかセンタリングしたい、というタイプの人はelm-uiから入るという手もある。

絶対おすすめしないけど。

といいながらサンプルを作り始めたので見てみてください。

https://kalz2q.github.io/elm-examples/

Ubuntuがfreezeして立ち上がらない(解決)

環境 Ubuntu 19.04

いろいろいたずらしているとハードディスクから立ち上がらなくなってクリーンインストールせざるを得ないことが(たまに)あります。

たいがいのことはクラウドにバックアップしてあるのでデータがなくなることはないのですが、それでも不便。すくなくともめんどくさい。

今回以下の手順で解決したので記録しておきます。

ubuntu harddisk won't boot

で検索してヒットしたMakeUseOfというサイトが参考になりました。

まずインストール用のDVDで起動します。

起動したら、インストールには進まず、アクティビティから端末(terminal)を開いて

sudo apt-add-repository ppa:yannubuntu/boot-repair
sudo apt-get update
sudo apt-get install -y boot-repair
boot-repair

で再起動します。

これでいろんなことができるようになるので、あとはご自由に。

こんなことがいつからできるようになってたのだろう。
ずいぶん時間をムダにしてたと思います。

以上

Ubuntuでfrescobaldi(lilypond)でmidiの音がでない(解決)

環境ですが ubuntu 19.04
lilypond 2.18.2
frescobaldi 3.0.0
timidity(timidity++) 2.14.0

久しぶりにlilypondで楽譜を作ろうと思ってインストールしたら音が出ないのであせっていろいろ調べました。

sudo apt install lilypond

sudo apt install frescobaldi

この状態でlilypondもfurescobaldiもちゃんと立ち上がって使えますが音が出ない。

次に

sudo apt install timidity

すると、midiファイル(frescobaldiとlilypondで作ったやつとか)はfresobaldiの環境でないところ(端末)では音が出ます。

timidity test.midi

とか。

次に一旦frescobaldiを閉じて、終了させてから

timidity -iA

としてからもう一度frescobaldiを立ち上げると音がでました。

Menu -> Edit -> Preferences -> MIDI Settings のPlayer Outputが TiMidity port 0に変わっています。
音が鳴らなくて、ここがtimidityになってなかったら間違えています。

さて、毎回timidity -iAしてからfrescobaldiを立ち上げてもいいのですが、デーモンに登録してこれもうまく行ったので書いておきます。

自己責任でよろしくおねがいします。

/etc/systemd/system/timidity.service

というテキストファイルを作って

[Unit]
Description=TiMidity Daemon
After=sound.target

[Service]
ExecStart=/usr/bin/timidity -iA

[Install]
WantedBy=multi-user.target

としてセーブします。

あとは

sudo systemctl daemon-reload
sudo systemctl enable timidity
sudo systemctl start timidity
sudo reboot

で再起動。

frescobaldiのサイト

https://github.com/frescobaldi/frescobaldi/wiki/MIDI-playback-on-Linux

ではtimidityでもいいけどFluidSynth(Qsynth)の方がアクティブに開発が進んでいるのでおすすめとありますが、わたしはtimidityがおすすめです。

fluidsynthでも音がなるようにはなりましたが、手順がもっと多いです。少なくともfrescobaldiのサイトに書いてあるやりかただけでは無理だとおもいます。

以上

追記:
deamonを走らせて、timidityは鳴るけど他の音がでなくなったので

sudo systemctl stop timidity

としたら、普通に戻りました。

Elmおもしろいね

elm-projects

Elmという言語を知りました。

バージョンが0.19でまだまだ環境が整っていないのですが、やたらおもしろい。

発展するといいな。

elm-lang.orgというところにチュートリアルやドキュメントがあります。

おもにそれからのコピペが多いのですが、githubに出来上がったページを載せました。

https://kalz2q.github.io/elm-projects/

htmlにするとgithubはそのままホームページの形で見れるようになったので便利です。

もとのElm言語によるソースも含めすべて、

https://github.com/kalz2q/elm-projects/

にあります。ソースはelm-srcに、htmlはsrcに入れました。

elm make elm-src/hogehoge.elm --output=src/hogehoge.html

というふうにして作っています。