福野泰介の一日一創 - create every day

IchigoJam BASICプログラムをHTMLに簡単埋め込み!(IchigoJamフォントでSVG化するJavaScriptライブラリ)

2016/06/16
#js #IchigoJam 

SVGでプログラマブルな書体を作る話 | dwango creators' blog(ドワンゴクリエイターズブログ)」を見て、IchigoJamのフォントもSVG化、きれいにWebサイトで簡単に埋め込めるようになりました。 忘れがちなエンターもver1.2から追加した「エンターキャラクター」が自動で付くのでわかりやすいはず。

埋め込み方法はこちら。

<script src=http://fukuno.jig.jp/app/IchigoJam/ichigojamlist.js></script> <div id="list"></div> <script>makeIchigoJamLIST("list", f2s(function() {/* 10 PRINT A:LED1:WAIT30:LED0:WAIT30:LED1:WAIT1:LED0 20 PRINT "エルイーディーヲ チカチカ" 30 LET A,A+1:GOTO 10 */}))</script>

プログラムの部分を書き換えればOKです!(サンプルHTML

複数のプログラムを埋め込む場合、先頭の ichigojamlist.js の読み込み行は、1ページ内に1つだけおけばOK、divタグの中のlistをlist1,list2などとそれぞれ違う番号にしてください。

大きさをカスタマイズしたり、いろいろ改造したい方は、こちらのプログラム付きのページ「IchigoJam/FontSVG」をご活用ください!
JavaScript + HTML Canvasでつくった従来版「IchigoJam LIST」も合わせてどうぞ!


IchigoJam Font in SVG - sample

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / high-res profile image