WebAssembly のいま（再）

WebAssembly の今を Watch

最近、目新しい技術を追いかけられていない状態なので過去のブログ記事を掘り起こして気になる技術のいまを Watch しようと思い立ちました。そこで出てきたのが「WebAssembly」。過去の記事としては2本程しかないものの当時は結構注目して新しい情報が出ると割と Watch しておりました。今はどうなんでしょうか？（そもそも「WebAssembly」って何なの？というところは下記記事をご参照下さい！）
btsn.hatenablog.com
btsn.hatenablog.com

では、最近のトレンドとしては？

「コレ！」という目新しい記事は Google 検索の1ページには出てこなかった感じですが、当時 C や C# でデモを触っていたのと比べると今は WebAssembly + Rust の環境が一番メジャーなようで。この記事の書きついでに TIOBE のランキングを見た限りでは Rust は25位にいるようではあるのですが、実は AWS Lambda や AWS Fargate の実行基盤である「マイクロ VM」の仮想マシン「Firecracker」の開発に利用されているんですね。しかも、「Firecracker」ってオープンソースだったということを初めて知りました。世の中、知らないことが多すぎます。(;´Д｀)
www.itmedia.co.jp
github.com

利用シーンなど

これは最近見かけた記事で、この記事もあった関係で WebAssembly を振り返ることになったのですが、「Amazon Prime Video」が WebAssembly を動画再生部分に採用したようです。2022/2/1 の記事なのでかなり最近ですね。
www.publickey1.jp
当記事内でも言及されていますが、こちらの利用ケースでも Rust が使用されていますね！今後は動画配信のケースだけに留まらず他のサービスにも Wasm の波として波及して行くのでしょうか？その他、活用事例としてはよくまとまっている Qiita 記事があったので併せてご参照頂ければと思います。
WebAssemblyが気になるので調べてみた - Qiita
まだまだ普及具合としてはこれから、と言う感は2年前と同じくな感じではありますが徐々に大規模での活用事例も出て来ているので5年後くらいには Web 技術のスタンダード化になっている可能性も高い！？という期待を持って引き続き Watch して行こうと思います。ｍｍ

Uno Platform で Hello World !!

Uno Platform とは？

「Uno」と聞くとあの有名なカードゲームくらいしか思い浮かばないのですが、この「Uno（ Platform）」はクロスプラットフォーム開発環境であり、近しいところでいうと Xamarin がこれにあたります。

codezine.jp

つい最近、Twitter のタイムラインで流れてきたので気になって検証してみました。

必要なもの

Windows 10 と Visual Studio 2017（15.5以降） が必要とのことで、この「Windows」というのがミソ、現状では Visual Studio for Mac には対応していないようです。

開発環境の構築より

Uno Platform の利用に際して

・UWP開発（ユニバーサル Windows プラットフォーム開発）

・Xamarin（.NET によるモバイル開発）

が必要で更に Web アプリ開発に関しては

・Webアプリ（ASP.NET と Web 開発）

のワークロードのインストールが Visual Studio 2019 導入時に必要です。その前提でまずは「Uno Platform Solution Templates」を Visual Studio にインストールします。

環境が整った後は下記のような流れになります。

このメッセージを見て気づいたのですがWebアプリ部分は WebAssembly が絡んでいるようで。以前はC#が「そのうちサポート」というステータスだった気がしますが、このようなところに既に食い込んできたところを見ると進歩を感じます！

（注）Visual Studio をセットアップしたての場合はこの後にメッセージ出るかも？

正常に立ち上がった場合の構成は上記のような感じです。「.Droid」が Android アプリで「.iOS」が iOS アプリ、「.Shared」が共有プロジェクトで他の4つのプロジェクトへのマージをします。「.UWP」は UWP アプリ、「.Wasm」が Web アプリです。

 実はソリューションが立ち上がった時点で「Hello World」はデバッグ出来る状態なのでそれぞれ試してみましょう。「TestApp1.Shared」直下の XAML ファイルを開いた上で確認します。

