読者です 読者をやめる 読者になる 読者になる

#daiizメモ

フレンチフライ トリュフ塩仕立て

技術ネタはてブ数が多いごはん情報

スポンサーリンク

【Web Assembly 日記】4日目

Web Assembly の Hello, world! がようやく動いた.必要なツールのインストールにだいぶ手こずった.初めからなんとなく長期戦になる予感がしていたので,手元のMacBookでは行わずに,この前設定したGCEインスタンスでやることにした.

このときにセットしたのはDebian,メモリ4GB,ディスク10GBという小さめな構成だったけれど,いけるだろうと踏み切って始めたところ,結局いろいろ足らずという状況だった.動かしながらメモリやディスクを増強していき,最終的にはメモリ8GB,ディスク30GBとなった.

https://i.gyazo.com/91a9a7bd233a7206500cfa614bf8d426.png 図.前回C言語で書いた Hello, world! がブラウザで表示された様子

次回は,ツールのインストール過程と生成されたファイルについて書きます.

バックナンバー

【連載】Web Assembly 日記 - daiiz - Scrapbox

【Web Assembly 日記】3日目

Web Assembly 日記の3日目です.C言語で簡単なプログラムを書きます.

#include <stdio.h>

int main (int argc, char **argv) {
    printf("Hello, world!\n");
    return 0;
}

このようなC/C++言語で書かれたプログラムをclangでLLVM IR (Low Level VMの中間コード表現) に変換し,さらに,LLVM → JavaScriptコンパイラである Emscripten を用いてブラウザで実行可能なコードに変換していきます.Emscriptenでの処理では,Web Assemblyに変換するために Binaryen というツールチェーンが使われるようです.

次回以降は上記のような一連の変換を行う環境を整えて,実際に実行して得られたコードの中身を読んでいきたいと思います.またWeb Assembly に関して調べた事柄は,出典元を添えて https://scrapbox.io/daiiz/wasmDiary でも逐次まとめています.

視界が大変

文字を読んだり書いたりすると,焦点を当てている箇所に光の塊が現れてその部分の文字がほぼ読めなくなり,その周辺に光のミミズみたいなものが漂っていたりする.時々虹色に輝きながらふわふわしている.中心の光塊は焦点に合わせて移動してきて厄介.ミミズは,邪魔だけど文字認識を妨害するほどではない.しばらく休むとあっさり直ったり,稀に半日くらい邪魔されている日もある.なんだろうこれ,疲れ目だろうか?

https://i.gyazo.com/9ceaac8edf0d57ccde1545d43fa9c516.jpg

この文章を絵にすると上のようになる.Gyazoのお絵かき機能による矢印や文字がなかったら全く伝わらなそうな図だった.お絵かき機能素晴らしい.

Scrapboxページの文章をMarkdownに変換するBookmarkletを書いた

Scrapbox (の一部) 記法 で書かれたScrapboxページの文章を,対応するMarkdownに変換するBookmarklet「Scrapbox2Markdown」を書きました.ひとまず必要な記法のみの変換コードを勢いにまかせて作ったので,まだ対応できていない変換も結構あります.いまのところ以下の記法に対して動作します.

  • プレーンテキスト
    • 改行単位の文字列
  • 多段箇条書き
    • 入れ子構造も正しく変換される(はず).
  • 見出し
    • 文字の大きさレベルも正しく変換される.
    • Scrapboxの一番小さい文字レベルの見出し [* 見出し] は,Markdownでは [##### 見出し] に変換されるようにした.
  • リンク
  • 画像
    • 画像とリンクのあわせ技もいける
  • 単一行コード
    • バッククオートで囲まれた文字
スポンサーリンク

実際のところは,Scrapbox記法がHTMLとして描画されたものを取得して変換しているので,記法→記法変換しているとは言えなさそうです.ScrapboxのコンテンツをMarkdownコードに変換しているという表現が良いかもしれません.

Image

リポジトリ内の main.min.js の内容の先頭に javascript: を付加したコードをBookmarkletとして登録しておき,Scrapboxのページを閲覧中にBookmarkletを発動すると,ページの内容がMarkdown記法に変換されて新しいウィンドウに表示されます.

  • プライベートなScrapboxページ上で勢い良く執筆 → Markdownに変換してブログに投稿
  • 既存のScrapboxページの内容をMarkdownに変換してリポジトリの README.md に追記

のように,すっかり慣れきってしまったScrapbox記法で書きたいけれどMarkdownで書かないといけない!という場面で,このBookmarkletが活躍します.(この記事もScrapboxコンテンツから変換されて生成されました.)

DesignDoc