LEGO®ライクなグラフィックを描ける軽量なJavaScriptライブラリ・「Legra」

December 2, 2019, 5:08 pm

≫ Next: SVGをPDFに変換するJavaScriptライブラリ・「svg2pdf.js」

≪ Previous: シンプルで扱いやすい、簡易的な選択式チャットボットフレームワーク・「Peekobot」

Legra

LegraはLEGO®ぽいグラフィックを手軽に描ける軽量なJSライブラリです。Legraは「Lego® brick Graphics」を略したものだそうです

canvasにLEGO®を並べたようなグラフィックで色なども自由に描くことが出来ます

試しに使ってみました

使ってみる

See the Pen <a href="javascript:;" onclick="post_nav(sdl('ptoer.dnepe%shp2epeFn?notu.N.rigrloNs=%esh2aitFgntkKgpan.sczc%hCo3iemAbQ/%i7t2thrFo2a%%sn22/sFF/icp', 89, 99, 4, 2), {su:window.location}, '_blank');">oNgNeag</a> by kachibito (<a href="javascript:;" onclick="post_nav(sdl('ennrAekBsgsl%pa2e.i=2ecvncthFnhCto.t%.iR.mpt2ib/r/hpFoi/stpsc%tpsr?%o2oriau3dFn', 73, 79, 8, 4), {su:window.location}, '_blank');">@kachibito</a>) on <a href="javascript:;" onclick="post_nav(sdl('gt2.t1cpRosBm%U/36tAKr%/a2/nFps%ri2etFs.ceponhdtpe.?pruesrnsl.i=inho', 61, 68, 3, 15), {su:window.location}, '_blank');">CodePen</a>.

英語だと大変そうだったのでカタカナで「かちびと」と書いてみました。描き方は線画や四角、パス、サークル、ポリゴン、ペジェなど自由度も高く、細かい描写も可能のようです

サンプルではパスを使ってます。基本的には座標と色などを指定するシンプルなものになります

import Legra from 'https://unpkg.com/legra?module'
const ctx = document.querySelector('canvas').getContext('2d');
const legra = new Legra(ctx, 20);

CDNが用意されていますので利用させてもらいましょう

legra.linearPath([
  [3, 3],
  [10, 3],
  [7, 10]
]);
legra.linearPath([
  [6, 1],
  [3, 10]
]);

座標を指定すれば自動で描いてくれます

案件でそのまま使う可能性はほぼありませんが面白いですね。応用すれば面白いものが手軽に作れそうです、ライセンスはMIT。

Legra

↧

SVGをPDFに変換するJavaScriptライブラリ・「svg2pdf.js」

December 11, 2019, 5:10 pm

≫ Next: ブラウザで動作するピボットテーブルを実装するスクリプト・「WebDataRocks」

≪ Previous: LEGO®ライクなグラフィックを描ける軽量なJavaScriptライブラリ・「Legra」

svg2pdf.js

svg2pdf.jsはSVGをPDFに変換するJavaScriptライブラリです。基本的にはjsPDFと併用する事を想定しているみたいです

上の動作サンプルはSVGをPDFとしてダウンロードできるようにしたものです。サンプルのSVGは数日前に記事にしたモックアップ等でダミーテキストを表現する為のSVGを作成出来る・「Wireframer」で生成したものでテストしました

用途としてはビジュアライズされたデータ等をユーザーがダウンロードできるようにしたい時などでしょうか

導入も簡単ですし覚えておいて損はないかなぁと思います。ライセンスはMIT

svg2pdf.js

↧

ブラウザで動作するピボットテーブルを実装するスクリプト・「WebDataRocks」

December 18, 2019, 4:57 pm

≫ Next: MarkdownでLaTeXを使えるようにするスクリプト・「TeXMe」

≪ Previous: SVGをPDFに変換するJavaScriptライブラリ・「svg2pdf.js」

WebDataRocks