これは「UWP」でのもの。

これは「Android」でのもの。（縦長なので上半分のみ）

これは「Web」でのもの。今回は「iOS」を割愛しておりますが、実際は4プラットフォームで反映されます。

ちなみに、XAMLを開いたままホットリロードが可能なのは現状「UWP」のみで、他のプラットフォームに関しては Uno Platform 2.0 で対応予定とのことです。ホットリロードが各プラットフォームで対応すればクロスプラットフォーム開発がかなり捗りそうですね。

振り返りとして、各プラットフォームにおいての基板部分の構成は上記図のような構成みたいです。UWP 以外は大元で「mono」と呼ばれるソフトウェアを利用しております。

Mono (ソフトウェア) - Wikipedia

その上で iOS と Android は「Xamarin」を通して3つのプラットフォームは Uno Platform を通します。前述の CodeZine の最終ページにも記載されておりますが、「Uno Platform が対応済みの範囲なら、動く！」ということでまだまだ成長段階のクロスプラットフォーム開発基盤ですが成熟する頃には C# + XAML + Uno Platform がスタンダードになっているかもしれません。そういう意味でもウォッチを続けようと思います。

しかし、、かくいう私は C# 初心者なので、最近 C# 界隈がアツいこともあり、今後は C# の独習にも力を入れていこうと思います！

追記（Appendix）

2019/12/23

追いかけている WebAssembly 技術が絡んでいるということもあり、Uno Platform は目が離せない状況です。実は技術書典8にて有名なお三方が Uno Platform に関して同人誌を出すようでコレは購入したいところです！（現地に赴けるなら赴きたい・・・・。）

himanago.hatenablog.com

プリザンターを利用して LDAP 情報と連携する

プリザンターって何？から。

まだまだ、馴染みの薄いプロダクトだとは思うのですが国産オープンソース（！）の Web データベースになります。ちなみに、当ブログでも以前、セミナーに参加した記事を1本あげていたりします。

Pleasanter（プリザンター）のセミナーに参加しました on July 25 - SE（しがないエンジニア）のブログ

競合製品としてはお高いところでいうと「Salesforce」になるのですが中小企業でそれなりのユーザで利用するには手が届かず。またはお手頃なところでいうと「kintone」になるのですがこれも総額で考えると決して安くはない。かつ、カスタマイズも痒い所に手が届く、までは行かない感じで。（自分が知らないだけかも。。）

そんなこんなで今年5月の見本市で見つけたのがこの「Pleasanter（プリザンター）」でした。前述の通りOSSなのでベースは無料、ノーサポートでも構わないなら基本は完全無料！という恐るべきプロダクトです。しかも、OSSということもあり、C#で開発されたソースが github に上がっているから驚き。

GitHub - Implem/Implem.Pleasanter: Pleasanter | Business application platform

（注）C#はコア部分なので改造してしまうとサポートが受けられません

プリザンターのいいところ

・基本的なテーブル構成（単純な表）を作成するだけであればノーコードで対応可能

➡kintone もそれをウリとしていますが私感ではプリザンターの方がとっつきやすかったです

・（Excelと比較したらですが）読込がとにかく早い！

➡全てが Excel のシステムで集計しているとファイルの Open・Close のオーバヘッドが凄い・・・・。（今時なら PowerApps とか別のものを使うのでしょうが。。）

・APIが豊富で他システムとの連携が可能

➡自社の場合は勤怠管理の為に Pittouch Pro 2 というタイムカードの機械と連携させてます（Pittouch でスキャン→PHP実行→Pleasanter のAPI実行）

・多少のカスタマイズ（力技も可能？）であれば jQuery を利用した「スクリプト」と CSS を利用した「スタイル」で変更可能

➡JavaScript が分かるユーザであれば単純な表にとどまらないカスタマイズが可能です

