Corredor

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

Angular

「Web 版 VSCode」な StackBlitz が超優秀だった

StackBlitz という Web サービスを発見した。「Web ブラウザ上で動作する VSCode」といったところで、Angular や React などのプロジェクトを作成してその場で動作させられる Playground だ。 The online code editor for web apps. Powered by Visual Studi…

Angular のルーティング定義を全て取得してパスの存在チェックをしてみる

Angular アプリを作っていて、ルーティング定義をまとめて知りたくなったので、調べ方を調べた。 参考:typescript - How to list / output all routes in @Routes in my Angular2 App - Stack Overflow @angular/router が提供する Router クラスより、conf…

Angular 7 と Angular Material と Material Design Icons を試した

Angular7 がリリースされたので、そのお試しがてら、Angular Material と Material Design Icons を導入して遊んでみた。 Angular7 とは Angular Material とは Material Design Icons とは Angular7 アプリを新規作成する Angular Material を導入する Mate…

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

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

はてなブックマークにノイズが多いのでオレオレはてなブックマーク「Neo's Hatebu」を作った

二度と視界に入れたくない記事。 僕は iPhone の「はてなブックマーク」アプリを見るのが日課なのだが、最近どうにもこうにも、見たくない話題に関する記事がホットエントリを占めるようになっていて、気分が乗らない。BTS とかいう知らない連中がどうしたと…

【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 アプリを Electron で動かす事始め

Electron (エレクトロン) は、HTML・CSS・JavaScript で構築した Web アプリケーションを Windows や Mac 向けのネイティブアプリとしてビルドしてくれるフレームワーク。ハイブリッドスマホアプリとしてビルドしてくれる Apache Cordova と似たようなモノで…

ngx-onsenui を使って Angular6 + OnsenUI + Cordova なプロジェクトを立ち上げてみる

HTML・CSS・JavaScript でスマホ向けアプリを作成することを「ハイブリッドアプリ」と呼ぶが、そんなハイブリッドアプリで Android や iOS のネイティブっぽい UI を実現してくれる、OnsenUI というフレームワークがある。 Onsen UI 2: HTML5モバイルアプリ…

Markdown ファイルを動的にパースして表示・別ファイルへの遷移もできる Angular アプリ「ngx-markdown-wiki」を作った

Markdown ファイルを動的にパースして表示し、別の Markdown ファイルへの遷移もできる Angular アプリ「ngx-markdown-wiki」を作った。Markdown ファイル同士の遷移ができるので、Markdown 製の Wiki が作れるかなー、という思いで、「Markdown Wiki」とし…

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 みたいなヤツ…。 …と思って、作ってみ…

Angular In Memory Web API の実用性を上げるための Tips

以前 Angular In Memory Web API というライブラリを紹介した。Angular アプリ内に API サーバのモックを構築できるライブラリだったが、色々と癖があって扱いが大変だった。 neos21.hatenablog.com 今回はこの In Memory Web API の実用性を向上させるため…

ブラウザ上で3ファイル以上のテキストファイルの差分を確認できる Angular アプリ「Multiple Diff」を作った

以前、「3ファイル以上を横並びにして差分を確認することはできないか」という話をした。 neos21.hatenablog.com 「Rekisa」という Windows 用フリーソフトが一番自分の理想に近かったのだが、コレを自分でも作って改良できないかやってみた。 結果、色々と…

Angular 4+ で画面遷移時にスクロール位置を最上部に戻すには

Angular 4 以降で、コンポーネントの遷移時にスクロール位置が最上部に戻ってくれない。 以下のように、AppComponent にて Router のイベントを見て、移動が終わった時 = NavigationEnd に window.scrollTo() を実行してやれば良い。 import { Component, In…

Angular 4.4.5 だったアプリを ng update で 6.0.3 にバージョンアップした

Angular 6 からの新機能で、バージョンアップ時のマイグレーション作業を自動化してくれる ng update コマンドがある。今回はコレを使って、拙作の Angular Utilities を Angular 6 にバージョンアップしてみた。 コマンドに合わせて、公式サイトに Update G…

Angular の Router に関する書き方を整理する

Angular 4 以降の画面遷移、Router 周りの書き方を毎回忘れるので、自分用にまとめる。 通常のリンク URL (ルーティング) 定義 リンクする HTML 別の Component (TypeScript) から遷移する ルートパラメータ付きのリンク URL (ルーティング) 定義 リンクする…

Angular の FormArray で項目数が動的に増える入力フォームを実現する

Angular 4 以降の ReactiveForms で検証。 例えばユーザ情報を登録するフォームがあったとして、電話番号と種別 (固定電話なのか携帯なのかなど) を複数入力できるようにしたいとする。 画面のイメージとしては、電話番号テキストボックスと、種別テキストボ…

Angular In Memory Web API を使ってモックサーバを立てる

Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク作者: 宇野陽太,奥野賢太郎,金井健一,林優一,吉田徹生,稲富駿,丸山弘詩出版社/メーカー: インプレス発売日: 2017/12/15メディア: 単行本(ソフトカバー)この商品を含むブロ…

Angular5 + Cordova なアプリで Protractor + Appium による iOS シミュレータ・iOS 実機 E2E テストを実施する際の備忘

クラウドでできるHTML5ハイブリッドアプリ開発 Cordova/Onsen UIで作るiOS/Android両対応アプリ (Monaca公式ガイドブック)作者: 永井勝則,アシアル株式会社出版社/メーカー: 翔泳社発売日: 2015/02/18メディア: 大型本この商品を含むブログ (4件) を見る Ang…

Angular4 以降でコンポーネント間をまたいだデータ連携を実現するサービスクラスを作る

AngularによるモダンWeb開発 実践編~実際の開発で必要な知識を凝縮~作者: 末次章出版社/メーカー: 日経BP社発売日: 2017/11/24メディア: 単行本この商品を含むブログを見る Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク…

Angular5 にアップデートして「Metadata version mismatch for module」エラーが出た

Angularアプリケーションプログラミング作者: 山田祥寛出版社/メーカー: 技術評論社発売日: 2017/08/05メディア: Kindle版この商品を含むブログを見る まさに以下の記事どおりの事象に遭遇し、記事どおりの対応方法で修正できた話。 参考:Angular4 -> 5のア…

Angular ライブラリを AoT コンパイルした上で Uglify する方法は?

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ作者: 山田祥寛出版社/メーカー: WINGSプロジェクト発売日: 2017/06/21メディア: Kindle版この商品を含むブログを見る TypeScript実践プログラミング Programmer's SELECTION作者:…

Angular のルーティングにおける children と loadChildren の違い

小さな会社のWeb担当者・ネットショップ運営者のためのWebサイトのつくり方・運営のしかた 売上・集客が1.5倍UPする プロの技101作者: 坂井和広出版社/メーカー: ソーテック社発売日: 2017/08/11メディア: 単行本この商品を含むブログを見る Angular のルー…

Angular のユニットテストでモジュールが存在しなくてもエラーにしない方法

JavaScript関数型プログラミング 複雑性を抑える発想と実践法を学ぶ【電子書籍】[ LuisAtencio ]ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > その他ショップ: 楽天Kobo電子書籍ストア価格: 3,672円 JavaScript関数型…