「伺か」を JavaScript で車輪の再発明 Chapter 追加するゴーストを探すならゴーストキャプターさくら 6 さんを頼るのが個人的におすすめ。 4 4.2 「伺か」を JavaSc 「 ipt で ではここから、「伺か」を JavaScript で実装していくための技術要素を見ていくこととしましよう。 E1ectron とは 67 5.0 以降であれば、「 AndroidSystemWebView 」という名前のシステムとして提供されている。 8 Android アプリケーション上で Web ページを表示する機能。 Android4.4 までは OS の一機能として、 Android 7 EIectron - BuiId cross platform desktop apps with JavaScript, HTML, and CSS. <http://electron.atom.io/> <http://buynowforsale.shillest.net/ghosts/> - 何か / 伺かゴースト更新フィード 6 ゴーストキャプターさくら ()C さくら ) しやすく、さくっと見やすいのも JavaScript のメリットです。 らいに豊富なので、したいことでググれば大抵のものは出てきます。加えて、実際の動作デモを設置 JavaScript のエコシステムは現在進行形で膨らんでいて、情報や選択肢が多すぎると感じられるく すね。 には、ウエプカメラにアクセスして顔認識させる、みたいなこともできてしまいます。夢が広がりま Socket 通信でリアルタイム通信したり、ということが割と簡単な難易度で出来てしまいます。さら ま使えます 0WebAPI 叩いて天気予報や新着ニュースを取得したり、 webGL で 3D モデルを動かしたり、 中身が Chromium ということもあり、 JavaScript で動く web アプリが使えるものは、ほとんどそのま ー JavaScript が使えるということは てもらえば。 Android の WebView8 や iOS の UI WebView/WKWebView が Windows 向けに実装されたみたい感じと思っ そのなかでウエププラウザを立ち上げて、さらにその上でウエプアプリを動かしている、という感じ。 具体的にどんな仕組みで動いているかというと、ネイテイプアプリっぽい見た目のウインドウを開き、 MIT ライセンスなので無料で使える上に商用利用も可能。 ド JavaScript 環境 ) と Chromium(GoogIe Chrome の親戚みたいな OSS ウエププラウザ ) で動いています。 Electron70 それはデスクトップアプリを JavaScript で書ける魔法のランプ。 Node. js ( サーバーサイ

「伺か」を JavaScript で車輪の再発明 Chapter4 第 4 章 「伺か」を JavaScript で車輪の再発明 伺か ( うかがか ) をご存知でしようか。伺かとは、ゴーストと呼ばれるキャラクターをデスクトップ に駐在させる Windows 用のアプリケーションです。つまり、デスクトッブマスコットです。伺かがフ リーソフトであったことに加え、ゴーストと呼ばれるキャラクターをユーザが追加できるということ もあり、 2000 年ごろから流行ってきました。 時は流れて 2016 年 Q ⅱ tal をぶらぶらしていますと、 JavaScript でデスクトップアプリケーション を作っている記事力 2 。「 JavaScript は積極的に OFF にしていこうという動きも昔はあったのに、今は デスクトップアプリも JavaScript で書く時代か 。時代は移り変わって行くものだなー」と回顧感 に浸りながらリンクを開いて読んでみると、どうやら駐在デスクトップアプリも JavaScript で簡単 にかけてしまう様子。 回顧ついでに「伺か」を JavaScript で車輪の再発明してみるとしましよう。 0 ヾ、 4.1 伺かとは 伺か 34 とは、キャラクターを表示して、キャラクターの会 話を楽しむデスクトッブマスコットです。実用的かと問わ れると返答に困る感じですが、癒されるのは間違いない。 デスクトップに表示されるキャラクター ( ゴースト ) はユ ーザが追加することができ、有志の方々が 2016 年現在も 新たなゴーストが生まれています。 デフォルトゴーストとしてセットされているのが、さくら & うにゆうのお二人 ( 図 1)0 「伺か」で画像検索すると、 さくら & うにゆうの二方がトップに出て来る ( はず ) 。 十数年にわたってゴーストが生まれているので、膨大な数 のゴースト達がいます。 初めて伺かの導入するにあたっては、ばぐとら研究所 5 さんを、 図 1 : さくら & うにゆう ( 左 : うにゆう右 : 御影さくら ) Qiita <https://qiita.com/> 2 30 分で出来る、 JavaScript (EIectron) でデスクトップアプリを作って配布するまで - Qiita <http://qiita.com/nyanchu/items/15d514d9b9f87e5cOa29> 3 うさださくら < http://usada.sakura.vg/> 4 偽春菜・任意・何かといった名前、 MATERIA ・ ssp といった関連アプリがありますが、今回はそれらをひっくる めて「伺か」と呼んでいます。詳細は「何か。の略歴」が詳しい。 <http://www5f. biglobe. ne ・ jp/&nobm レ sakura/> 5 独立伺か研究施設ばぐとら研究所 <http://ssp.shillest.net/> 66

