サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
猫
fukuno.jig.jp
Creative Adventureの作品「ピカピカ基板」の改造で使った、ブラウザ上で気軽に動かせる電子回路シミュレーター「Circuit Simulator Applet」はオープンソースだったので、日本語を追加しました。 「ピカピカ回路 - Circuit Simulator version 2.8.1js - 日本語対応版」 src on GitHub 前回設計した回路もそのまま動きます。最新コードにプルリクしたので、もしかしたら反映してもらえるかも!(公式サイト、Circuit Simulator Applet) 「add local_ja by taisukef · Pull Request #71 · pfalstad/circuitjs1」 Appletの名前の通り、元は懐かしのJava Appletとして実装されたもの。GoogleのGWTによって、JavaScriptに変
LLM、大規模言語モデルを使った文章生成系AIは大掛かりなコンピューターが必要ですが、VRAMが8GBと比較的コンパクトなGPUでもそこそこ動作するモノもあります! 「rinna、Llama 2の日本語継続事前学習モデル「Youri 7B」を公開|rinna株式会社」 Meta社が2023年7月に公開した大規模言語モデル「Llama 2」をベースに日本語に特化させ学習させた「Youri 7B」が登場。 PythonのWebフレームワークFlaskを使ってAPIサーバーにして、JavaScriptから簡単に使えるようにしました。 import { llm } from "./llm.js"; const prompt = `ユーザー: 神はいますか?\nシステム: `; const res = await llm(prompt); console.log(res); 回答が数秒で、短い回答だ
何か計算をしたい時、表計算ソフトを使うか、プログラムを組むかで迷います。 万能なプログラミングに表計算ソフト分を混ぜてみることで、より早く計算できるかも?試作してみました。 「table-calc」 表内のデータをget関数を使って取得し、set関数で設定する、プログラムを書いておくと、表内に更新があったら即座に反映されます。 これでも割と汎用的に使えます。 外部の関数や、API呼び出し、作成したフォームの保存や、整形、データインポートエクスポートなど、改良の余地も大いにあって楽しめそうです。 「table-calc src on GitHub」 input-tableタグと、monaco-editorコンポーネントを使ったシンプルなオープンソースです。 「input-table tag」 CSVの表形式による設定・取得が可能な入力コンポーネント、input-tableにセル毎の設定・取得
Matz葉がにロボコン向けに作ったRubyによるレゴ制御、LWP.jsとRuby-Jamでしたが、その場でプログラミングしている様子を見たこどもたちにはちょっと難しそうな印象を与えてしまいました。 引いてしまう理由は、アルファベットの小文字や見慣れない記号が並ぶプログラミング言語にあると仮説を立て、作った新プログラミング言語「IchigoRuby(イチゴルビー)」。記号とタイプ量が少なくて済むRubyの文法そのままに、予約語をアルファベット大文字でも使用できるようにした、Rubyのサブセットです。 「IchigoRuby」 RubyParserで構文木(AST)を生成する200行弱のミニインタプリタ「execRuby.js」へ渡すプログラムを、まるごと小文字にしています(文字列内も変換されてしまう問題はIssueに記述)。 WHILE 1 LED 1 SLEEP 1 LED 0 SLEEP
deck.glをESモジュール化したdeck-esを使って、「地理院タイルとdeck.glで3D地図をつくろう - Qiita」で紹介されていた、地理院地図の標高データを使った3Dモデル表示「deckgl-gsi-terrain-layer」をESモジュール化!リアルな3D地図が気軽に使えるようになりました。 「deckgl-gsi-terrain-layer」地理院地図、src on GitHub 高低差が反映された日本地図をぐりぐり動かせます。シフト押しながらドラッグでぐるぐる回転、スクロールアップダウンでぐぐっとズームします。 ESモジュール化に当たって、deck-esで足りない分は、元のソースから必要な分だけもってきてutils.jsにまとめました。 「deckgl-gsi-terrain-layer - 鯖江市の見慣れた風景」地理院地図 いろいろ名所を巡るのも楽しいですね。デジタ
自由入力された文章をデータ化する形態素解析ですが、巨大な辞書が必要になったり次々登場する単語に対応することなどなかなか大変そうなイメージでしたが、機械学習を使った、単語分割するコンパクトな実装「TinySegmenter」を発見。ブラウザやDenoでいい感じに使えるESモジュール版にしてみました。 「頻出単語表示 by TinySegmenter」 文章を入れると、頻出単語順に並び替えて表示する、サンプルアプリ。このアプリでは、3文字以上を単語としています。一日一創ブログをコピペしてみるといい感じに! プログラムで組み込む方法は簡単、ブラウザやDenoで下記コードを入れるだけ。 import { TinySegmenter } from "https://code4fukui.github.io/TinySegmenter/TinySegmenter.js"; const segs = T
遂にスタート、日本の基本となるオープンデータを含む、ベース・レジストリ! 「ベース・レジストリのパイロット事業における実証サイトの公開を開始しました|デジタル庁」 「日本の市区町村(出典:ベースレジストリ)」 こちら最も確からしい日本の市区町村の検索アプリを作成! フィルタで素早く絞り込めます(福井県で絞り込むと17市町が表示) 「ベース・レジストリ データカタログサイト」 CKANによる公開、アドレス関係はzip圧縮されたCSVで提供されているので、APIを使って取得可能です。 日本の市区町村マスターをダウンロードして、zip展開して、CSVファイルとして書き出し、JSONに変換して表示する例。 import { unzip1 } from "./unzip1.js"; const url = "http://gov-csv-export-public.s3.ap-northeast-1
csv-mapタグをベースに簡易化して、ウェブサイトにアクセス情報としての地図埋め込みに使う拡張タグ「map-viewタグ」を作りました。 「map-view tag demo」 name、緯度経度、zoomレベルを設定するだけでOK! <script type="module" src="https://code4fukui.github.io/map-view/map-view.js"></script> <map-view name="Hana道場" latlng="35.944571,136.186228" zoom="10"></map-view> サイトの表示優先なので、スクロールで地図が拡大縮小してしまうことがないように設定済み。 クリックするとGoogleマップのナビへリンクしています。 地図は日本国内を網羅する国土交通省、国土地理院の地理院地図。 APIはオープンソースの
「新型コロナワクチン」の接種が進んでいます。 政府CIOポータルから「ワクチン接種状況ダッシュボード&オープンデータ」が公開されたので、早速カラム地図化しました。 「新型コロナワクチンの接種状況(医療従事者含まず) - 政府CIOポータルオープンデータ」 ワクチン接種はまだ始まったばかり。医療従事者のオープンデータ公開も始まれば加えます。 人口データは、2019年10月1日、総務省統計局推計データをCSV化して使っています(data on GitHub)。 「ワクチン初回接種率」 ワクチン初回接種率、最も高いのは和歌山県で7.56% 「都道府県、男女、年齢別ワクチン接種数CSVデータ」 NDJSONのダウンロードからCSVへの変換プログラムと共に、GitHub「covid19vaccine by Code for Fukui」で公開していきます。 初めてみた、改行区切りのJSONデータ、N
オープンな地図アプリづくり。オープンストリートマップと地理院地図から国連ベクトルタイル(UNVT)への変換環境が整ったので、ちょっと寄り道して、地図ライブラリを自作してみることにしました。 3DライブラリThree.jsはうれしいことに、ESモジュール対応が進んでいたので、ベクトルタイルを読み込み、WebGLで表示させてぐるぐる回すサンプル完成! 「mapthree-es demo1」(src on GitHub) JavaScriptが主に書かれた82行のHTMLが1ファイルのみ。ローカルで開いても動きます。apikeyも何か別にインストール必要も一切ない、クリーンなJavaScriptです。(vector-tile、point-geometryをforkしてESモジュール化して使用しています) zxyのディレクトリ毎に分割された地図、あとは大きさとオフセットが設定して、拡大率毎に順次読
GTFSとは、Googleマップとも連携する便利なバス情報オープンデータの世界標準です。 GTFSと、リアルタイムな位置情報オープンデータ、RTFSリアルタイムを表示するwebアプリを作りました。(GTFS = General Transit Feed Specification) 「GTFSmap - 宇野自動車」 IchigoJamで開発されたバスロケーションシステム用デバイス「いちごロケ」が活躍する岡山県の「宇野バス」さんの様子を表示。 「GTFSmap - 宇野自動車」 拡大した様子。建物がなんちゃって3D表示されてます。右クリックしながらマウス操作でグリグリ回転できて楽しいです。 マーカーが奥行き無関係になっているのは直したい。地図ライブラリ「MapLibre」はオープンソースなので直してプルリクすることもできます。 Googleが提唱するGTFSは、GitHub上「google
3x3の領域で再帰的に分割する「Geo3x3」のいいところは、単純な前方一致で絞り込めるところ。 例えば、東京タワーのGeo3x3 E9139659937288 は、東京都港区あたりのメッシュ E913965 で始まります。 周辺を含めるときは1桁削って1から9を足すだけ。地球上、どの場所でも使えます。 緯度経度を持つ多量のデータから検索すると言えばデータベース。 select文でおなじみSQL(エスキューエル)は、主にデータベースからデータを取得するためのクエリー言語として使いますが、プログラムを組み込むことができるので、プログラミング言語でもあります。 ただし、標準化がちょっと遅かったせいで、データベースによって方言があります。 オープンソースでフリーで使える有名2大データベース、PostgreSQLとMariaDB(MySQL互換)に対応しました。 「Geo3x3 対応言語、58!」
前回の雪かき事故を知らせるアプリの通知先はiPhoneアプリでしたが、AndroidやパソコンのChrome, Firefox, Edgeでは、W3Cでオープンに規格化が進む WebPushこと「Push API」が使用可能とのことで、実験してみました。 コマンドラインから、webから、結構手軽に通知が送れるのでなかなか楽しく、便利です!うまく使えば、気になる情報のチェックや、リマインドに大きく力を発揮してくれそうです。 本ブログにもそのうち追加しようと思いますが、ひとまず、実験できるプログラム一式ができたので、公開します。 WebPushは、各ブラウザベンダーが運用している通知サーバーにデータを送って、そこから各ブラウザへと通信される仕様のようです。 Node.js 用のライブラリを使って、通知用の設定と、コマンドラインで送信するツール、Deno で作ったサンプル通知管理サービスと、クラ
GitHubが活躍した1年でした。経済産業省も全角半角や法人番号などのモジュール「IMI Tool Project 」としてGitHub公開。そのたぶん第二弾「Digital Service Playbook」をハックします。 「経済産業省 Digital Service Playbook 参照リンク一覧」 本文章作成に参考にされたリンクを抽出し、CSVオープンデータ化、検索できるアプリとしました。 「経済産業省 Digital Service Playbook 0.9.0」 経済産業省DX室のメンバーによる、デジタルサービスを生み出すうえで大事にしていることが詰まったドキュメント。 「meti-dx-team/METI-Digital-Service-Playbook」 まずは、GitHub公開というオープンな第一歩がうれしい! 次はより使いやすく。PDFからMarkdownなど、オープ
日本のミスターインターネット、村井純さんが座長を務める「Trusted Web推進協議会」の資料がGitHubで公開されました! 経産省に続き、スマートでエンジニアにも優しい進め方がうれしいですね。 「Trusted Web 推進協議会の公開ドキュメント」 forked by Code for Sabae Markdownや、RDFなど人にも機械判読しやすくなるよう資料を書き直すプロジェクト、はじめました。 こちら元資料のPDFと、Markdown化した議事次第見比べてみてください。 # [Trusted Web 推進協議会](https://www.kantei.go.jp/jp/singi/digitalmarket/trusted_web/index.html) (第1回) ## 日時 令和2年10月15日 10:00-12:00 ## 場所 通信システムを用いた遠隔開催 ## 議事
プログラミングボードゲーム「囲みます」の今日の試合、戦況を見ながらリアルタイムに手動でAIを切り替えるプログラムを作ったすずともが優勝。 重要なのは人とコンピューターのコラボ!GUIをHTML/CSS/JavaScriptで、手軽に作るためのライブラリを作りました。 まずはサーバー側。クライアント届くデータを await getで受け取り適当に処理してsendで返すテストをプログラムを作って、test-sync.js として保存します。(この例では500msec無駄に待って、倍返し) import { ServerSync } from "https://code4sabae.github.io/js/ServerSync.js"; import { sleep } from "https://code4sabae.github.io/js/sleep.js"; new ServerSyn
COVID-19 新型コロナウイルス対策ダッシュボード、毎日更新される都道府県全体のオープンデータと都道府県別PDFデータのアプリへの反映も日課です。 加えて、毎週金曜日には対策病床数PDFデータの更新があります。 CSVオープンデータ以外は、データの変更によってPDFからの自動変換でエラーが起きることがあるため、自動化はしていません。本日、2つ処理でエラーが発生。 対応ついでに、アプリを作りました。 「新型コロナウイルス感染症患者の療養状況 病床使用率」 入院患者、重症患者、宿泊療養施設、それぞれの使用率データを都道府県別に表示するアプリです。厚労省発表データをCSV化し、オープンデータとして公開しているデータをカラム地図で表示しています。 2つのエラー原因、1つ目はうれしい変更、療養状況データに病床使用率とフェーズの項目の追加され、いくつか項目名の変更がありました。 ↓(上:先週更新デ
webアプリのサイズ、小さいほど読み込みが早くて快適に! Zen言語でシンプルな WebAssembly、動かしてみました。(src on GitHub) C言語以上に細部に手が届く、軽量静的型付け言語の「Zen言語」は、WebAssembly出力にも対応。 下記、たった3行、誰にでも分かりやすい足し算するだけのプログラムを「zen build」でコンパイルするだけ、HTML/JavaScriptから呼び出して、利用できます。(src on GitHub) export fn add(a: i32, b: i32) i32 { return a + b; } (プログラム解説) export → 外部から使うよ fn → function 関数だよ add → 関数名はaddにしよう a: i32 → 符号付き整数32bitのパラーメータaが関数addの引数1つ目 b: i32 → 符号付
遂に、厚労省がCSVオープンデータ公開スタート! 「オープンデータ|厚生労働省」 検査数、患者数、退院数、死亡者数などが、CSVオープンデータとして公開されました。(都道府県別や、病床数はまだの様子) 高校プログラミング「情報I」の範囲で補助教材として使えるように、シンプルにまずは活用例をつくってみました。 「補助教材、CSVオープンデータをダウンロードしグラフ化、2軸」(src on GitHub) 早速 Chart.js を使ってグラフ化!2軸にして、検査数と発生数を比較できるようにしました。 「補助教材、PCR 検査陽性者数(日別)」(src on GitHub) まずはシンプルに日別の陽性者数のみ表示からいじり始めるといいです。 <body style="margin:0;text-align:center;"> <canvas id="chart"></canvas> データ出典
ブラウザやDenoでサクッと動く、法人番号からの検索するESモジュールができました。 好評な経産省によるオープンソース「IMIコンポーネントツール」の7つ道具、一通りできました! 「IMIコンポーネントツール」法人種別名の抽出コンポーネント追加(src on GitHub) サンプルとしていれている番号はどんな法人でしょう? [変換]ボタンを押してみまてください。 使い方は簡単です。下記コードを main.html として保存して、ブラウザで開くだけ! <script type="module"> import IMIEnrichmentHojin from "https://code4sabae.github.io/imi-enrichment-hojin-es/IMIEnrichmentHojin.mjs"; const main = async () => { const json
全角半角という言葉は、パソコン普及前夜のワープロ時代の遺物。「住所を全角で入れてください」など、優しくないお願いは排除し、必要な処理はプログラムでしましょう。 日本政府、経済産業省(経産省)から「IMI 情報共有基盤 コンポーネントツール」が発表されました。 5つ星オープンデータの語彙を定める「共通語彙基盤IMI」に関連したオープンソースなJavaScriptで作られたツール群です。 Node.js を前提に作られていますが、ブラウザや Deno で動かしたいので、ひとまず簡単そうな「全角-半角統一コンポーネント」を移植。インストール不要で下記のようにすっきり使えるものができました!(src on GitHub) $ cat > main.mjs import IMIMojiConverter from "https://code4sabae.github.io/imi-moji-conv
自宅学習が続く中、iPadを使う家庭も多そうだとiPad miniを入手。いつの間にかSafariのフルスクリーンAPIに対応していたことに驚き、IchigoJam webをiPad向けに調整。 ホーム画面に追加して起動すると、まるでIchiogJam専用デバイス! Safari上からの利用だと[FULL]ボタンで、フルスクリーン化する(横画面で文字の大きさが小さい問題は調査予定) iPhoneで見た時も使い勝手も合わせて向上!iPadがあると写真が相互に取れて地味に便利。 物理キーボードや、フリック入力はいいけど、ソフトキーボードは入力にストレスあり。 調べてみると、割とややこしい手順で、iPhoneと同等のフリック入力に変更できた。 iPadでフリック入力を使う方法 1. 設定、キーボード、新しいキーボードを追加、「日本語-かな」を追加 2. 設定、キーボード、「キーボードを分割」をO
日々変化している今、地域ごとの現在患者数と感染病床数のリアルタイムな把握が、医療現場、行政、市民いずれにおいても重要です。 「COVID-19 Japan 新型コロナウイルス対策ダッシュボード」が、大きく広がりFacebookのシェア1万、アクセス急増にも急遽対策。データとアプリの力を感じます。 「感染病床使用率」を推定するための病床数の拡大のニュースが続いていますが、確定的な数が分かる例はまだ少ないです。(福井県庁は、結核病床を使うと発表) 「COVID-19 Japan - 都道府県別 感染症病床数(カラム地図7x7、厚生労働省データ)」 こちら、ダッシュボードでの感染症病床使用率の算出に使っている、感染症病床がある医療機関とその数をまとめたアプリです。 厚生労働省が公開しているデータ「感染症指定医療機関の指定状況(平成31年4月1日現在)|厚生労働省」を使用しています。JSON化した
三重県、鳥羽商船高専生4人チームによる三重県版新型コロナウイルス対策サイトもスタート!(forked from 都内の最新感染動向 | 東京都 新型コロナウイルス対策サイト src on GitHub) 全国展開に向けて、厚生労働省が提供しているデータを使ってざっくり状況を確認できるようにしてみました。自動更新されるJSONを使って地元の対策サイト立ち上げに使ってみてください。ただし、データ更新は都道府県での情報提供の方が更新は早そうです。 「COVID-19 JAPAN - 都道府県別 新型コロナウイルス陽性患者数 (カラム地図7x7、厚生労働省データ)」 厚生労働省による「新型コロナウイルス感染症について」では、PDFで国内の発生状況をまとめたデータが提供されていますが、各地のデータと比べるとちょっと時差があるようですが、網羅的にデータがあるのがうれしいです。 PDFは1つ星オープンデ
プログラムが思ったように動かない時、メモリ内容をチェックするのは常套手段。サーバーなどで使われるlinuxではコアダンプというのが有名です。 メモリを読むためにはどう記録されている把握していること、そのマシンのマシン語の知識が必須です。ただ、メモリがギガの単位(10億)までいってしまうと、人の目だけでチェックするのは現実的ではなくなってくるので、支援ツールを使いこなすテクニックが必要になります。 その点、メモリがキロの単位(千)のIchigoJamや、ファミコンゲームなら、自力でなんとかできますし、支援ツールを自作するのも簡単です。 本質的にやっていることは変わらないので、ホワイトハッカー入門にもぴったり! JavaScriptで作られたファミコンのエミュレーター JSNES にメモリのリアルタイムモニター機能をつけるため、GitHubからソースをfork(自分のプロジェクトとしてコピー)
お店を開くのは大変ですが、ネット上の仮想店舗なら簡単、無料! 自分だけのウェブサイトづくり、Herokuを使って無料ではじめる方法を紹介します。 salesforce.comの子会社、Herokuには、サーバーサイドでプログラミングでき、広告なども一切ない代わりにアクセス制限がある、無料版があります。 JavaScript, Ruby, Java, PHP など、さまざまな言語に対応しているHeroku、今回はJavaScript/Node.jsを使って、ひとまずウェブサイト立ち上げまでをご案内! 1. 準備 Node.js をインストール git をインストール 2. サンプルをローカル(自分のPC上)で開く ターミナルやコマンドプロンプトを開いて、任意のフォルダに移動(cd)して、下記を順番に実行 git clone https://github.com/heroku/node-js-
人気のArmマシン語入門の「つぎのいっぽ」ハンドアセンブルをRISC-Vでやってみました。 参考図書「RISC-V原典 オープンアーキテクチャのススメ | デイビッド・パターソン, アンドリュー・ウォーターマン, 成田 光彰」 著者、デイビッド・パターソン氏は、RISC生みの親! せっかくなのでハンドアセンブルしやすく実行効率の良い、16bitの圧縮命令拡張RV32Cを使いたいので、以前使用したエミュレーターにC拡張を勉強ついでに追加実装。(rv32emuの元、TinyEMUはC対応してます) R11=0 R11+=R10 R10-=1 IF R10 GOTO -2 R10=R11 RET RISC-VのC言語呼び出し規約では、R10が第一引数で返り値となり、R11も一時レジスタとして使用可能なので、R10/R11を使用。C拡張の命令のみを使ってasm15r表記で作成。 比較のためにこちら
理研のスパコンに使われたり、格安ハードが登場した2019年のRISC-V。今年もかなり伸びそうな予感のCPU、RISC-V(リスク・ファイブ)。RISC-V版Androidや、RISC-V版ノートパソコンの発売もあるかも? RISC-Vは、由緒正しいハーバード大生まれのRISCアーキテチャーの第五世代。ライセンスフリーで自由に利用できるオープンかつ時代に合わせたチューニングによるハイパフォーマンスが特徴です。 以前32bit版で紹介しましたが、短くシンプルな16bitの縮小命令RV32Cを使って、Arm Cortex-M0学習用のasm15をRISC-Vに対応させたasm15rを設計。 そもそも、コンピューターとは何でしょう? コンピューターとは、膨大な数を記憶し、正確かつ超高速に計算するものです。 どう記憶しどう計算するかを指示する数、それがマシン語。 CPUが違えばマシン語が違います。
App: 緯度経度地図 CC BY fukuno.jig.jp (旧バージョン) Lib: Geo3x3 CC0 Lib: uPlace MIT by taisukef (緯度経度地図のGeo3x3と場所情報コード対応) Lib: egmapjs CC BY fukuno.jig.jp (src on GitHub) Lib: 東京大学空間情報科学研究センター CSVアドレスマッチングサービス Lib: 逆ジオコーダー @geolonia/open-reverse-geocoder MIT by Geolonia → ES module ver. ご要望は「こちら」までお気軽にお寄せください
次のページ
このページを最初にブックマークしてみませんか?
『福野泰介の一日一創 / create every day』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く