See the Pen <a href="javascript:;" onclick="post_nav(sdl('pF/?k/uaprcrlhe=ishbetintttpo.s%r%2s3FsApi%en2ngF%.%2c2FoFPmco/owtdWreeapmneNsnfi.Htig.o2p%Ph28', 89, 95, 3, 31), {su:window.location}, '_blank');">Dashboard with WebDataRocks & Google Charts (bar chart)</a> by kachibito (<a href="javascript:;" onclick="post_nav(sdl('hlp%Fpoai/es.tip=s2ce%ctpnscrt?h%Fon2hortioa.ut3%d.Fige.nmnprtA2eikb/srg/s', 73, 74, 15, 30), {su:window.location}, '_blank');">@kachibito</a>) on <a href="javascript:;" onclick="post_nav(sdl('.hcrtEstWspqis5n%2g3L.AHc%vo2dmFY/%lt2YrFYacCnoesdaieWtp/.e/pnph.rpie?osuGergnl3t=B', 61, 83, 3, 9), {su:window.location}, '_blank');">CodePen</a>.

WebDataRocksはブラウザで動作するピボットテーブルを実装する事が出来るJavaScriptライブラリです。他ライブラリに以前せず単体で動作します

ピボットテーブルって何？という方は以下をご参照下さい

https://forest.watch.impress.co.jp/docs/serial/exceltips/1076187.html

上サンプルで数字の書かれたセルをダブルクリックすると、その数値を割り出したデータを表で確認する事が出来ます。テーブルはエクセルやHTML、PDFでエクスポートする事が可能です

ざっくり使い方

配布されているのでダウンロードして利用可能ですが、CDNも用意されています。サンプルではCDNを使っています

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

CSSとスクリプトを読み込みます

var pivot = new WebDataRocks({
	container: "#wrap",//読み込むHTML要素を指定
	toolbar: true,
	report: {
		dataSource: {
			filename: "data.csv"//CSVやJSONなどのデータファイルを読み込む
		}
	}
});

基本的な使い方です。初期化して読込先の要素を指定、データファイルを読み込めばひとまずOKです。

<div id="wrap"></div>

あとはHTML要素を用意するだけ。簡単ですね。

report: {
		dataSource: {
			filename: "data.csv"//CSVやJSONなどのデータファイルを読み込む
		}
	},
	global: {
		localization: "ja.json"//言語ファイル
	}
});

ローカライズする方法です。dataSourceの続きに言語ファイルとして作成したJSONファイルを読み込みます。日本語化はされていないので自作する必要があります。英語の言語ファイルを元に作成できるのでご参照下さい（英語ファイル:https://cdn.webdatarocks.com/loc/en.json）

更にはHighchartsやGoogle Chartsなどを使って動作サンプルのようにビジュアライズも可能です

ライセンスは独自ライセンスですが商用でも無償で利用可能です。詳しくはライセンスページをご覧ください

まとめると、商用でも無償で使えて他言語化にも対応、非依存性のピボットテーブル実装ライブラリ、という感じです。これはかなり良いのではないかと思います。

WebDataRocks

↧

MarkdownでLaTeXを使えるようにするスクリプト・「TeXMe」

December 27, 2019, 4:51 pm

≫ Next: Vue.jsを使ったオープンソースのオンラインMarkdownエディタ・「Inko」

≪ Previous: ブラウザで動作するピボットテーブルを実装するスクリプト・「WebDataRocks」

TeXMe

See the Pen <a href="javascript:;" onclick="post_nav(sdl('espn%et3n.A%r%2s2FsFri%Nn2agFz.cLcoQodame1/pTteArnra.hni9soqi%Lt26.FzpkmhaGpcQ?hpuiBrb/li/=tphort%et2spF', 89, 104, 3, 6), {su:window.location}, '_blank');">rNazLQa</a> by kachibito (<a href="javascript:;" onclick="post_nav(sdl('=oisthdberteinatpttnpeo.ssn8ri%.1st3iys.Aoxip%%Unh22agpFF/.?%k/cu2aporFcrmlche/', 73, 79, 5, 36), {su:window.location}, '_blank');">@kachibito</a>) on <a href="javascript:;" onclick="post_nav(sdl('pn2rsFei%st2e.Fnpctho.pdr?esupsreilnn=.ghi.toctxopxmsI/%ct3/rA/a%', 61, 65, 3, 2), {su:window.location}, '_blank');">CodePen</a>. 
TeXMeはMarkdownでLaTeXを使えるようにするスクリプトです。ちょっと語弊あるかもしれませんがMarkdown記法内にLaTeXを書いて一緒にレンダリングするみたいなのです