プリザンターのうーんなところ

・ポータルトップページ機能やバッジ機能など利用するユーザを基軸にしたページ構成にしてほしい（強く望みます。笑）

➡かなり利便性が高まると思います

・まだまだ発展途上というところもあり、細かいところで痒い部分に手が届かない。

➡Github に上がっているドキュメントだけでは把握できない仕様もあります

本題の LDAP 情報の同期

社内に Active Directory を構築している場合は LDAP 情報と連携可能です。設定につまずくところがあると思うのでサンプルとして情報共有します。なお、パラメータ設定値の仕様は下記URLに記載されております。

パラメータ設定：Authentication.json · Implem/Implem.Pleasanter Wiki · GitHub

{
    "Provider": "LDAP+Local",
    "ServiceId": null,
    "ExtensionUrl": null,
    "RejectUnregisteredUser": false,
    "LdapParameters": [
        {
            "LdapSearchRoot": "LDAP://(servername + domainname)/dc=(domain),dc=(domain)",
            "LdapSearchProperty": "sAMAccountName",
            "NetBiosDomainName": "(netbios domain name)",
            "LdapTenantId": 1,
            "LdapDeptCode": "departmentNumber",
            "LdapDeptCodePattern": null,
            "LdapDeptName": "department",
            "LdapDeptNamePattern": null,
            "LdapUserCode": "employeeNumber",
            "LdapUserCodePattern": null,
            "LdapFirstName": "givenName",
            "LdapFirstNamePattern": null,
            "LdapLastName": "sn",
            "LdapLastNamePattern": null,
            "LdapMailAddress": "mail",
            "LdapMailAddressPattern": null,
            "LdapSyncPatterns": [
                "(&(ObjectCategory=User)(ObjectClass=Person))"
            ],
            "LdapExcludeAccountDisabled": true,
            "AutoDisable": true,
            "AutoEnable": true,
            "LdapSyncUser": "(ex) Administrator)",
            "LdapSyncPassword": "(administrator password)"
        }
    ]
}

書き換える部分はそこまで多くないと思います。例で「test.local」（＋サーバ名は「server」とする）のようなドメインの場合。

Provider　…　「LDAP+Local」とすることによりLDAP認証で失敗した場合にローカルユーザでの認証になります

LdapSearchRoot　…　LDAP://SERVER.test.local/dc=test,dc=local となります

NetBiosDomainName　…　TEST となります

LdapSyncUser　…　基本は Domain Admins の権限を持つメンバー？

LdapSyncPassword　…　「LdapSyncUser」で設定したユーザのパスワード

その他は環境によりけりなので最低限、というレベルではありますがお役に立てましたら。あとは、設定後に IIS を再起動して下記のような環境に合わせたURLにアクセスすれば問題ありません。

http://ServerName/pleasanter/users/syncbyldap

WebAssemblyのいま

WebAssemblyってなんぞや？

 Webブラウザから機械語を実行するようにできる技術を指します。2年程前に現職に入社した後の社内発表で、Webネタを作成した絡みで少し調べていました。その後、時々は追っていたのですが今年からブログを始めたことも兼ねてまた調べました。

WebAssemblyとは？〜実際にC言語をブラウザで動かす〜【2019年6月版】 - Qiita

上記Qiitaの記事は今年の6月のものなので環境周り含めてかなり新しい情報でとても分かりやすいです。

どんなものに応用されているの？

当時、調べていた際はブラウザ上で動作するゲームをWebAssemblyの技術でサクサク動作させる、みたいな感じでしたが現在も変わらずという感じです。

logmi.jp

勿論、それ以外の利用シーンがあるとは思いますが5Gや敢えてまたブラウザゲームに回帰するという意味でも当技術が応用される日は近いのではないでしょうか。

動作環境を構築して C と PHP で比較してみる

下記のサイトを参考に Windows 10 1903 環境で試してみました。

