React Revisited after version 16.8

React というのは DOMの内容を簡単に操作しようという JavaScriptのライブラリーの一つだが、Shadow DOMという概念を導入し、JQueryのようにコマンドごとの実行でDOMを書き換えることはせず、Shadow DOMにある程度書き込んでおいてから描画する直前にまとめてDOMに書き込む。なので軽快に動作する、というのが売り。 数年前に覚えようとしたのだが、 二点腑に落ちないところがあって、結局、Vue.jsという他のLibraryを愛用(溺愛)するに至った。 その二点というのが 1.JSXという新しい概念の導入。 一見するとHTMLなのだがHTMLではなく、XML書式をJavaScriptで理解できるようにしたプリプロセッサ。この一見HTMLというのがくせもので、class= はJSの予約用語ゆえに使えずclassName=にしなければならないなど、細かいところで違っていて気持ちがわるい。(これに比べてVueのTemplateはまごうことなきHTMLの拡張) 2.コンポーネントで操作できる変数(State)を使うためにはコンポーネントをClass表記してsetState()という関数を使って管理しなければならない。 というもの。 その後 「JSXは単なるJavaScriptの関数表現」という開発チームの解説をYoutubeでみて ストンと納得できるものがあったものの、 二つ目のJavaScriptにClassが必要というのがなんとも納得いかない(個人の意見です)身としては今いち手が出せずにいた。 Class表記をするあまり、 thisの多用を行い、しかもそのContextを明示するためにClass Constructorに this.function=this.function.bind(this) を書きまくるというのがなんとも切ない。 しかしながら、 Reactの勢いは侮りがたいものがある。 特にMicrosoftのOffice開発系の方たちは Office UI GraphicsのComponentに「Reactは正義!」という感じで使いまくっている。 SharePoinitの JavaScript Frame workも Reactびいきがすごい。 で、最近React-client-appというCLIでReactのScaffoldingが簡単にできます、という記事をよく見るので、実際どれくらい簡単なんだいと試してみたら、 生成されるScaffoldingのComponentがClass表記ではなくfunction表記になっている。 あれ、これって、Stateful Componentは Class表記しなければいけないんじゃなかったっけ、と思ったが、 実はReactも進化していた。 Version 16.8から Hooksという機能が追加されて Functional ComponentでもStateの管理ができるようになっていた。 そして今まで、 Functional Component = Stateless Component, Class Componnet=Stateful Componentとなっていたものが、 どちらを使ってもよいようになっている。 Reactのサイトにも将来の開発にはFunctional Componentを使うのがおすすめと書いてある。 なので、React-client-appもDefaultで生成するコードはクラスレスになっていたわけだ。 紹介ページ https://reactjs.org/docs/hooks-intro.html にあるコードをみれば一目瞭然だが、クラス表記のようなConstructorもなければ、this. でメンバー指定をすることもない。 非常に簡単。 ただ、このHookを使ったクラスレスのステートフルコンポーネントの作り方、オフィシャルサイト以外で解説しているサイトはまだ少ない。 この const [ var1, setVar1]=useState(‘this is variable one’); で気をつけなければいけないのは Var1が複数メンバーから構成されるオブジェクトだった場合、 const [obj1,setObj1]=useState({member1:”this is member 1″, member2:”this is member 2″}) のように Obj1を宣言したときに、 setObj1({member2:”this is member 2 modified”}) とやってもsetState()と違って、オブジェクトの他のメンバー(Key)とマージしてくれない。上の例ではmember1が消えてしまう。 セット関数には元のstateがパラメータとして渡されているのを利用して、 setObj1(s=>({ …s, member2:”this is member 2 modified”})) とスプレッド表記を使ってマージしてあげる必要がある。(上のサイトにはObject.createを使うのも可と書いてある) また、いわゆる ComponentWillMountなどのLife Cycle hookの代わりには描画毎に発火するuseEffect()を使えと書いてある。 このHookは発火を限定するために二つ目のパラメータ―で発火する条件を指定できる。 ファイルデータを読み込むなど、あるいはイベントリスナーを設定するなど、一回だけ発火させたい場合、 このパラメーターを空のアレイで渡してあげることで実現できる。(なんとなくハックっぽいが) useEffect(()=>{Data を読み込む云々}, []) 他にも何種類かのHooksが用意されているが、 演習用にアプリを書いてみると、上の二つのHookだけで、それなりのものができる。 すでにJSXへのアレルギーはなくなっているので、クラスを使わなくてよいReactという選択は結構魅力的です。 すべてにVue.jsを使いたいのはやまやまなれど、SharePoint関連においてMicroSoft が Reactありきの開発を推しているというのはやはり大きい。