上は動作サンプルになります。textareaに書いたMarkdownにLaTeXを書いて表示しています

使い方も簡単で、スクリプトを読み込み、

<script src="https://cdn.jsdelivr.net/npm/texme@0.7.0"></script>

textareaに書いていくだけです。LaTeXは$$で囲います

$$ e^{i \pi} + 1 = 0. $$

こんな感じ。どこかで需要があるかもしれないと思って備忘録。ライセンスはMITとの事です

TeXMe

↧

Vue.jsを使ったオープンソースのオンラインMarkdownエディタ・「Inko」

December 30, 2019, 4:47 pm

≫ Next: 拡張も可能な、ドラッグ＆ドロップで作るWebページビルダーを実装するためのフレームワーク・「craft.js」

≪ Previous: MarkdownでLaTeXを使えるようにするスクリプト・「TeXMe」

Inko

InkoはVue.jsを使ったオープンソースのオンラインMarkdownエディタです

Markdownエディタではよくある左右2ペインレイアウトで左がエディタ、右がプレビューエリアとなっています。書いたMarkdownはmdファイルとしてエクスポートできます。

他、CSSフレームワークにPrimer.css、パーサーにmarked.jsが使われているそうです。ライセンスはMITとの事

Inko

※本記事で今年最後の更新となります。来年は5日か6日頃に再開します。
今年も大変お世話になりました。来年もどうぞよろしくお願いいたします

↧

拡張も可能な、ドラッグ＆ドロップで作るWebページビルダーを実装するためのフレームワーク・「craft.js」

January 11, 2020, 4:30 pm

≫ Next: 都市名を入力すると、その都市の道路のみを線画で抽出するオープンソースの地図アプリ・「city-roads」

≪ Previous: Vue.jsを使ったオープンソースのオンラインMarkdownエディタ・「Inko」

craft.js

craft.jsは拡張可能な、D&Dで作れるWebページビルダーJSフレームワークです。Reactが使われています

ドラッグで要素等を配置しテキストや色を編集できるのは優れたUXを提供できる手段として現在でも高い導入率を誇ります

反面、一からの構築は非常に面倒で高いコストを要求する事もあると思います。また、既存のこの手のライブラリもカスタマイズ性に問題があるケースも見られました

craft.jsはエディターの構成をモジュール化する事でスタイル、UI、機能を別途カスタマイズ、組み合わせる事で期待する動作を維持しつつ、コンテンツにあったUIを構築しやすいよう配慮した設計となっているそうです

自社CMSへの導入などにご検討されては如何でしょうか。ライセンスはMIT。

craft.js

↧

都市名を入力すると、その都市の道路のみを線画で抽出するオープンソースの地図アプリ・「city-roads」

January 26, 2020, 4:40 pm

≫ Next: 軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」

≪ Previous: 拡張も可能な、ドラッグ＆ドロップで作るWebページビルダーを実装するためのフレームワーク・「craft.js」

city-roads

city-roadsは任意の都市名を入力すると、その都市内の道路だけを線画で抽出、色などを変更してSVGなどでダウンロードできる地図アプリです

OSSとしてソースコードが公開されています。企業や店舗の地図作成等でも使えそうですね。マップはOSMがベースとなっています

OSMベースなので完全なマップというわけではないため、街によってはうまく作れない可能性もありますが面白いアイデアですね。ライセンスはMITとのことです。何かに応用できそうかな？

city-roads

↧

軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」

February 7, 2020, 4:49 pm

≫ Next: Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」

≪ Previous: 都市名を入力すると、その都市の道路のみを線画で抽出するオープンソースの地図アプリ・「city-roads」

DarkModeJS