WebAssembly を試してみた | ラボラジアン

【WSL入門】第1回 Windows 10標準Linux環境WSLを始めよう：ITの教室 - ＠IT

［Windows の機能の有効化または無効化］で WSL（Windows Subsystem for Linux） をインストール。

 再起動後にストアで検索「WSL」と入力し Ubuntu を入手。

起動後は基本的に参考サイトのコマンドで進めば emscripten で C のソースをコンパイルしたものを実行できます。ちなみに、サンプルソースは10億回ループを回してそれにかかった時間を print してるだけのものです。

【Cのサンプルソース　wai.c】

#include 

#include      // for clock()



int main(int argc, char ** argv) {
   /* 変数 */
   clock_t start, end;
      long l;

      start = clock();

      for (l=0; l<1000000000; l++);

      end = clock();

      printf("世界の中心でワイと叫ぶのにかかった時間: %f秒
", (double)(end - start) / CLOCKS_PER_SEC);

      return 0;

}

【Cでの実行結果】1.806秒とします

【phpのサンプルソース　wai.php】

Ubuntu上でphpを動作させる参考は下記を参考にしてください。PHPのインストールの際におまけで Apache もついてきます。

PHP 7.3 の最新版を Ubuntu 18.04 に apt インストールする - サーバー構築と設定 ～初心者にも分かりやすく解説～

<?php 

set_time_limit(60);

$start = microtime(true);                                                                                                                                                                                                                                               

for ($i = 0; $i &lt; 1000000000; $i++)
{
}                                                                                                                                           

$end = microtime(true);                                                                                                                                                                                                                                                 

echo "世界の中心でワイと叫ぶのにかかった時間: " . ($end - $start) . "秒";

【phpでの実行結果】12.14秒とします

こんな内容で比較するのも全然参考になっていないと思うのですが、いずれにせよ差は歴然ということで。今回の場合は C が PHP より 6.5倍 速いという結果でした。他にもソースをいじって色々と楽しむのはアリだと思います。まだまだ、WebAssemblyは実用段階、というところまでには来ていない感じですが、より進化を遂げてWebブラウザの枠を超えた表現を楽しめる日を待っております！

Pleasanter（プリザンター）のセミナーに参加しました on July 25

プリザンターとは？

今年の5月頃に見本市（EXPO）に参加したのですが、そこで偶然発見した製品です。製品の種別としては「ビジネスアプリケーションプラットフォーム」とのこと。対抗製品としては Salesforce・FileMaker・kintone あたりになります。

pleasanter.org

このプリザンター、見本市で発見してから自社活用を推奨し現在進行中なのですが、何がスゴいかと言うと・・・・。

・純国産のオープンソース、かつ、Githubのリポジトリに全ソースがある！（C#）

➡ノーサポでOKならC#のソースを改変して活用することも可能とのこと

➡とは言っても、機能拡張についていけなくなる（現在も発展途上）ので推奨はしない

・導入検証してみたのですが、サクサク動作する！

➡独自のUIエンジンにてUIレスポンスは100msを目標値としているよう

➡バックグラウンドはSQL Serverで動作している模様

・ノンプロで簡易的なアプリは作成出来てしまう！？

➡個人的にはFileMakerより触れやすかったです、勿論、FileMakerが勝る部分もあり。

➡どうしても拡張したい場合はスクリプト（JS）やスタイル（CSS）が必要

他、他システムとの連携や通知機能等、メリットは数多くあります。その上で話は戻りますが何と言っても「オープンソース」ということでココが特筆すべき点です。

では、何で儲けているのか？というと、システム構築支援やシステム構築後のサポート等で儲けているようです。じゃないと、慈善事業ですもんね。。笑

ハンズオンセミナーへの参加

開発元のインプリム様と何度かやり取りをさせて頂いている関係でハンズオンセミナーへ参加しに 7/25（木） の午後帯は中野のインプリム様オフィスへ。1時間半ほどのセミナーでしたが、「簡易的な案件管理アプリを30分で作成しよう」という趣旨のハンズオンでした。

pleasanter.connpass.com

実際に初見だと30分は厳しいかもしれませんが、操作が慣れてくれば30分という時間も過言でありません。かつ、プリザンターの場合は業務テンプレートがある程度準備されているのでテンプレートを活用できればもっと高速にアプリが作成できるかもしれません。

今後の目標

・自社でのプリザンター導入推奨活動

・C# / JavaScript / CSS 等の各種言語習得に磨きをかける

・SQL Serverの習得

と色々とやることはありますが、学べる楽しみも多いので頑張りたいと思います！

ちなみに、、

プリザンターは オンプレ＋Windows で利用する環境がメインなのかもしれませんが、.NET Core対応ということもあり、Linux版の開発も絶賛進行中とのこと。Windows環境より環境構築は大変ですが、こうやってWindowsとLinuxの垣根がなくなっていくのは嬉しいことですね。

あとはオンプレではなくクラウド（Azure）でもサービス提供されています。お気軽に開始したいという意味ではこの選択肢が一番かもしれません。

今後、プリザンターでのTips等がご提供できそうな段階になりましたら、当ブログでも取り扱っていきたいと思います。

Azure App Serviceを利用してWebサイトの公開をする

明日、Webサイト公開してや！

1ヶ月ぶりに登場のぼく君。もうキャラとして忘れられている可能性もありますが、ある日の会社でのやり取り。

社長「明日までに会社のホームページを公開したいんじゃ！」

ぼく君「（草ァ！サーバの契約やら何やら考えたらすぐに出来るわけないやろ。。）」

ぼく君「はい！頑張ります！」

社長「頼むぞ！」

と、ぼく君は明日までにホームページを公開する任を受けました。。

ぼく君「そういえば、この前、スタバで意識高い系の人がAzureでApp Serviceがなんちゃらみたいなこと言ってたな。せや、登録したろ！」

早速実践

ポータル画面から「App Service」を選択して「App Service の作成」を押下します。

「基本」タブにて以下のような形でWebアプリを作成します。「SKU とサイズ」は要件にあったものをご選択ください。

「確認と作成」タブにて確認して「作成」を押下します。

例のごとくデプロイが開始されますが、2分程度で完了します。本当にお手軽です。

この時点で https://wwwwwwwwwwwwwwwwwwww.azurewebsites.net にアクセスすると以下のような画面が表示されます。wwwrootにあたります。

SSHなんかもできます。本当にWebだけで完結してしまいますね。「移動」すると root でログインされます。

PHPサイトを作成する基礎ができたは良いもののファイルをデプロイしないと公開されないので標準でFTPにてファイルをデプロイしてみます。

適当に「test.php」を作成して、FFFTPにて「概要」の情報を参考にホスト接続しデプロイします。（設定値はFFFTPのホスト作成の画面を基準にしております）

・ホストの設定名　…　Azure FTP（任意）

・ホスト名（アドレス）　…　上記画像の「FTP ホスト名」部分

・ユーザー名　…　「デプロイ センター」で確認したユーザー名

・パスワード　…　「デプロイ センター」で確認したパスワード

デプロイ後に確認してみると・・・・。（1行目はPHPでecho出力し2行目はmarqueeで文字を流しているだけのPHPファイルです）

お手軽にHTTP/2のWordPressサイトをつくる

OSは？

ブログの初投稿時にご紹介させて頂いたマシン（Hasee君）で構築しており、OSは以下の通りです。

# cat /etc/redhat-release
CentOS Linux release 7.6.1810 (Core)

インストールは特別な事は行っておらず、最小限のインストールで進めております。

OSインストール後にやったこと（いろいろ）

SELinux

disabledにして切ってしまう！

# getenforce
Disabled

iptables

firewalldは利用せず、慣れているiptablesを利用。いつもここを参考にしてます。いい加減に覚えたい。（笑）

CentOS7でのiptablesの設定忘れるのでメモ - Qiita

HTTP/2対応のApacheをインストール

ソースからコンパイルするのも一苦労、、なのでIUSリポジトリからyumで簡単にインストールしてしまいます。下記サイトのSSL証明書作成のところまでコピペで基本進められます！（CentOS 7.4以上である必要アリ）

HTTP/2 に対応した Apache を yum でインストール | あぱーブログ

PHPの最新版やMariaDBをインストール

PHPは5系ではなく7系を入れましょう。MariaDBも必要なので入れましょう。ちなみに、「php-なにがし」は入れておかないと怒られることがあります。毎回忘れがちなので下記にコマンドの備忘を残します。

# yum -y install php-mysqlnd --enablerepo=remi-php73

PHP 7.3 の最新版を CentOS 7.5 に yum インストールする - サーバー構築と設定 ～初心者にも分かりやすく解説～

CentOS 7にMaria DBとPHP 7.0を入れる - Qiita

WordPressのインストール

JVN iPediaを参照したりすると分かりますが、古いバージョンを利用していると脆弱性に晒されることもありますので基本は最新版を。（プラグイン自体に脆弱性が潜んでいることもありますので常に最新版の心がけを！）

JVN iPedia

と

WordPressをインストールする（CentOS7.4） - Qiita

[CentOS7] WordPressの導入 │ Web備忘録

WordPress推奨構成とMySQLデータベースの作成 - WordPressの使い方

Apacheの設定ファイルは各サーバーにしているマシンの環境にも依存してしまいますが、2点目のサイトがかなり分かりやすく説明しております。

ここまで来てローカルIPで設定出来るところまで行ったら折角なのでドメインを取得しましょう！

ドメイン取得とサイトのSSL化

我が家の場合はCATVのプロバイダで固定IPを取得しておりません。なので、DDNSを利用して簡易的にドメインを取得してしまいます。今回、試験的に取得してみたのはココです。

Free Dynamic DNS (DDNS) for Home Server and VPS etc | MyDNS.JP

ルータ上で公開しているIPに関しては下記で確認してみましょう。そして、大抵の自宅環境では静的IPマスカレードの機能を利用して外部にサーバーを公開する流れになります。ざっくり言うと「このポートで来たアクセスをローカルPCのこのIPにアクセスするよう変換する」という感じです。

確認くん

SSLは定番？の「Let's Encrypt」を利用します。サーバで取得するコマンド例は下記の通りです。参考サイトと共に。

Let’s Encrypt サーバー証明書の取得と自動更新設定メモ | あぱーブログ

# certbot certonly --webroot \
-w (document root path with wordpress) \
-d (domain name) \
-m (mail address) \
--agree-tos -n

正常に発行されると証明書のパスが表示されますのでApacheの設定ファイルに組み込みましょう。下記は参考です。

SSLCertificateFile /etc/letsencrypt/live/(domain name)/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/(domain name)/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/(domain name)/chain.pem

そして、DDNSでアクセス出来るようになったドメインでセットアップしてしまい、管理画面にアクセス出来るようになったらテーマをインストールしてみたり。

https://wp-cocoon.com/downloads/

Cocoonテーマをインストールする方法 | Cocoon

出来上がったサイトは？

中身はまだ何も作ってないです・・・・。

https://btsn.mydns.jp/

HTTP/2はSSLで本領を発揮する為、アクセスしてみてHTTP/2化しているかを確認してみましょう。下記はFirefoxの開発者ツール（F12）でのスクリーンショットです。

以上となります。マシンのスペックにもよりますが、ガッツリやってみると1.5～2時間程度で辿り着けると思います。

追記（Appendix）

2019/05/15

WordPressのサイトは結局、IT系以外の趣味の事を書くことにしました。WordPressのテストを兼ねているので殆ど雑記になる予定です。（笑）