フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

HTMLでよく使う概念やタグの書き方をまとめた。

WebAssemblyとは

ブラウザからアセンブリ言語を実行できるようにする技術。
高速化手段、あるいはJavaScriptの処理系にできないことをするといった目的で使用する。

2015年6月、Mozilla、Google、Microsoft、Appleが標準フォーマットとして開発することに合意している。

対応言語はC/C++、Rustなど。最近はGolangも使えるように。

Can I use WebAssembly?スクリーンショット 2018-09-28 16.17.10.png

現在IE以外のほどんどのブラウザでサポートされている。

アセンブリ言語とは

  • マシン語(0と1の世界)と直接1対1に対応したプログラミング言語
  • アセンブラともいう(これはアセンブリ言語をマシン語に変換するソフトのこともいう)
  • 「アセンブル」:アセンブリ言語で記述したプログラムをマシン語のコードに変換すること

例として、C++で書いたHello Worldプログラムをアセンブリ言語で見てみます。

hello.cpp
#include <iostream>
using namespace std;

int main() {
    cout << "Hello World!" << endl;
    return 0;
}

g++にSオプションをつけることでアセンブリ言語を見ることができます。

$ g++ -S hello.cpp

とすると、hello.sというアセンブラファイルが生成されます。

1000行以上のファイルになるので、ここには最初の15行だけ載せてみます。

    .section    __TEXT,__text,regular,pure_instructions
    .macosx_version_min 10, 13
    .globl  _main                   ## -- Begin function main
    .p2align    4, 0x90
_main:                                  ## @main
    .cfi_startproc
## %bb.0:
    pushq   %rbp
    .cfi_def_cfa_offset 16
    .cfi_offset %rbp, -16
    movq    %rsp, %rbp
    .cfi_def_cfa_register %rbp
    subq    $32, %rsp
    movq    __ZNSt3__14coutE@GOTPCREL(%rip), %rdi
    leaq    L_.str(%rip), %rsi

WebAssemblyでHello World

ここからが本題です。

Emscriptenをインストールする

最もポピュラーなEmscriptenを導入します。

git clone https://github.com/juj/emsdk.git
cd emsdk

# 最新のSDKツールをインストール
./emsdk install latest

# アクティベイト
./emsdk activate latest

# パスと環境変数を設定
source ./emsdk_env.sh

結構時間がかかるので、お茶でも飲んでまちます。

実行する

ビルド環境ができたので、早速コンパイルして実行します。

  • Cのファイルを用意
hello.c
#include <stdio.h>

int main() {
    printf("Hello World!n");
    return 0;
}
  • ビルド&実行
$ emcc -0 hello.js -O0 hello.c
$ node hello.js
Hello World!

出力ファイルを.htmlにする

$ emcc -o index.html hello.c

# ローカルサーバーを立てる
## Python3.x系
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 ...

## Python2.x系
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

localhost:8000/ にアクセスすると、

スクリーンショット 2018-09-28 16.49.56.png

ちゃんとHello World!と表示されます。

終わりに

今回はWebAssemblyでHello Worldをやってみました。

気が向いたらもっと複雑な演算処理もやってみてください。

以上です!

[紹介元] HTMLタグが付けられた新着投稿 – Qiita HTMLでよく使う概念やタグの書き方をまとめた。

コメント

記事に戻る

コメントを残す