福野泰介の一日一創

福井市の中学生からの質問

HTMLのテンプレートにMarkdownを埋め込もうと考えたのですが、いい方法はないのでしょうか。
GitHubでドキュメント書く時に使うMarkdown記法、HTMLの替わりにシンプルにマークアップできるので慣れるといろいろ使いたくなりますよね!作りました!

<script src="https://taisukef.github.io/marked_md/marked.min.js"></script> Markdownを埋め込むよ <script>md(` # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 `)</script>

先頭のscriptタグはページ内にひとつあればOKです。
思う存分 Markdown を使って、サクサクウェブサイト作っちゃいましょう!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

スタイルシートはお好みでどうぞ!

参考までに、この実現に至るまでの調べ方、作り方を紹介。
1. "markdownをhtmlに埋め込む"で検索
2. 「Markdown非対応のテキストエディタでも対応しているように使える、MarkdownテキストをHTMLに埋め込み、ブラウザでプレビューする方法 - Qiita」が見つかる
3. MITライセンスの marked が使えることが分かる。でも、JavaScript埋め込みで /* などに制約あり
4. ` を使った記法を使えば制約が緩めて、シンプルに使えるような関数を実験しながら作成

<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <script> const md = function(html) { const div = document.createElement("div") div.innerHTML = marked(html) document.body.appendChild(div) } </script> </head> <body> <h1>markdown</h1> <script>md(` # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 `)</script>

5. forkしたmarkedにmdを加える(ちょっと強引だけど、MITライセンスなのでOK)
6. GitHubのSettingsで、GitHub Pages として master branch を公開、誰でも使えるようになる

お店を開くのは大変ですが、ネット上の仮想店舗なら簡単、無料!
自分だけのウェブサイトづくり、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-getting-started.git cd node-js-getting-started npm install node index.js

http://localhost:5000/を開くと、下記のような画面がでれば成功です!

(でなかった方 @taisukef までご連絡ください)

3. オリジナルサイトづくり
HTML/CSSを書いて、オリジナルサイトに変更しましょう。

<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>わたしのウェブサイト</title> <meta property="og:image" content=""> <meta name="viewport" content="width=device-width"/> <meta name="format-detection" content="telephone=no"> <style> body { font-family: sans-serif; color: hsl(40, 80%, 10%); background-color: hsl(40, 90%, 80%); text-align: center; } .main { margin: 2em; } .footer a { color: gray !important; } </style> </head> <body> <h1>わたしのウェブサイト on Heroku</h1> <div class=main>ようこそ!わたしのウェブサイトへ</div> <div class=footer><a href=https://fukuno.jig.jp/>無料ではじめるウェブサイトづくりHeroku編</a></div> </body> </html>

上記HTMLとCSSでできたウェブサイトを自由にアレンジし、publicフォルダに index.html というファイル名で保存。
先程開いた、http://localhost:5000/をリロードしてみましょう!

できました!

4. ウェブサイトを公開する
Herokuにユーザー登録して、Heroku CLIをインストールします。
再度、ターミナルやコマンドプロンプトを開いて、同じディレクトリへ移動(cd)し、URLのホスト名にあたるユニークな名前をアルファベットと数字、ハイフンの組み合わせで決めます。

heroku create taisukef-firstweb1

私はここで taisukef-firstweb1 と名付けましたが、同じ名前は世界中の誰であっても付けられません。
続いて、Herokuのサーバーへファイルをアップロードします。

git add . git commit -m "add index.html" git push heroku master

commitの後に続くパラーメーターで、コミット時のメモを書いておくのがプロジェクト管理ツール git のポイント。
開いてみましょう!

heroku open

無事、表示されましたか?
付けた名前 + .herokuapp.com があなたのウェブサイトのURLになります!

5. 更新が面倒?
マイクロソフトの子会社、GitHubが提供する、GitHub Desktopから「Add Repogitry」で追加すれば、GUIで使えます!

6. next steps...
あとは、自由にデザイン変えたり、内容を追加したり、ページを増やしたり、サーバーサイドのなにかプログラミングを加えたり自由自在です。
こちらが、今回ベースに使った Node.js の入門です。データベースへの接続方法の記載もあるので、試してみましょう。(add-onsは、カード登録が必要な様子)
データーベース入門に、北九州高専生で、インターンOB、ふっけの記事!
[Heroku Postgres] Herokuを使って無料でデータベースを利用する - Qiita
この記事きっかけで Heroku 初使用、ありがとう!


かんたんにスタートできるHeroku、制限が来そうなら、月額$7からの有料プランを検討しましょう。

自分でサーバーを管理にチャレンジするなら ConoHa(プリペイドOK!)やさくらインターネットのVPS、 サーバーサイドのプログラミングが不要なら、GitHub Pagesがオススメです。


小中学生向けプログラミングコンテスト「PCNこどもプロコン2019-2020」締め切り間近!
プログラミングに慣れてきたら、サーバーサイドプログラミングにもチャレンジしよう!

マイクロソフトのWebサーバーは、1996年、ASP(Active Server Pages)という技術からスタート。 Windows Script Host として、VBScriptというスクリプト言語でサーバーアプリケーションが作れます。

なんと、VBScriptの互換でマルチプラットフォームな「OpenVBS」がナチュラルスタイルから登場!
さすが、ZOZOを支える福井の企業!
ZOZO / NaturalStyle ~ZOZOを作っています~ | Natural Style

早速動かしてみます。

cat > test.obs WScript.ECho "HELLO!"

そして、実行

penb test.obs HELLO!

なんと、ASP風も動きます。

cat > webserver.obs osp = new OpenASP osp()

webサーバーアプリケーション用のコードはこれだけ

penb webserver.obs bindto: 0.0.0.0:8000. Press ENTER to stop server.

http://localhost:8000/test.osp を開けば、wwwroot/test.osp がサーバーで実行され、ブラウザで表示されます。
WebSocketでつながりサーバーとのリアルタイム通信もできる test.osk のシンプルなコードがすごい!
Windows, Mac, Linux で動きます!

ASPはC++で簡単に拡張できるのがポイント。COMコンポーネントを作って、CreateObjectで生成する仕組みもちゃんとあります!

懐かしついでに、かつてよく作ったアクセスカウンターをOpenVBS用COMコンポーネントとして作ってみました。

COM-COUNTER (src on GitHub)

C++との接続部分の COUNTER.cpp の一部はこんな感じ。必要な部品はサクッとつくって、BASICをグルー言語、のりのように使うのもいいですね。 久々に使った、iostreamとオーバーライドされたアロー演算子!

HRESULT STDMETHODCALLTYPE GetIDsOfNames(REFIID riid, LPOLESTR *rgszNames, UINT cNames, LCID lcid, DISPID *rgDispId){ if (_wcsicmp(*rgszNames, L"Inc") == 0){ *rgDispId = 0; } else if(_wcsicmp(*rgszNames, L"Dec") == 0){ *rgDispId = 1; } else if(_wcsicmp(*rgszNames, L"Get") == 0){ *rgDispId = 2; } else if(_wcsicmp(*rgszNames, L"Reset") == 0){ *rgDispId = 3; } else { wprintf(L"###%s: Implement here '%s' line %d. (%ls)\n", __func__, __FILE__, __LINE__, *rgszNames); return DISP_E_MEMBERNOTFOUND; } return S_OK; } HRESULT STDMETHODCALLTYPE Invoke(DISPID dispIdMember, REFIID riid, LCID lcid, WORD wFlags, DISPPARAMS *pDispParams, VARIANT *pVarResult, EXCEPINFO *pExcepInfo, UINT *puArgErr) { if (dispIdMember == 0) { n++; save(); } else if(dispIdMember == 1) { n--; save(); } else if (dispIdMember == 2){ pVarResult->vt = VT_I8; pVarResult->llVal = n; } else if (dispIdMember == 3){ n = 0; save(); } else { return DISP_E_MEMBERNOTFOUND; } return S_OK; }

VBScriptは、MSXでも使われた Microsoft BASIC、Windows用に広く使われる Visual Basic の血を受け継ぐBASIC系言語。 BASICならいける!という方、サーバー側プログラムにもチャレンジしやすい環境が誕生しそうです!

WScript.Echo という文字が懐かしく、昔書いたVBScriptのプログラム探してみましたが見つからず。合わせて使えた ほぼJavaScriptな JScript の方を使っていたようです。 後のHTML5となるマイクロソフト提唱 dynamic HTML と後にJavaScriptに取って代わられた Java Appletを使って、サーバーとのリアルタイム通信であれこれ遊んでいた90年代、webの世界は広がりましたが、ベース技術は変わってませんね。

ソースコードがコンパクトかつCC BYのオープンライセンスなので、プログラミング言語の学習、web技術の学習、オレオレ言語、オレオレプラットフォームづくり、C++を使った限界までパフォーマンスを引き出したい人にもオススメです!

Let's start OpenVBS!

最強の学習ツール、ネットにつながったパソコン。

IchigoJam BASICで学び、ノートパソコンにステップアップする一歩手前、無線LAN接続ボード「MixJuice」を使って IchigoJam をブラウザ化する「Ichigobrowser」を作ってみました。webサイトへアクセスして日本語が読めます!

単にパソコンを手にしたこどもは、ゲームで遊んだりYouTubeにハマってしまうだけかもしれません。 プログラミングから触れてもらうことで、こどもたちは自分で創る楽しさ、自分で学ぶ楽しさ、コンピュターとネットの本当の力に気がついてくれます。

10/1から募集開始になった「第10回PCNこどもプロコン2019-2020」でノートPCをゲットできるよと話すと、鯖江の小学生の子たちみんな目をキラキラさせてチャレンジしたいという頼もしい声!(鯖江市全4年生総合2コマプログラミング教育授業動画公開


Ichigobrowser の仕組み:サーバーで中継プログラムを動かして、URLをMixJuice経由でおくると、IchigoJamで読めるようにカタカナ化されて、リンクと共に文章が送られてきます

11111 @A:?"MJ GET sabae.cc:5001/?u=";STR$(S):END OK2 S="https://ichigojam.net/":GSB@A

Ichigobrowserの使い方:コマンド「OK2」でエラー表示を止めて、変数SにURLをいれて、中継サーバー(仮に動作させている sabae.cc:5001)に渡すと、そのページが返ってきます。意外と読めるカタカナページ!


目指すはMSX! Raspberry Pi より安価な IchigoJam 発表!」をIchigobrowesrで表示!

Ichigobrowser」は、サーバーで動くPythonの中継プログラムで実現しています。
プログラムはオープンソース、こどもたちのために活用ください(src on GitHub)


ロゴデザインはドット絵ツール「dote


参考になった、PCN大阪、森さん著の「Python 2年生 スクレイピング入門
requetsを使って、BeautifulSoup4でタグ解析、Aタグのリンクを抽出して、カタカナ化して、返却!


こちらの本、jigブラウザがきっかけで取り組みを始めた鯖江市のオープンデータも掲載!
データをプログラムで使う楽しさ、広まりそうです。


2004.10.1の jigブラウザ 誕生からちょうど15年!
人類最強のコミュニケーションツール、web上の革命はまだまだ始まったばかり。

IchigoJam is small but powerful computer! (IchigoJamはちっちゃいけど強力なコンピューター)
You can use IN or OUT command to manipulate devices. (IN/OUTコマンドを使っていろんなデバイスを操れます)

Today I updated IchigoJam web to test I/O. (I/OテストできるようにIchigoJam webをアップデート!)

"IchigoJam web"
Please press "I/O" button to open the control panel. ("I/O"ボタンでコントロールパネル表示です)
Enjoy computing! (コンピューターと遊ぼう!)

自治体オープンデータの意義は、自治体の仕事を減らし、民間企業による豊かさの創出!


オープンイベントさいたま
埼玉県オープンデータ」で唯一の4つ星オープンデータ、RDFで提供されていた広報情報オープンデータをjig.jp、この夏のインターンに参加する高専生による作品「福井県のイベント (src on GitHub)」を埼玉化。 自治体による広報の仕事を減らせるかも。

RDFにもターゲット情報が入っていれば、若者や、高齢者など、対象別に見やすいアプリづくりもできるので、一層伝わりやすくなります。 Vue.jsを使ったモダンで見やすいアプリづくりは、地域の高専生や、JavaScriptが使える小中学生にとって良いネタにもなります。


オープンデータを庁内で広めるオープンデータリーダーを育成する総務省企画「オープンデータリーダ育成研修
自治体の中でやっている繰り返される仕事、オープンデータで効率化できませんか?
イノベーションのはじめのいっぽは、当たり前に疑問を持つこと。
今までを変える意識と行動力を持つ人、それがリーダーです。
教材はオープンデータ、今すぐ、行動を!


オープンデータによる連携を活かす、11万件もの公園データを提供する「PARKFUL
公園の設備を提供する会社、株式会社コトブキとの連携がおもしろい!


東さんによるオープンデータ講義。震災での反省から始まったオープンデータ。避難所データがオープンデータではないと、活用するために問い合わせが必要。実際に30箇所問い合わせて、OKの返事はたった9。 事実、災害時にサーバーがダウンしていて避難所データにすらたどり着けない事態が未だに発生しています。


ネット時代、データを広く共有するコストが劇的に下がりました。まだまだ市民意識が追いついていませんが、まずはデータがあれば、楽しく可視化するアプリが生まれ、広まります。 アプリを誕生させるためには、開発者にとって優しく横展開が可能でうれしい「5つ星オープンデータ」が必須!


鯖江市のオープンデータ産みの親、牧田さんに会ったことがきっかっけで、自分でなんでもやっちゃうことにしたという、埼玉県深谷市の斉藤さん! 「ふかやMap」から様々な位置情報付きデータをオープンデータとしてダウンロードできます。


odp - オープンデータプラットフォーム
5つ星オープンデータはじめのいっぽに、避難所データをExcelでまとめてアップロードするだけ。無料です。

さまざまな業務課題や、社会を豊かにする取り組みへのチャレンジに向けて、まずは最小限の手間で、5つ星オープンデータ化と、データをアップした瞬間に動くアプリをご体験を!

5つ星オープンデータ対応避難所ナビアプリ「ヒナンパス

今週末、鯖江のサンドーム福井ではB'zライブ
気になるサラベ柄ポーチ、サイズ感が気になったのでVR。

realbox in VR - 幅18cm x 高さ10cm x 奥行き8cm」スマホVRでもOK!
なるほど、思ってたよりちょっと大きいけど、悪くないかも。
手に持って動かせるといいかも。
自分の手の大きさを測って、コントローラーの替わりに出すと、きっともっと分かりやすい。
PCでも動きますが、サイズ感は伝えられません。


realbox 100インチテレビ (SONY KJ-100Z9D)
おまけに、100インチの4Kテレビ、SONY KJ-100Z9D(コンポジット入力端子も付いているからIchigoJamもOK!)も見てみました。大きい!

URLのパラメータで大きさと色を自在に指定できる、リアルサイズを体感するVRアプリ「realbox」

W cm x H cm x D cm

今回のプログラムは37行でした。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>realbox</title> <meta name="description" content="real box in VR"> <script src="aframe.js"></script> </head> <body> <script>"use strict" window.onload = function() { const hash = document.location.hash let w = .18 let h = .10 let d = .08 let c = "#333333" if (hash.length > 1) { const s = hash.substring(1).split(',') const a = s[0].split('x') w = parseFloat(a[0]) / 100 h = parseFloat(a[1]) / 100 d = parseFloat(a[2]) / 100 c = s.length > 1 ? "#" + s[1] : c } const box = document.createElement("a-box") box.setAttribute("position", { x: 0, y: 1.3, z: -.5 }) box.setAttribute("width", w) box.setAttribute("height", h) box.setAttribute("depth", d) box.setAttribute("color", c) scene.appendChild(box) } </script> <a-scene id="scene"> <a-sky color="#ECECEC"></a-sky> </body> </html>

links
- VRではじめる現代HTML入門 - Oculus Quest x 福井高専生
- 50行で作るVRマイクラ風 / boxcraft for Oculus Quest with A-Frame
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest
- 異次元の分かりやすさ、触って学ぶVR数学、ベジェ曲線編 on Oculus Quest

A project started to translate the documents of IchigoJam for English speakers from a member of IchigoJam-FAN.
I added descriptions in broken English to IchigoJam doc opendata, and updated apps.

"IchigoJam BASIC command list" also for printings

I'd be glad if you sent me a comment in cool translated words!
"IchigoJam doc repository on GitHub"

5つ星オープンデータとして規格化しておくと、自分で使うときにも便利!

大人には便利なアプリですが、スマホを持っていない小学生には紙、大事。
アプリと同じオープンデータを使って紙出力版を生成するwebアプリを作りました。

IchigoJam BASIC コマンド一覧 (印刷用)PDFダウンロードはこちら
やさしい順に並んでいますが、ABC順カテゴリ順としても表示可能。お好みでどぞ!


IchigoJam BASIC コマンド一覧アプリ
カテゴリデータ、優先順位データなどを追記したので、アプリも合わせてバージョンアップ。機能ごとの簡単にチェックできるようになりました。 sabae.cc語彙も少し成長。

オープンデータはGitHub上にあります「IchigoJam/doc: documents of IchigoJam
issuesを使ったコメント、プルリクなど、大歓迎です!
次は英語化?

そろそろリリース、IchigoJam BASIC 1.4。
高専生、大学生など、スマホを持っている人にもわかりやすいリファレンスづくり、スタート。


IchigoJam BASIC コマンド一覧
ソースはGitHubにありますので、追記翻訳など、プルリク、コントリビューター希望、歓迎です。
1.4搭載予定のコマンドや、使い方も含まれています。


CSVデータ
schema.orgの語彙と、足りない気がしたものはsabae.cc語彙を作って補っています。

ichigojam-1.4.0b01.zip
- POINTで文字がある場所をチェックした場合1を返すように変更

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像 / RSS