Using Vue with WebPack

I wanted to transfer my existing script to WebPack bundle.  The application is a simple page that uses  Vue.js.   Note that I only read Introduction part of Vue and started using it.  At that time, I did not even know the concept of Vue component files .  Thus my application was entirely in one JavaScript file. I rewrote it using typescript.   WebPack bundling was necessary to make it work. I had to decipher minor (but important) detail on NPM’s Vue  module that should be used along with WebPack.  If I were to use a Vue package from node_modules/ and bundle it with WebPack, then the default module that will be […]

String.replaceで知らなかった件

User がノート欄にやたら長いリンク先をそのまま張り付けて、SharePointのリストの表示が著しく損なわれるという現象が自分の管理するサイトコレクションで何件か発生している。 ユーザー教育を行ってリンクの説明を別途短文入力してください、というのは簡単だが、だまって従ってくれるような従業員ばかりではない。 そこで長いリンクを見つけたら強制的に短い文字列に置き換えてしまう、という仕掛けをJavaScriptで書いてしまえばよいのだと思いつき、 試してみた。 結果、以下のような関数を記述し、これを描画時に呼び出す形で解決した。 function shortenAnchor(text) { if (text===null) { return “”; } let testPattern = /(<a.*?href=.+?>)(.*?)(<\/a?>)/g; function replacer(match, p1, p2, p3) { if((p2.length)>30) { p2 = p2.slice(0, 25) + ‘…’; } return [p1, p2, p3].join(”); } return text.replace(testPattern, replacer); } このコードで何をやっているか。 まずtestPatternを正規表現(RegExp)で記述する。 RegExpで a tag elements をグローバルにトラップする。トラップしたエレメントはタグの前の部分、中身のテキスト部分、タグの後ろの部分にグループわけされ、それぞれの文字列は$1,$2,$3として利用可能になる。( a tag element 全体のマッチは$&)。 そして、あとは String.replaceを使ってマジックをおこすわけだが、Implementationを試行錯誤している最中に 二つ目のパラメーターが実は関数でもよいのだ、というのを本日初めて知ったわけで、それを使ってうまく書くことができた。 ここに関数を使うと、以下の引数が この順番で使えるようになる。 まずは TestPatternそのもののマッチ $&, それぞれグループ分けした部分のマッチ $1,$2,$3。 よって match,p1,p2,p3として利用可能にしておく。実はこの後ろにIndexなどのパラメーターも続くのが、今回は必要がないので無視。  この replacer という関数ではこの中身の文字列$2(p2)の長さが30文字以上あった場合、最初の25文字以下を切り捨て点三つ…を最後に追加するというもの。 この関数自体を二つ目の引数として使う。 Testしてみたら一発で完動したので感動(おやじギャグです) 普通はString.replaceというと “this is a pen”.replace(“this”,”that”) //=>”that is a pen” という簡単な使い方は知っていたし、 最初のパラメーターを正規表現にすれば $& $1 etc., などのパラメーターを使ってかなり柔軟な置き換えなどができることも知っていて使ってはいたのだが、まさか関数まで使えるとは思っていなかった。 これは素晴らしい、と思った次第

TypeScript その2

