Corredor

ウェブ、プログラミングの勉強メモ。

Angular Utilities

ギターのスケール図を生成する Angular アプリを作った

趣味の融合。 最近めっきり弾かなくなったものの、ギターを趣味としているので、Angular アプリでギターのスケール表の一つや二つ作れないといかんぞ (?) ってなって、作った。その名も Guitar Scale Generator。 https://neos21.github.io/angular-utiliti…

【Angular Utilities】SVG で三角形を描画するツールを作った

Angular Utilities 初の SVG。Draw Triangle SVG を作った。 https://neos21.github.io/angular-utilities/draw-triangle-svg 元は CodePen で見つけたサンプルだった。 See the Pen SVG Triangle Generator by Neos21 (@Neos21) on CodePen. SVG Triangle G…

【Angular Utilities】指定日時までのカウントダウンを表示する Date Time Countdown を作った

みんな大好き Moment.js と、v6 系が登場した RxJS を使って、カウントダウンタイマーを作った。 https://neos21.github.io/angular-utilities/date-time-countdown 入力値を moment オブジェクトにブチ込んで、moment#valueOf() を使って UNIX 時刻を取得。…

【Angular Utilities】NFD 文字を NFC に変換する Normalize To NFC を作った

主に MacOS の Finder なんかで問題になる、NFD 文字。濁点と半濁点が別の文字に別れており、Finder からファイル名をコピペしたりすると、「バイブス」という文字列が「ハ゛イフ゛ス」のようになってしまう、というものだ (この例は全角の濁点文字で再現)。…

【Angular Utilities】似た文字を判定する Detect Character を作った

アラビア数字の 1 (壱) と、アルファベット小文字の l (エル) など、似たような文字を判定するツールを作った。 https://neos21.github.io/angular-utilities/detect-character 作りはかなり原始的で、予め「似ているっぽい文字」の辞書を自分で作っておいた…

【Angular Utilities】色々とエンコード・デコードする Encoder Decoder を作った

今日も Angular Utilities。URI エンコードされている文字とか、Unicode 文字参照になっている文字とかを、雑多にエンコード・デコード、エスケープ・アンエスケープするツールを作った。 https://neos21.github.io/angular-utilities/encoder-decoder どれ…

【Angular Utilities】UNIX 時刻を変換する Epoch Time Converter を作った

ちょくちょく UNIX タイムスタンプを扱うことがあって、その度に「なんかサクッと思ったように表示させて欲しいなぁ〜」と思っていたので、作った。 https://neos21.github.io/angular-utilities/epoch-time-converter UNIX 時間と、YYYY-MM-DDT00:00:00 (UT…

【Angular Utilities】カラーコード・RGB 値を相互変換する Colour Converter を作った

Angular Utilities に新たなツールを追加したので紹介。その名も Colour Converter。 https://neos21.github.io/angular-utilities/colour-converter/colour-converter 左の「Colour Code」欄に #f00 とか #0070ff とか入れると、右側の「RGB」欄に RGB 値が…

Angular アプリを GitHub Pages に公開する際、ルーティングによる 404 を回避する、具体的な実装方法

以前書いた以下の記事の詳説。 neos21.hatenablog.com 事象のおさらい アプリのビルド時は Base Href を変更する 404.html からリダイレクトする AppComponent でリダイレクト処理を行う そもそも HashLocationStrategy を使う? 事象のおさらい Angular ア…

テキストを色々なケースに変換する Angular アプリを作った

最近精力的に Angular Utilities を作っていた。今回は、入力したテキストをスネークケースにしたり、キャメルケースにしたりするツールを作った。 Angular Utilities - Case Converter ケース変換に使ったのは Lodash。Underscore.js をベースにした汎用ラ…

テキストに行番号や接頭辞・接尾辞を挿入する Angular アプリを作った

テキストエディタによっては「矩形選択」が出来たりするが、連番の挿入が柔軟にできるエディタが少ない気がしたのと、「そういうエディタねえよ」っていう環境もあると思うので、Angular アプリとして作ってみた。 Angular Utilities - Add Line Number 行番…

雑な文字列置換の REPL ツールを Angular で作った

今回も Angular Utilities に追加したツールの話。今回は、String#replace() を動的に試せる画面を作った。いわゆる REPL (Read-Eval-Print Loop) なツールである。 Angular Utilities - RegExp テキストエリアに変換させたい文章を入れて、検索文字列に正規…

js-beautify を使ったコード整形ツールを Angular アプリとして作った

HTML・CSS・SCSS・JavaScript・JSON あたりをサクッと整形してくれるツールが欲しく、かといって色々なオンラインサービスをいちいち開くのもダルいので、希望のツールを自分で作ってみた。 Angular Utilities - JavaScript Beautifier … JSON 整形にも対応 …

ReactiveForms を動的に構築する Angular アプリを作ってみた

Angular アプリで、あるデータモデルに関する CRUD 操作を行う画面って、もう少し簡単に作れないかしら。例えばデータモデルを JSON で定義すると、それを編集できるフォームが自動生成されるような、Rails の Scaffold みたいなヤツ…。 …と思って、作ってみ…

CoinHive でブラウザ上から仮想通貨 Monero (XMR) をマイニングしてみた

1時間でわかるビットコイン入門 ?1円から送る・使う・投資する? (NextPublishing)作者: 小田玄紀出版社/メーカー: good.book発売日: 2017/06/02メディア: Kindle版この商品を含むブログ (2件) を見る 1時間でわかるビットコイン投資入門 ?誰でもできる超シン…