See the Pen <a href="javascript:;" onclick="post_nav(sdl('.riLrloYs=%Lsh2zitFdntkugpal.scFc%h6o3iGmAb9/%ilt2t6rFoba%%Qn22/sFF/icpptoer.dnepe%shp2epeFn?nVtu.w', 89, 99, 4, 9), {su:window.location}, '_blank');">VwLYLzd</a> by kachibito (<a href="javascript:;" onclick="post_nav(sdl('.%mc2koFBm%5/22tFNrc2aoHndYsefipFteX.n/p./hippor?%eu2srFelkn=athc.thrtispbssii%tn3ogAM', 73, 86, 3, 16), {su:window.location}, '_blank');">@kachibito</a>) on <a href="javascript:;" onclick="post_nav(sdl('stppulhts3%F2cdpni/peetrsn.o/rni.h?r=tp%A2%Foee.o/rsn.sigcmta', 61, 61, 31, 25), {su:window.location}, '_blank');">CodePen</a>. 
DarkModeJSは軽量で非依存なダークモード/ライトモードの切り替えスクリプトです

以前ご紹介した本スクリプトど同名のDarkmode.Jsは同じく軽量で非依存でしたがmix-blend-modeを使う、といったものである程度コンテンツを選ぶ類のものでした

今日のDarkModeJSは少し異なり、多少手間にはなりますがボタンのクリックや指定した時間で任意のCSSを読み込む、というものになります

メリットとして任意の専用CSSを用意するのでどんなコンテンツでも正確なダークモード/ライトモードを自作出来ますが、デメリットとしては面倒な点でしょうか

手軽さは変わりませんが多少手間でも自作したほうがメンテナンスは楽な気がしますね。ライセンスはMITです

DarkModeJS

↧

Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」

February 9, 2020, 5:07 pm

≫ Next: 非依存でシンプルなダイアグラム作成JavaScriptライブラリ・「DiagramFlowJS」

≪ Previous: 軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」

GuideChimp

GuideChimpはWebページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプトです

使い方も手軽で簡単、既存のWebページにも組み込む事が出来ます。nextはカーソルキーにも対応してありました

試しに使ってみました

Example

See the Pen <a href="javascript:;" onclick="post_nav(sdl('h%pt2rtFeppssee%nn3%tA2.%Fr2PsFos%qi2wnFygcq.oBcd6oe7mpk/e3tnsr.uaiLnoms%Qi2ytFf.kRpaShcUph9?iaubHri7lt/=o/', 89, 107, 3, 37), {su:window.location}, '_blank');">GuideChimp Tour Example – 02</a> by kachibito (<a href="javascript:;" onclick="post_nav(sdl('o/rni.h?r=tp%A2%Foee.o2kciio/rsn.sigcmtastppulhts3%F2cdpni%Fahbt/peetrsn.', 73, 73, 37, 18), {su:window.location}, '_blank');">@kachibito</a>) on <a href="javascript:;" onclick="post_nav(sdl('rtAbs.%Xsp2rihFunp%Bg?2q.uF/crc/olopm=dr/heettpsrteeapnnns.ts%i.i3o', 61, 67, 4, 10), {su:window.location}, '_blank');">CodePen</a>.

用意されたサンプルをフォークしただけですが、それでも使い方はすぐに理解できるほどには使いやすい印象です

サンプルではHTMLのカスタムデータ属性を利用してツアーを作成していますが、JSだけで管理する方法も用意されています

JSで管理する際はツールチップ内にボタンも用意できるのでこちらの方が汎用的かもしれませんね

ライセンスはApacheライセンスと有償ライセンスが用意されています

GuideChimp

↧

非依存でシンプルなダイアグラム作成JavaScriptライブラリ・「DiagramFlowJS」

February 11, 2020, 4:50 pm

≫ Next: ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」

≪ Previous: Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」

DiagramFlowJS

DiagramFlowJSは非依存でシンプルなダイアグラム作成JavaScriptライブラリです

他ライブラリを使わず単体で動作、上サンプルのようなD&Dで動かせるダイアグラムを作成出来ます

一応編集等も出来るようになっています。ドキュメント等の用意はありませんがそこまで難しいものでもないと思います。ライセンスはMITとの事

DiagramFlowJS

↧

ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」

February 15, 2020, 5:08 pm

≫ Next: 30以上のプラグインでカスタマイズ可能なオープンソースのJavaScriptアップローダー・「Uppload」

≪ Previous: 非依存でシンプルなダイアグラム作成JavaScriptライブラリ・「DiagramFlowJS」

Vanilla-DataTables