年末の休暇を利用してtypeScriptの演習を続行中。 現在まで理解できたところをとりあえず列挙。 nodejs が導入されている必要あり。 npm install typescript -g これで tscコマンドが使えるようになる。 tsc example.ts そして、これでexample.ts から example.jsがトランスパイルされる。 プロジェクトフォルダー内で tsc init とやると、コンパイラー設定用のtsconfig.jsonが作成され規定値が設定される。例えば、出力のJavaScriptのレベルが <pre>”target”:”es5″</pre> などと記述されている。またコードをトランスパイルしたときのエラーの出力設定などもできる。今のところ全く変更の必要のないレベルでトライアル中。 TypeScript は 基本的には JavaScriptのsuper setなのだが、 ’let’, ‘const’, ‘arrow function ()=>’, ‘ … spread operator’,’Template strings’ などes2015の書式が既にサポートされている。 なのでexample.tsではこれらの言語機能を使ってプログラムを書き、tscでトランスパイルすると、これらの表記をまだサポートしていない現行のブラウザでも動くようなJavaScriptに書き換えてくれる。上のConfig例ではes5レベルのコードに置き換わる。 つまりBabelと同じような使い方ができる、。 type safeなので 異なったタイプの変数へのアサインは論外としてもその可能性が生じそうなコードにはエラー表示が鬼のようにでる。例外処理とか、Interface定義を記述して対処すると満足して何も言わなくなってくれるので、バグの可能性のあるコードを書く可能性が低くなる。

TypeScript 入門

TypeScriptのイントロがDev.office.comにあるので眺めてみた。 tsとして以下の例が載っている。 class Student { fullName: string; constructor( public firstName, public middleInitial, public lastName){ this.fullName = firstName + ” “+ middleInitial + ” ” + lastName; } } interface Person { firstName: string; lastName : string; } function greeter(person: Person){ return “Hello, “+ person.firstName + ” ” + person.lastName; } let user =new Student(“Jane”,”G.”,”Doe”); document.body.innerHTML=greeter(user); これをJSにコンパイルするとこうなる(WebStormはプラグインが動いてダイナミックに自動生成する) var Student = (function () { function Student(firstName, middleInitial, lastName) { this.firstName = firstName; this.middleInitial = middleInitial; this.lastName = lastName; this.fullName = firstName + ” ” + middleInitial + ” ” + lastName; } return Student; }()); function greeter(person) { return “Hello, ” + person.firstName + ” ” + person.lastName; } var user = […]

SharePoint Change Page Title without changing site address ページタイトルをサイトアドレスを変えずに変更する。

これってSharePointのこの部分がちゃんと動いていないだけなのではないかとおもうのだが、今現在のOffice365(SharePoint Online)のインプリメンテーションだと、Page Attributeでページタイトルを変更するとaspx ページの名前自体が変わってしまう。 たとえば https://mysite.sharepoint.com/sites/mysite/SitePages/thispage.aspx というページがあるとして、これだと表示されるページタイトルが”thispage”となってしまう。これを Edit pageからタイトル変更して ”This Page”とすると、 サイトアドレスが https://mysite.sharepoint.coms/sites/mysite/SitePages/This%20Page.aspx となってしまう。サイトアドレスをなるべく短くしたいのでページタイトルとサイトアドレスの一部になるページの名前を別けることができればよいのだが、今の時点ではできない。 世の中には同じことを不便と考える人がいるわけで、何件かの記事ではSharePoint Designerを使ってマスターページを変更する方法が述べられている。すでにSharePointにある機能をターンオンするだけの簡単な修正ではあるが、 1)マスターページを変更する必要がある。 2)SharePoint Designerが必要 すなわち、サイトオーナーでかつSharePoint Designerを使えるという条件を満足していなければならない。 ブラウザーのdebug Toolで確認してみたら以外と簡単にタイトルだけ変更できることが判ったのでここに書いておく。 サイトのエディター権限があればできるというのが利点。 ターゲットのページでエディットモードに移行し、適当なところに Insert ->Embed Codeでコードエディターを開く。 以下を入力する <script> document.getElementById(‘DeltaPlaceHolderPageTitleInTitleArea’).innerHTML=”My Page”; </script> これだけである。 ページタイトルが”My Page”となる。 SharePointの場合、CSRというメカニズムがあって、表示する内容の大部分は一度ブラウザーがスクリプトを実行したのち、データを描画するため、 ページへの書き込みのタイミングを遅らせなければならないのが普通だが、タイトル部分は最初の読み込み時に描かれてから変更がないため、上のようにブラウザがスクリプトを読み込んで即実行、という単純な動作でも有効なんである。 ちなみにWiki PageとWeb Part Pageの両方で有効。 Site Pageはためしていない。    

