Corredor

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

Angular

Angular CLI インストール時に統計情報の質問を出さないようにする (GitHub Actions でも対応)

Angular CLI を新規にインストールしたりビルドしたりする時に、次のような質問が出てくることがある。 $ npm install ? Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies…

Neo's Hatebu に利き手モード、アクセスキー、件数表示機能を付けた

自分だけが使っている、オレオレはてなブックマーク閲覧アプリの Neo's Hatebu。 neos21.hatenablog.com 久々に機能追加をしたので、紹介していなかった過去分と合わせて紹介する。コード全量は以下で確認できる。 github.com 利き手モード切り替え アクセス…

Angular 製のアプリを Angular v9 系にアップデートした

拙作の Angular 製のアプリを Angular v9 系にアップデートした。 https://github.com/Neos21/garbler https://github.com/Neos21/angular-utilities https://github.com/Neos21/neos-hatebu https://github.com/Neos21/ngx-markdown-wiki https://github.co…

Angular で accesskey 属性を使ってキーボードからボタンを押下する

拙作の Angular アプリ「Neo's Hatebu」を、個人でちょくちょく使っては手直ししている。 neos21.hatenablog.com このアプリは、はてブのエントリごとに「削除する」ボタンが付いていて、一度読んだエントリを非表示にできるというモノ。スマホで見る時は「…

GitHub 管理している Angular 製のサイトを GitHub Pages で公開するための GitHub Actions

何回ギフハブ言うんやって感じのタイトルになってしまった…。 拙作の Angular Utilities は、コレまで $ npm run build $ npm run deploy とコマンドを実行することで、npm の gh-pages パッケージを利用して GitHub Pages にデプロイしてきた。 それを今回…

Vue.js を Vue CLI で始めてみる・React や Angular との比較も少し

create-react-app で少しだけ React を触ったあと、ガッツリ Angular 人間になっていたので、今回は Vue.js にも手を出してみることにした。 Angular・React・Vue の比較色々 Angular 寄りな感想 Next.js とか Nuxt.js とかって何? その他 どうやって Vue …

文字化けを復元する Web アプリ「Garbler」を作った

文字化け研究の一環として、「もじばけらった」インスパイアの Web アプリを作ってみた。その名も Garbler。 Garbler … デモページ GitHub - Neos21/garbler: Garbler : 文字化けを復元したり、文字化けさせたりします。 … GitHub リポジトリ 利用技術 文字…

Express + Passport と Angular でセッション管理するアプリを作ってみる

サーバサイドは Express で、クライアントサイドは Angular で作り、クライアントでログイン処理をしたユーザのみが、ある API にアクセスできるようにしたいと思った。よくあるログイン処理とセッション管理をサーバサイドで行いたい、ということだ。 Expre…

Angular CLI で作ったアプリを Heroku にデプロイして動くようにした

Angular CLI で生成したアプリを Heroku にデプロイして動作するようにするには、いくつか設定変更が必要だったので紹介。 環境情報 Angular プロジェクトを作る package.json の devDependencies を dependencies に移動する package.json に engines を記…

「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 テキストエリアに変換させたい文章を入れて、検索文字列に正規…

雑な電卓ツールを Angular で作った

今日も Angular Utilities に追加したツールの話。 今日は、テキストエリアに入力された数式を計算する電卓ツールを雑に作った。 Angular Utilities - Calculator 「計算式」テキストボックスに「(1+2) ÷ 5」などと入力すると、この入力値を「(1+2) / 5」と…

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…