Chapter4 「伺か」を JavaScript で車輪の再発明 ーキャラクターと吹き出しを表示する では、続いて見た目を作ります。今回は画面の描画に Reactll を使ってみます。 React とは Facebook が開発している JavaScript ライプラリで、 UI の表現に特化しています。大きな特徴としては、 VirtuaI DOM( 仮想 DOM ) と呼ばれるレンダリング機構がそなわっており、伺かに特有の動作である吹き出しを 出したり消したりという挙動にマッチしています。もちろん AnguIarJS でも jQuery でも、同じよう なことはできるはずです。 では、始めに React 関連のモジュールを入れていきます > npm install > npm install > npm install Package. json の ¯save¯dev react react—dom ¯save—dev babel-preset—es2()15 babel-preset—react ¯save—dev babel—register ma 1 n を ma 1 n ma 1 n. J S bootstrapper. js に変更し、 bootstrapper. js は以下の通りに記述して、 babel-register を起動できるようにしてお きます。 babel-register は React から JavaScript へのコンパイラみたいなものです require(' babel¯register' ) ; require(' . /main. js' ) ; そして、 jsx ファイルを以下のように書いていきます。 11 A JavaScript library for building user interfaces - React <https://facebook.github.io/react/> 70

Chapter4 「伺か」を JavaScript で車輪の再発明 実装すると、 web に接続して、天気予報の webAPI にアクセスして、取ってきた情報をパ デスクトッブマスコットにありがちな天気予報を表示する機能を実装してみましよう。 C 言語とかで ー天気予報を表示する ではここから、好きなように追加機能を実装していきます。 生 4 Javascript の恩恵を受ける ースして・・ というのはなかなか面倒だったりしますが、 JavaScript ( と jQuery) なら簡単に取ってこれます。 data JSON . parse(json); $. get(' く天気予報 WebAPI の URL> ・ ,function(json){ var data; というか、お家芸感すらある。 あとは取ってきたデータを吹き出しの中に入れて表示するだけ。ただ、 80 ように Access-ContP01-A110w-Origin の設定にしてくれている率が高いですね。 とになるので、そこだけ注意が必要。実装の新しい、最近出てきたような AP 工であれば、扱いやすい Access-Contr01-A110w-Origin の設定がされていない API を選ぶと吸収ロジックがややこしいこ

Chapter4 「伺か」を JavaScript で車輪の再発明 ーマイクからの声を認識してもらう テキストの読み上げだけでなく、音声認識もプラウザの標準機能として用意されています。音声認識 を開始させるだけなら、以下の 2 行だけ。 new webkitSpeechRecognition(); var recognition recognition . start(); もちろん、 100 % の認識精度というわけにはいかないですし、音声認識だけで意味理解まではできない ので、「天気」という単語が含まれていたら天気予報を表示する、くらいまでしかできませんが、小 ネタを入れるのに持ってこいな機能じゃないかなと思ってます。 4.5 まとめ 「伺か」を JavaScript で車輪の再発明、と題して EIectron と React で伺かもどきを作ってみました。 まだ見た目とちょこっとの機能しかできてないので、これから機能を沢山盛り込めそう。ゴーストの 外部読み込みとかなでなで機能とかは実装してみたい。 しかしながら、 EIectron は設定を変えるだけでデスクトップアプリ作れるし、音声出力まで標準機 能使えるしで、いい時代を生きてるなーと。闇が深いと言われる JavaScript ですが、簡単な個人用 アプリの作成ならここまで気楽に使える言語もないなと思っています。 最後になりましたが、伺か製作者の黒衣鯖人氏、 SSP を継続してアップデートしてくださっているば ぐとら研究所様を代表した、伺かに関わる全ての方々に感謝を述べ、この章は終わりにします。 0 82 アノレフ (@alfe_below) 人生の半分以上をネットの世 界で過ごしているだなと、本 文書きながら思いました。

「伺か」を JavaScript で車輪の再発明 Chapter 4 一声をつける デスクトッブマスコットを見てると、ニコニコ動画のゲーム実況を思い出しませんか ? せつかくなのでニコニコ動画のゲーム実況みたいに、マスコットキャラクターに ( 音声で ) しゃべら せてみましよう。 JavaScript でテキストの読み上げ機能実装も実は思った以上に簡単で、プラウザの標準機能として 用意されていたりします。テキストの読み上げだけなら以下の一行で OK 。 speechSynthesis. speak(new SpeechSynthesisUtterance(" こんにちは ")) ; 声の大きさや早さ、高さも設定ができます。特に声の高さを変更すると別の人が話しているような演 出ができるので、会話劇を表現するのに向いているなと思います。 new Speec11SYIIL11esisUtLerance() ; SYIlChes synthes. volume = 1 ; / / 声の大きさ = 1 ; 〃声の早さ synthes. rate = 2 ; 〃声の高さ synthes. pitch synthes. text こんにちは ' "ja—JP" synthes. lang speechSynthesis. speak(synthes) ; こういった新しいプラウザの標準機能って、 InternetExplorer が対応してないとかで web アプリに 入れにくかったりするのですが、 Electron だとプラウザ互換性をあまり気にしなくていいので、か なり助かります。

超材曰 ( 工房 ZBrush クリエイターになろう ! ライトにはじめる LLVM プログラムでドローンを飛ばそう ! 「伺か」を JavaScript で車輪の再発明 ◎超未来工房 / Team YS AIIrights reserved -Super Future Workshop

Chapter4 「伺か」を JavaScript で車輪の再発明 12 そこそこ時間かかる タスクトレイに右クリックメニ { ・・・ } の前か後ろかに追加。 ーを追加したい場合は以下を traylcon. on("clicked", function ( ) / / タスクトレイに右クリックメニューを追加 var c011Cex し = Me11Cl. buil(lFr0111Te111pla し e ( [ { label : " 表示 " , cl ick: function ( ) { mainWindow. focus() ; { label: " 終「 " , click: function ( ) { mainWindow. close() ; デスクトップアプリとしての体裁は整いました。あとは配布用のパッケージ化まで見ておきましよう。 ー JavaScript から exe ファイルの作成 こまでくると、かなりデスクトップアプリっぽくなりますね。 traylcon. setContextMenu (contextMenu) ; パッケージ化には electron-packager を用います。 # electron¯packager のインストー / レ > npm install -g electron¯packager # electron¯packager <sourcedir> <appname> --arch=< 32bit/64bit> —version= く Electron のノヾ一ジョン > —platform=<platform (windows/mac()S/Linux) 〉 > electron¯packager . unyu ——platform=win32 -arch=all —version=l . 4. 8 Electron のバージョンは各々の環境のバージョンを npm list electron などでお調べください。 ia32, X64 のいずれ力、 linux, win32, darwin のいずれカ功、ら、 -—arch は a11 , -platform は a11 , から選択できます。 darwin は macOS のことのようです。 このようにすると、図 8 のようなパッケージフォルダが作成されます 12 。中に含まれる unyu. exe が実 行ファイルです。あとは煮るなり焼くなり配るなり。お好きなようにどうぞ。 78

ゆる物一 画カセロでも絵が描きたい ! 丿 現代 JavaScript でうにゆう声をリアルタイム出力だ 「伺か」を JavaSc pt で車輪の再発明 2000 年代懐かしのあ - をあれ以外の何かで 簡単コーテでドローン操作 フログラムでドロンを飛はそ ! - 、になるアイツも私のいしり ! F)YthortitÄいは VM をクールに使える めるにヒ立 M 無理もないわ、み、な c ゃに慣れてないもつね , , 3499 % トレスでイラストを描く方法 z rush クー社イターになろう !

Chapter4 maln. JSX use babel' ; 「伺か」を JavaScript で車輪の再発明 import React from react export default class Main extends React. component { render ( ) { return ( ・ く /main> く main> return ( render ( ) { ・・ ) } で、 HTML を整形して出力する感じですね。 く div id= character—unyu' > く /div> <div id= comment_unyu' 〉く /div> <div id= character—sakura' > く /div> <div id= comment_sakura' 〉く /div> 72 あとは、 jsx ファイルを呼び出します。