constructing long string with Javascript

There is a time you need to construct a string (for instance, to create a html block) in your code. In the simpliest approach, youcan constract the string variable  like so var html='<head><body>’+contentVariable+’more stuff’ + ‘</body></head>’; this becomes very messy quickly once more variables, more nested construction is needed. I used to keep concatinating the string, like so var html='<head></body>’; html +=  contentVariable; html += ‘ more Stuff’; html += ‘</body></head>’;     Then I saw a pattern in the couple of codes from internet; var h=[‘<head><body’]; h.push(contentVariable); h.push(‘more Stuff’); h.push(‘</head></body>’); var html=h.join(”); The More concatenation needed, the more convinient the last method becomes. Key is to join the array […]

Raspberry Pi でパソコン電源をInternet上から操作

家の外部からタブレットなりノートパソコンなりを使って自宅のパソコンにリモートアクセスするためのアプリというのは色々ある。Internet経由でアクセスする、というもので、Linuxでは当たり前のように実装されているし、 WindowsでもRemote Desktopというアプリケーションが同梱されているし、ファイアウオールでRemote Desktopが使えない環境でもWebベースのTeamViewer とかlogmeinというサードパーティの製品を使えばセキュアな接続がいとも簡単にできてしまう。 Chromeをブラウザとして使用しているのならChrome remote desktopというアプリが今の旬である。  なぜそんなことが必要か、という疑問が湧くかもしれないが自分の場合、外部からお気に入りの開発環境にログインし、コード開発を一つのマシン上で行う、という使い方がメインになっている。 もちろん将来的にすべての作業がブラウザ上でできる、という環境が構築されればそんな必要はなくなるわけだが、 問題はパソコンにアクセスするには当然のことながら当該パソコンの電源が入っていなくてはならない、という事。  エコの観点からみると年がら年中つけっぱなしになっているパソコン、というのはエネルギーの浪費に見える。 WEBサーバーを自宅のパソコンを使って構成していた時には電源をつけっぱなしにするしかなかったのだが、アイドル状態でも常に80Wくらいの消費電力が発生していた。  現在はCubieboardという、手のひらに収まるサイズのArmcortexの開発ボードをサーバーとして使って賄っており、消費電力は3W以下だ。 で、パソコンの電源を使うときだけ遠隔操作でオンする方法がないか調べてみた。  InstructableにElectric Impというモジュールを使って電源のオンオフをする方法が紹介されている。 このモジュール、SDカードと同じform factorだが、内部にWifiモジュールとArm Coretex M3を内臓したれっきとした開発ボードであって、クラウドサービスに接続してパソコンやタブレット上から専用のコントロールパネルアプリを使って接続されたデバイスのリモートコントロールができるようになっている。 InstructableではこのElectric Impに簡単なトランジスタを追加して、PCのPower switch lineを瞬間的にショート状態にする。(つまりパソコンのスイッチを押したのと同じ状態にする)ことによってPCを起動する方法が述べられている。 Electric Impの値段は25ドル程度だが、サポート用の部品(Imp用のブレークアウトなど)を買い足すと40ドルくらいの出費になりそうだ。 自宅でcubieboardのWEBサーバーを随時動かしているのであえてアカウントを作ってクラウドを使ってコントロールする必要はないわけで、 そうすると似たようなことはArduinoでもできるはずと思うわけだが、これまたArduino本体にWifi、あるいはEthernetシールドを追加すると40ドルくらいの出費になる。 CubieBoardのGPIOをパソコンのスイッチに接続して操作することも可能だろうが、部屋が2階と地下室に分かれているし、メインサーバーになっているカードのGPIOで他のデバイスをハードウエアコントロールというのは安全性の面から心理的抵抗がある。 そこで遊び終わって引出しに眠っていたRaspberry Piを使うことにした。Desktop用のLinuxが走るほどのグラフィック性能を持つボードをただの電源スイッチとして使う、というといかにももったいない感じがするのではあるが Piの値段も含めて40ドルくらいで済んでしまうのでコストパーフォマンスの面から考えると他の方法に比べても高くはない、というか他の手間を考えるとこちらのほうが安上がりの感じ。 調べてみるとデバイス制御をPythonベースのhttp サーバーから実行できるWEBIOPIというPi用のライブラリーを発見した。 これをインストールするとGETとかPOSTのHTTP用のプロトコルを使ったRESTという手法でハードウエアのコントロールができるようになる。 つまりWEBサーバー上にページを作り、そのページ上にボタンを描画して、WEBIOPIで提供されているRESTコールを紐つけるという方法でPiのGPIOピンの遠隔操作ができるようになる。 このRESTという手法、非常に単純で、urlのパスに模してパラメーターをサーバーに送ってあげるというもの。GETはアドレスをブラウザで指定するだけで実行できるのでたとえば APIですべてのGPIOの状況を取得するAPIを使うには webiopiをバックグラウンドで走らせている状態で、 https://example.com/GPIO/* とアドレスをブラウザに打ち込むだけで、Jason書式でGPIOの各ピンの状況が返ってくる。 ただし、これではページの表示自体がJasonのレスポンスになるので実用的ではなく、実際にはJavaScriptでコードを書くことになるが、webiopiにはうwebiopi.jsというヘルパーファイルが同梱されているので、使う難易度は低くなっている。 GPIOの使い方だが、 出力用に設定したGPIOピンをトランジスタを介してパソコンの電源スイッチとパラレルに接続し、パルス上の信号を出力してやるとパワースイッチを押したのと同様のことになり電源が立ち上がる。(電源が入っているときには逆に電源が落ちる)。電源スイッチへ接続されるピンはパソコンのマザーボード上のフロントパネルコネクター部分(パソコンケースのケーブル類を接続するコネクタ部分)に接続ピンがあるのでワイヤーをスプライスしてつなげてやればよい。。 また信号を出す前にパソコンの電源が入っているかどうかをわかっている必要があるのだが、フロントパネルコネクターには電源表示用のLEDへ接続されるピンも存在している。 そこでこのピンをGPIOでモニターすることによってパソコンに電源が入っているかどうかの判定をすることにした。 実際に組んだ回路。使ったGPIOピンは25をパワースイッチ用の出力に、24をLED電圧モニター用の入力にそれぞれ使用。 IntelのPC Interface 仕様(下に抜粋を載せます)を読む限り、パワースイッチ端子はトランジスタに直接接続(PWR+をコレクタ側に、PWR-をEmitter側に)しても大丈夫と思うが、5Vの小型リレーがたまたま手元にあったので使ってみた。NPNトランジスタのかわりに2N7000のようなFETを使えば、R1は必要ない。入力ピンのほうはLEDのVfでクランプされる電圧になるので規定の3.3V以下。万が一LEDがオープンとなっ場合5Vかかってしまうが、GPIOには保護用のクランプダイオードくらいはいっているのだろうと勝手に思い込んでいるので,保険は電流制限のR2のみ。 Table 5. Switch/LED Front Panel Electrical Connection Pin Signal Description 2 FP PWR/SLP MSG LED pull-up (330 ohm) to +5 V 6 PWR_SW_P Power Switch high reference pull-up (10000 ohm) to +5 V 8 PWR_SW_N Power Switch Low reference pull-down (100 ohm) to GND html pageの記述 <!DOCTYPE html> <html lang=”en”> <head> <base href=”https://example.com/” /> <title>PC power </title> <!–[if IE]><script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–> </head> <body> <h2>Turn On Basement PC</h2> パソコンの電源操作ボタンでやんす。! <form class=”buttonBar”></form> <script type=”text/javascript” src=”//code.jquery.com/jquery-latest.min.js”></script> <script type=”text/javascript” src=”poweronbutton.js”></script> </body> </html> […]