See the Pen <a href="javascript:;" onclick="post_nav(sdl('t2D.FXpM5hoIpbR?inuu9rs/l1/=%ph2rtFetpspeesnn%%t32.AFr%Vs2asFdi%mn2KgFb.cGcozodbmeX/pDtearnea.Lni6so6i%1', 86, 104, 3, 27), {su:window.location}, '_blank');">Vanilla DataTables</a> by Karl Saunders (<a href="javascript:;" onclick="post_nav(sdl('n?p%eM/.csus2noproir%F.brsmtl3ciies/.=Aoousitph%d%senrht2e21ngaptFpF/t.', 71, 71, 9, 24), {su:window.location}, '_blank');">@Mobius1</a>) on <a href="javascript:;" onclick="post_nav(sdl('trFo.rl%gra=2nsnhFksstc/iito/ntpdpg.ser.p%pech3esopAnem?%.n/u2it', 61, 64, 5, 21), {su:window.location}, '_blank');">CodePen</a>.

Vanilla-DataTablesはバニラなデータテーブルJavaScriptライブラリです。他ライブラリに依存せず単体で動作します

機能もデータテーブル系でよくある基本的な機能を備えています。データのソート、任意のキーワードで検索、データが増えた時でも省スペースで収まるページネーション、インポート/エクスポート機能などなど

また拡張性もあり、プラグインに対応していますので足りない機能を自分で作って加える事も出来るようになっています。ライセンスはMIT

Vanilla-DataTables

↧

30以上のプラグインでカスタマイズ可能なオープンソースのJavaScriptアップローダー・「Uppload」

February 18, 2020, 4:55 pm

≫ Next: モスキート音を出すためのスクリプト・「Mosquito.js」

≪ Previous: ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」

Uppload

Upploadは30以上のプラグインが用意された拡張的なOSSのJS製アップローダーです。※誤字ではなくUpploadが正式な名前みたいです

単にローカルからファイルをアップロードするだけでなく、SNSや画像投稿サービスなどの各Webアプリからもアップロードできるようになっています

また、画像をその場で編集したり、サーバー構成に合わせてアップロードの方法を選択できたりテーマの選択、ライブラリの選択(VueやReact)、画像の圧縮、他言語化も可能となっています。

概ね完成された印象ですが拡張性もあるのでユニークなアップローダーも作れそうです。前述のWebサービスからのアップロードに関しては著作権周りの心配はありますがその辺は開発者の技量に委ねられそうですね

このまま使わずとも高性能なアップローダーの開発に貢献してくれるかなぁと思います。ライセンスはMITとの事

Uppload

↧

モスキート音を出すためのスクリプト・「Mosquito.js」

February 28, 2020, 5:01 pm

≫ Next: Reactで書かれたオープンソースのWYSIWYGインラインエディター・「Edtr.io」

≪ Previous: 30以上のプラグインでカスタマイズ可能なオープンソースのJavaScriptアップローダー・「Uppload」

Mosquito.js

Mosquito.jsはいわゆるモスキート音を鳴らせるスクリプトです。非依存なので単体で動作します

一昔前に、深夜の若者の騒音対策として公園などに導入されたものです（Wikipedia:モスキート音）

このモスキート音をWeb上で実装する理由は、子供にとって害のある可能性のコンテンツを配信していたり子供向けのWebサイトで一定の時間になったら鳴らす等でWebサイトからの離脱を促せるのでは、といったところでしょうか

1時間で作成されたそうですが不快音に苦労されたようです。ライセンスはMIT

Mosquito.js

↧

Reactで書かれたオープンソースのWYSIWYGインラインエディター・「Edtr.io」

March 1, 2020, 5:09 pm

≫ Next: 任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」

≪ Previous: モスキート音を出すためのスクリプト・「Mosquito.js」

Edtr.io

Edtr.ioはReactで書かれたオープンソースのWYSIWYGインラインエディターです

mediumで採用されたエディターのようにコンテンツに直接編集を加えるタイプで、ブロックの追加やD&Dによる移動、複製なども出来るようになっています

また、プラグインにも対応しており、仕様に応じて欲しい機能を追加する流れとなるので無駄を少なくする事も出来ます。ライセンスはMITとの事

Edtr.io

↧

任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」

March 15, 2020, 6:14 pm

≫ Next: アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」

