Firestoreセキュリティルール向けのファイル結合ツールを作ってみたので、簡単に使い方などを紹介したいと思います。
作成したCLIツールは以下
Firestoreセキュリティルールに限らず、テキストファイルであれば何でも使えるので、ツール名はincludeとしています。
本記事ではFirestoreセキュリティルールとMarkdownの結合を例に、使い方を紹介したいと思います。
目次
目次
本記事で紹介する方法は、以下のいずれかの場合のみ利用可能です。
1 については特に条件なしで試すことができます。
2 については、対象ライブラリのドキュメントページなどに、対象のライブラリが読み込まれている必要がありますが、多くのサイトでは、自分自身を読み込んでいると思うので、適用範囲は広いかなぁと思います。
まずは、サンプルとして、以下のページで紹介されているコードを試してみたいと思います。
上記のページの中で、整数値をカンマ付き円表記する、以下のコードを試してみたいと思います。
const formatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }); formatter.format(1000);
ブラウザコンソールをライブラリお試し環境として使う方法は、至ってシンプル！
Chromeの場合なら、上記のページでF12を押して、表示されたエリアからConsoleタブを開いてください。
※ Firefoxの場合は、F12 > コンソール
あとは、開いたコンソールに上記のコードをコピペして、Enter！
コンソールに"￥1,000"のような結果が表示されれば、成功です。
ドキュメントと並べて表示ができ、コードの自動補完もされるので、いろいろ楽ちん。
画像では、続けてformatter.format(2000);、formatter.format(2500);と入力しています。
"￥2,000"、"￥2,500"と結果が出力されると思います。
2021/02/01現在だと、Lodashのドキュメントページにはlodashライブラリが読み込まれています。
先ほどの例と同じように、Lodashのドキュメントページの内容を試してみます。
まずは、以下のページを開いて、先ほど同様に、F12 > Consoleでコンソールを開いてください。
まずは、以下のコードを試してみます。
コンソールに以下のコードを入力してください。
_.chunk(['a', 'b', 'c', 'd'], 2);
※ 2021/02/01現在だと、ドキュメントの一番上にあるサンプルコードです。
結果は以下のように、表示されていると思います。
※ 上の画像では_.difference([2, 1], [2, 3]);と_.drop([1, 2, 3]);を続けて試しています。
サンプルに表記されている、結果と同じ結果が得られればオールＯＫ
ブラウザコンソールで試せないライブラリを簡単に試したい場合は、RunKitの利用がオススメです。
RunKitは、npmjs.comの対象ライブラリページにリンクが設置されています。
右側サイドバーの下の方に、>_ Try on RunKitと表記されたボタンがあるので、そこから移動してください。
lodashの場合は以下のページより
今回は、標準組込みオブジェクトとLodashについて試してみましたが、作成したライブラリは紹介サイトでも大抵使っているかなと思うので、他のライブラリでも結構使えるのではないかと思います。
「これも使える！」というようなライブラリがあれば、コメントなどから教えてもらえると嬉しいです(^^)
制作中のサイト「新型コロナウイルス 感染状況」に、「日本の感染状況(県別)」ページを追加しました。
また、日本版ページの追加に伴い、サイト名を「新型コロナウイルス 世界の感染状況」から「新型コロナウイルス 感染状況」に変更しました。
本記事では、今回追加した日本版ページについて、簡単に紹介したいと思います！
「新型コロナウイルス 感染状況」サイトは以下のページをご覧ください。
その他の「新型コロナウイルス 感染状況」の機能紹介記事は、以下のページをご覧ください
続きを読む
制作中のサイト「新型コロナウイルス 世界の感染状況」に、国名フィルタ機能を追加しました。
また、以下の調整を行いました。
今回の記事では、追加・更新した機能を簡単に紹介したいと思います。
「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。
その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページをご覧ください
続きを読む
制作中のサイト「新型コロナウイルス 世界の感染状況」に、以下の機能を追加・更新しました。
今回の記事では、追加・更新した機能を簡単に紹介したいと思います。
「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。
その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページをご参照ください。
続きを読む
「新型コロナウイルス 世界の感染状況」サイトに以下の３つの機能を追加しました。
今回は、追加した機能について、簡単に紹介したいと思います。
「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。
その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページをご参照ください。
続きを読む
「新型コロナウイルス 世界の感染状況」サイトに以下の３つの表示モードを追加しました。
今回は、追加した表示モードについて、簡単に紹介します。
「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。
その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページをご参照ください。
続きを読む
今回は、「新型コロナウイルス 世界の感染状況」サイトに追加した機能を、簡単に紹介したいと思います。
「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。
その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページを参照してください。
続きを読む
今回は、以下の２つの記事で紹介した 「はてなブログでCSSを使用する方法」を比較 したいと思います。
はてなブログの各記法で、使用可能なCSSの適用方法を比較 していきたいと思います。
今回、検討する記法は以下の４つです。
※ 「見たまま」モードについては、HTML編集タブからの入力で比較します。
続きを読む