boneScriptで遊ぶ

Beagleboneblackを電子工作用にリザーブしたので、Angrstrom Linux についてくるbonescriptで遊んでみた。(Debian wheezyのイメージになっていたeMMCにAngstromの最新イメージを改めて焼き直した。) 普通javascriptといえばWEBクライエント用のプログラム言語だし、 C++やJavaなどいじっているプロの方から見るとToy Lanuguageなどとバカにされがちだけれど、自分のような日曜プログラマにとっては非常に重宝するtool なんである。 boneScriptは、このjavascriptをサーバー側で使えるようにしたnode.jsというプログラム上で走る。 BBBのハードウエアをJavaScriptの文法で操作してしまおうという優れものだ。 node.js は一般的にはwebサイトのサーバー側を能動的に管理するような形で使われるのだと思うけれど、boneScriptと組み合わせるとPC上のプログラミング言語として機能する。 JavaScriptの特徴としてプログラムの非同期実行ということがあげられる。jQueryの使い方で一度はまったことがあって、 関数によっては前に呼び出して得たreturn情報を次のステートメントで使うためにはちょっと待てという感じでプログラムの流れをブロッキングするかコールバック処理を使う必要がある。 逆に言えばコールバックを使ってのイベント処理には力を発揮する。 その特徴を使って以下のようなbonescriptをいたずら書きしてみた。BBBに実装されている4つのLEDをてんでバラバラに明滅させる、というだけのプログラム。 //#!/usr/bin/node //uncomment the above line and chmod +x to make it shell executable. //This program will randomly turn on/off four on board LEDs. // 11/28/2013 //setup()   var b = require(‘bonescript’);   var LEDs=[‘USR0′,’USR1′,’USR2′,’USR3’];   for (var i=0; i < LEDs.length;i++) b.pinMode(LEDs[i], b.OUTPUT); //loop(); for (var i=0;i < LEDs.length;i++) animateLED(LEDs[i]); //helpers function animateLED(led){ function toggleLED(led){ //randomly toggle LED b.digitalWrite(led,Math.floor(Math.random()*2)?b.HIGH:b.LOW); } function randomTimer(){ //randomly set timer between 0~199msec) return Math.floor(Math.random()*200); } setInterval(function(){toggleLED(led);},randomTimer()); } Arduino の流儀に従って、setup 部分と loop部分を書いてみたが、ごらんのとおり、while/until 的なloopなどしていない。 animateLED()という関数を4回呼び出したあとは、それぞれの関数インスタンスが勝手にタイミングを作って繰り返しの明滅を行っているわけで、それぞれ非同期実行されている。 ところで、 上のスクリプトはCloucd9というIDEから直接実行させる他にも、command line でも node randomLED.js というように、実行可能。 いちいちnode を指定するのが面倒ならば、 プログラムの一番上の行にシュバング(#!)を追加してNodeプログラムだということを明示し、 #! /usr/bin/node randomLED.js を実行可能としておけばプログラム名を指定するだけで実行できる。 $ chmod +x rondomLED.js $ ./randomLED.js もともとNode.jsがPHPと同じようにサーバー側のスクリプトを実行することを目的に書かれていることを考えると、bonseScript+Node.jsだけでハードウエアをリモートコントロールできるアプリが書けそうである。

JavaScript, Object literal で Private Variable を埋め込む

New とかを使わず、Object literal で object を記述するのがクール.。で、プライベート変数を仕込むには Function を使ってLiteral をReturnするパターンが使える。 var myobje=(function() { // private変数 var name = “my, oh,my”; //この機能定義は即実行され、以下がまとめてオプジェクトリテラルとして返される。 return { getName : function () { return name; } }; }()); myobje.getName(); //”my, oh my” おぷじぇくとの外部からはこのname という変数は直接いじれない。 function 内部の変数はファンクションが実行された後でも、内部に残っている、というClosure と呼ばれる性質を使った技。