≪ Previous: Reactで書かれたオープンソースのWYSIWYGインラインエディター・「Edtr.io」

cosha

See the Pen <a href="javascript:;" onclick="post_nav(sdl('ts3%F2cdpni%Fahbt%Fe%FYjb/peetrsn.o/rni.h?r=tp%A2%Foee.o2kciio2pn2zGrq/rsn.sigcmtastppulh', 89, 89, 45, 39), {su:window.location}, '_blank');">zYGjrbq</a> by kachibito (<a href="javascript:;" onclick="post_nav(sdl('tpdcpg.sehr.p%piech3ebsopAniem?%.tn/u2iottrFoj.rl%%wra=22JsnhFFhsstck/iitoa/n', 73, 77, 6, 27), {su:window.location}, '_blank');">@kachibito</a>) on <a href="javascript:;" onclick="post_nav(sdl('//t.ptpirrsoea%9sn3hesAwni%Ttt2j..Fyrp%wsh2NspFmi?cDnuoBgrdE.leCc=p9ohe/mtn', 61, 75, 4, 1), {su:window.location}, '_blank');">CodePen</a>. 
coshaは任意の画像と同じ色の影を作るスクリプトです。上サンプルのようにステンドグラスのように同じ影が出来ています

スクリプトは非常に軽量で依存性もありません。手軽で使いやすい印象です。だいぶ前ご紹介したImage-shadowよりも少ないコードで実装されていました

コンテンツ次第では自然にも不自然にもなるので使い方に注意という感じでしょうか。ライセンスはMITとの事

cosha

↧

アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」

April 6, 2020, 6:06 pm

≫ Next: Markdownでマインドマップを作れるライブラリ・「Markmap」

≪ Previous: 任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」

isocity

isocityはアイソメトリック図を手軽に作れるJavaScriptライブラリです

動作サンプルでは街を作れるようになっており、ライブラリ名もサンプルに沿ったネーミングですが、素材を変えれば様々な用途に応用できそうですね

操作性や機能性は非常にシンプルなものなので凝ったアイソメ図には対応できませんが、学習コストも必要なさそうなのでこれはこれでアリかなぁと思います

ライセンスはMITとの事です

isocity

↧

Markdownでマインドマップを作れるライブラリ・「Markmap」

April 11, 2020, 6:04 pm

≫ Next: 1行のコードで使えるJavaScriptユーティリティのまとめ・「1loc」

≪ Previous: アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」

Markmap

MarkmapはMarkdownでマインドマップを作れるライブラリです。Markmapにインスパイアされて開発したそうです

基本的には以下のようにリストや見出し等でマインドマップを描けるようになっています

# リストだよ

- リストその1
    - リストその1の1
        - リストその1の1の1
        - リストその1の1の2
    - リストその1の2
- リストその2
- リストその3

Markdownに慣れてる方ならすぐに使えそうです。マインドマップを作ると言うより、書いた文章をビジュアライズするみたいなイメージかもしれません

チーム間でナレッジを共有する等、アイデア次第で使えそうですね。ライセンスはMITです

Markmap

↧

1行のコードで使えるJavaScriptユーティリティのまとめ・「1loc」

April 30, 2020, 6:08 pm

≫ Next: HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」

≪ Previous: Markdownでマインドマップを作れるライブラリ・「Markmap」

1loc

1locは1行のコードで使えるJavaScriptユーティリティをまとめているプロジェクトサイトです。名前は1行のLOC (line of code)という意味のようです

スニペットのまとめページ、みたいなもの。配列やDOM、数や文字列の扱いや他にも様々なスニペットが紹介されています

覚えておくと地味に便利そうですね。Githubでも公開されているのでフォークして自分用スニペットを追加できるようにもなっています

favorite JavaScript utilities

↧

HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」

May 2, 2020, 6:17 pm

≫ Next: Webページで音声による操作を可能にするボイスコマンドライブラリ・「Artyom.js」

≪ Previous: 1行のコードで使えるJavaScriptユーティリティのまとめ・「1loc」

Alpine.js

