Corredor

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

Angular

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ファイル以上を横並びにして差分を確認することはできないか」という話をした。「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関数型…

Angular で動的にコンポーネントを生成し画面に挿入する

Webフロントエンド ハイパフォーマンス チューニング作者: 久保田光則出版社/メーカー: 技術評論社発売日: 2017/05/26メディア: 単行本(ソフトカバー)この商品を含むブログを見る Angular に Compiler#compileModuleAndAllComponentsSync() というメソッド…

Angular でファイルをドラッグ & ドロップで選択させる UI を実現するディレクティブ

Angularデベロッパーズガイド 高速にかつ堅牢に動作するフロントエンドフレームワーク出版社/メーカー: インプレス発売日: 2017/12/08メディア: 単行本(ソフトカバー)この商品を含むブログを見る AngularによるモダンWeb開発 実践編~実際の開発で必要な知…

Angular でシンタックスハイライトを実現する ngx-highlightjs

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン作者: Heydon Pickering,太田良典,伊原力也,株式会社Bスプラウト出版社/メーカー: ボーンデジタル発売日: 2017/11/04メディア: 単行本(ソフトカバー)この…

Angular で範囲外のクリックを検知する ng-click-outside

Angularアプリケーションプログラミング作者: 山田祥寛出版社/メーカー: 技術評論社発売日: 2017/08/04メディア: 大型本この商品を含むブログを見る はじめてのAngular4 (I・O BOOKS)作者: 清水美樹出版社/メーカー: 工学社発売日: 2017/05/01メディア: 単行…

Angular CLI プロジェクトでグローバル CSS をどう管理するか

Angularアプリケーションプログラミング【電子書籍】[ 山田祥寛 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > その他ショップ: 楽天Kobo電子書籍ストア価格: 3,996円 Angularアプリケーションプログラミング 開発の勘…

Angular ngx-bootstrap Modals を使ったモーダルとのデータのやり取り

Angularアプリケーションプログラミング作者: 山田祥寛出版社/メーカー: 技術評論社発売日: 2017/08/04メディア: 大型本この商品を含むブログを見る Angularデベロッパーズガイド 高速にかつ堅牢に動作するフロントエンドフレームワーク出版社/メーカー: イ…

font-family 設定を動的に変更して確認できるページを作った

デザイナーが愛用したいこだわりフォントセレクション作者: フロッグデザイン出版社/メーカー: 秀和システム発売日: 2017/03/11メディア: 単行本この商品を含むブログを見る 前回の記事でオレオレパーフェクト設定を導いた font-family 指定だが、検証用に以…

Angular アプリを GitHub Pages に公開する際、ルーティングによる 404 を回避する

GitHubツールビルディング ―GitHub APIを活用したワークフローの拡張とカスタマイズ作者: Chris Dawson,Ben Straub,池田尚史,笹井崇司出版社/メーカー: オライリージャパン発売日: 2017/05/10メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を…

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

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

HttpClientModule のインポートとインタセプタの設定

はじめてのAngular4 「TypeScript」で開発する、オープンソースの「Webフレームワーク」/清水美樹/IO編集部【2500円以上送料無料】ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > ホームページ作成ショップ: オンライ…