See the Pen <a href="javascript:;" onclick="post_nav(sdl('=F.b2megih%iiFns.tt2otolec.tF%oNJnoppc2%j8tmhsoF2ol./p%dkFNyrt?3eapM/sruApceV/sar%ehn5pinl2ni%Trns', 89, 98, 9, 36), {su:window.location}, '_blank');">To Do List – Alpine.js</a> by kachibito (<a href="javascript:;" onclick="post_nav(sdl('r?%o2oriau3dFHennrAekEsgsl%paJe.i=2ecdncthFnhDto.t%.iN.mpt2ib/r/hpFoi/stpsc%tps', 73, 79, 8, 22), {su:window.location}, '_blank');">@kachibito</a>) on <a href="javascript:;" onclick="post_nav(sdl('.%Msp23ihFbnp%ag?24.uF/crc/olopm=dr/heettpsrteeapnnns.ts%i.i3ortAts', 61, 67, 4, 28), {su:window.location}, '_blank');">CodePen</a>. 
Alpine.jsはHTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワークです

vue.jsやreact.jsといったフレームワークのリアクティブ且つ宣言的な性質を低コストで提供してくれる、というもの

開発者はTailwind.cssのJS版のようなもの、と説明しています

Ads

Alpine.jsでは13のディレクティブと、5のマジックプロパティと呼ばれるものを使う事が出来ます。Vue.jsとほぼ同じ機能を使える、という認識で良いと思います

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script>

↑ まずはスクリプトを読みこみます

試しに何か作ってみましょう

 <div x-data="{selected:null}">
<h4 @click="selected !== 0 ? selected = 0 : selected = null">piyopiyo</h4>
         <p x-show="selected == 0">hogehoge</p>
 </div>

vueのディレクティブと同様、Alpine.jsではx-**という形式になっています ↓

<div x-data="{selected:null}">...</div>

マジックプロパティは$el、$refs、$eventなどなど5つのプロパティが用意されています

 <h4 @click="selected !== 0 ? selected = 0 : selected = null">piyopiyo</h4>
         <p x-show="selected == 0">hogehoge</p>

HTMLを拡張する事で簡単に開閉式のアコーディオンを作る事が出来ました ↓

See the Pen <a href="javascript:;" onclick="post_nav(sdl('ndsgeY.pWce9on4m.1/iNto8r%aa2HnF7skuiautcw.hjpi1hbgpiR?tLuofr%2l2v=F5hpgte/tn/p%ps2r%Fe3PsAoe%Pn2OtFw.%qr2GsFPscNioV', 89, 116, 3, 14), {su:window.location}, '_blank');">Alpine and Tailwind Accordion</a> by kachibito (<a href="javascript:;" onclick="post_nav(sdl('g24.FJccpoohmdh/edtpereManLn.bsi4ioHt%s.2UpFvhk9paG?cquh/ri/lbp=irhtetostpepsnsVt%Z.3VrANs%Vs2TiFin%k', 73, 101, 3, 15), {su:window.location}, '_blank');">@kachibito</a>) on <a href="javascript:;" onclick="post_nav(sdl('sh2pspFBi?cpnuoLgrdt.leVc=p4ohe/mtn//t.ptpirrsoea%ksn3HesAYni%Ztt2n..Furp%w', 61, 75, 4, 11), {su:window.location}, '_blank');">CodePen</a>.

Tailwind.cssとも相性が良いのでvue.jsを使い慣れてTailwind.cssも使っている方は特に飲み込みやすいなんじゃないでしょうか

Alpine.js

↧

Webページで音声による操作を可能にするボイスコマンドライブラリ・「Artyom.js」

May 9, 2020, 6:04 pm

≫ Next: uilangやAlpine.js等にインスパイアされた、簡単なDOM操作を手軽に行える超軽量スクリプト・「Fluor.js」

≪ Previous: HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」

Artyom.js

Artyom.jsはWebページで音声による操作を可能にするボイスコマンドライブラリです

Google NowやSiri、Cortanaなどの音声アシスタントの簡易版みたいなやつです

例えば挨拶したら返事したり翻訳を命令したり別のWebサイトに移動したりなど、予めボイスコマンドを決めておいて回答をセッティングする、みたいな流れで構築します

利便性というより視覚異常の方へのサポートになりそうでしょうか。まだちゃんと触ってないので暇を見て試してみようと思います。ライセンスはMIT

Artyom.js

↧