スキップしてメイン コンテンツに移動

投稿

1月, 2017の投稿を表示しています

Dart x WebBluetooth x BLE Peripheral Simulator x Eddystone 's memo (1)

WebBluetoothについて、BLEの学習も兼ねて、アレコレ遊んでみます。
Dartを利用します。

型があるので、保管機能を利用することができます。Crt+Space するだけで、何ができるのかが判断できて便利です。

欠点としては、Dartium のWebBluetoothへの対応が微妙なの事です。dart:jsで変換しないと、動作確認ができません。しかし、Dart DDC対応が完了すれば、この問題もなくなります。なので、今だけの問題といえるでしょう。



# Batteryサービスから、残量を取得してみる とりあえず、Web Bluetooth x Dart で、HelloWorldをしてみる。

BLE Peripheral Simulator(https://github.com/WebBluetoothCG/ble-test-peripheral-android) は、Web Bluetooth の通信の実験相手をしてくれます。
とっても便利です。
ソースも公開されていますから、中身を見ながら、理解を深める事ができます。

BLE Peripheral Simulator の Batteryサービスから、バッテリー残量を取得して見ましょう。
※ BLE Peripheral Simulator は、GooglePlay からダウンロードできます。
https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral
※ chrome://flags よりWeb Bluetoothを有効にしてください。

===

Source
https://github.com/firefirestyle/ebook_webbluetooth_with_dart/tree/master/memo/test/hello

import'package:angular2/core.dart'; import'dart:html'as html; import'bt.dart'as b; import'dart:typed_data'; @Component(selector:'my-app', …

AngularDart で Pinterestっぽい、Layout を試して見た。

Angular Dart で Pinterestっぽい、Design を試して見ました。
https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-dynamicblock



隙間なく、四角形を詰めていくデモです。

コンストラクターで ElementRef を取得できる事がわかれば
簡単に書けますね!!

コード main.dart

import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; import'dart:async'; import'dart:html'as html; import'dynablock.dart'as dyna; import'dart:math'; main() { bootstrap(AppComponent); } classDynamicItemParam { int w; int h; DynamicItemParam() { Random rnd =new Random(); w = rnd.nextInt(100) +50; h = rnd.nextInt(200) +100; } } @Component( selector:'dynamicitem', template:""" xxx """, ) classDynamicItemimplements OnInit { @Input() DynamicComponent parent; @Input() int width =100; @Input() int height =200; final ElementRef element; DynamicItem(this.element) { (element.nativeElement as html.Element).style.…

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ010-012はFIXしたと見なす

三角関数(1) 万有引力をシミュレーションしてみよう
https://firebook.firefirestyle.net/presents010.html



三角関数(2) 角度を指定して移動しよう
https://firebook.firefirestyle.net/presents011.html



三角関数(3) 万有引力をシミュレーションしてみよう
https://firebook.firefirestyle.net/presents012.html



以降はGitbookを参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

AngularDart で Markdownを利用してみる

AngularDart で Markdownを利用してみた。
"#" と、@ViewChild を利用の仕方を覚えた!!

https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-markdown

import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; import'dart:async'; import'dart:html'as html; import'package:markdown/markdown.dart'as mark; main() { bootstrap(AppComponent); } @Component( selector:'markdown-component', template:""" <div #markdowncontent></div> """, ) classMarkdownComponentimplements OnInit { @Input() String content; html.Element _contentElement; @ViewChild('markdowncontent') set main(ElementRef elementRef) { _contentElement = elementRef.nativeElement; } ngOnInit() { _contentElement.children.clear(); _contentElement.children.add(new html.Element.html( """<div>${mark.markdownToHtml(content)}</div>"&qu…

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ00D-00FはFIXしたと見なす

雪を降らせてみる Scratchの clone機能を利用してみよう

https://firebook.firefirestyle.net/presents00d.html




カーソルに向かって進ませてみる Scratchの向きと前進で移動させてみよう。

https://firebook.firefirestyle.net/presents00e.html





ランダムに会話
Scratchのリスト機能を利用してみよう
https://firebook.firefirestyle.net/presents00f.html




以降はGitbookを参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

AngularDart RouteParams.params は UrlEncodeされたまま

OAuthの認証っぽいコードを書いていて、
URLの中にAccessTokenを渡すような書き方をしてみた。

その時に、渡されたパラメータが、UrlEncodeが必要な事に気がついた。


import'package:angular2/core.dart'; import'package:angular2/router.dart'; import'package:cl/config.dart'as config; @Component( selector:"myhome", template:""" <div class="mybody"> <h1>Home</h1> </div> """, styles:const[ """ .mybody { display: block; height: 600px; } """, ] ) classHomeComponentimplements OnInit { String twitterLoginUrl =""; final RouteParams _routeParams; HomeComponent(this._routeParams); config.AppConfig rootConfig = config.AppConfig.inst; ngOnInit() { twitterLoginUrl = config.AppConfig.inst.twitterLoginUrl; print(_routeParams.params.toString()); if(_routeParams.params.containsKey("token")) { config.AppConfig.inst.cookie.accessToken = Uri.decodeFull(_…

AngularDartを利用して Inputタグで画像を読み込むダイアログ。(2) 関数渡しをしてみる

前回のを、もう少し、賢くしてみました。

関数やパラメータを渡せるようにする
初期化しなくても動作するようにする
エラーメッセージ等を呼び出せるようにする


https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/image-input-dialog/app


dialog.dart

import'package:angular2/core.dart'; import'package:angular2_components/angular2_components.dart'; import'dart:html'as html; import'imageutil.dart'as imgutil; import'dart:async'; @Component( selector:'inputimage-dialog', styles:const [ """ .inputimage-dialog-title { } .inputimage-dialog-message { } .inputimage-dialog-errormessage { } .inputimage-dialog-cancelbutton{ } .inputimage-dialog-okbutton{ } """, ], template:"""<modal #wrappingModal> <material-dialog style='width:80%'> <div *ngIf='errorMessage!=""' class='inputimage-dialog-errormessage'>{{errorMessage}}</div> <h3 class='inputimage-dialo…

AngularDartを利用して Inputタグで画像を読み込むダイアログ

AngularDart を利用して、Inputタグで画像を読み込むダイアログを作ってみた。



#xxxx で、domを紐づけたりできるのを知った。

https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/image-input-dialog/app


===
main.dart

import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; import'input_img_dialog.dart';void main() { bootstrap(AppComponent); } @Component( selector:"my-app", directives:const [InputImageDialog], template:""" <div> <h1>Dialog Test</h1> <div> <button (click)='onClick(myDialoga)'>open</button> </div> <input-image-dialog #myDialoga> </input-image-dialog> </div> """ ) classAppComponentimplements OnInit { AppComponent(); ngOnInit() { } onClick(InputImageDialog _dialog) async { _dialog.open(); } }
===

input_image_dialog.dart


import'package:angular2/core.dart'; import'package:angular2_com…

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ009-00CはFIXしたと見なす

一点透視図法による、なんちゃって3Dhttps://firebook.firefirestyle.net/presents009.html


上下左右に移動させてみる (1)https://firebook.firefirestyle.net/presents00a.html

上下左右に移動させてみる (2) https://firebook.firefirestyle.net/presents00b.html
上下左右に移動させてみる (3) 背景を移動させて表現してみるhttps://firebook.firefirestyle.net/presents00c.html

以降はGitbookを参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ006-008はFIXしたと見なす

気軽に書き始めたものも、完成させるとなると結構なエネルギーを消耗します。炎の型への入り口として、書き始めた火の型を完成させる事にしました。
ただ、完璧を目指すると終わりません。 既にネタはほとんど書き終わっているので、あとは構成とかを見直すだけです。
なので、構成を見直したところは、もう終わりとして見直さない宣言をする事にしました。

これで、終わらせられるかな。

火の型のおまけ006-008はFIXしたと見なします。
キーボードを楽器にしてみるhttps://firebook.firefirestyle.net/presents006.html
キーボードを楽器にしてみる 連打できるようにする以降は、以下を参照してください。https://firebook.firefirestyle.net/presents007.html

背景を変えてみるhttps://firebook.firefirestyle.net/presents008.html



https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

AngularDart の Router を使って見た。

AngularDart の Router を使って見た。
Tour of Heros を試してみて。ちょっと躓いたので、記録だけ。

Router機能で、画面を切り替えるだけのコードなら、100行もない。

https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-routing

===
main.dart

import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; import'package:angular2/router.dart'; import'package:angular2/platform/common.dart'; import'dart:async'; void main() { bootstrap(AppComponent); } @Component( selector:'my-app', template:''' <h1>{{title}}</h1> <nav> <a [routerLink]="['XXX']">XXX</a> <a [routerLink]="['YYY']">YYY</a> </nav> <router-outlet></router-outlet>''', directives:const [ROUTER_DIRECTIVES], providers:const [ROUTER_PROVIDERS]) @RouteConfig(const [ const Route( path:'/xxxx', name:'XXX'…

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ004-005はFIXしたと見なす

気軽に書き始めたものも、完成させるとなると結構なエネルギーを消耗します。炎の型への入り口として、書き始めた火の型を完成させる事にしました。
ただ、完璧を目指すると終わりません。 既にネタはほとんど書き終わっているので、あとは構成とかを見直すだけです。
なので、構成を見直したところは、もう終わりとして見直さない宣言をする事にしました。

これで、終わらせられるかな。

火の型のおまけ004-005はFIXしたと見なします。


おまけ004 変数を使って、動き回らせてみるhttps://firebook.firefirestyle.net/presents004.html




おまけ005 言語を変えてみるhttps://firebook.firefirestyle.net/presents005.html


以降は、以下を参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ003はFIXしたと見なす

気軽に書き始めたものも、完成させるとなると結構なエネルギーを消耗します。炎の型への入り口として、書き始めた火の型を完成させる事にしました。
ただ、完璧を目指すると終わりません。 既にネタはほとんど書き終わっているので、あとは構成とかを見直すだけです。
なので、構成を見直したところは、もう終わりとして見直さない宣言をする事にしました。

これで、終わらせられるかな。

火の型のおまけ003はFIXしたと見なします。
カウントダウンして、発射https://firebook.firefirestyle.net/presents003.html

Scratchの変数機能を利用してみましょう。



以降は、以下を参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

Eddystone を試してみた。

Eddystoneを試してみました。
Eddystoneは、Google が勧めている Beaconサービスです。
Beaconといえば、AppleのiBeaonが有名ですが、Google も遅れて参戦してきました。

Chromeブラウザーがすでに、Beaconを発見する機能を持っている事と、
あと、URL(http://www 等をのぞいた17文字)を直接Beaconとして発信できるため、eddysone対応のBeaconを利用すれだけで、WebページをBeacon対応化できます。


Beaconを発信してみるhttps://github.com/don/node-eddystone-beacon を利用するとすぐできます。
===
EB = require('eddystone-beacon');
EB.advertiseUrl('https://goo.gl/EmhB38'); ===

アドレスは、httpsである必要があります!! ショートURLのリダイレクト先も同様です。
httpsである必要があるようです。
※ 正確には、chromeが受信するためには...


Beaconを受信してみる。 Chromeを設定してください。ちょっと、めんどくさいです。
android  https://support.google.com/chrome/answer/6239299?co=GENIE.Platform%3DAndroid&hl=en

ios https://docs.pushmote.com/docs/how-to-enable-chromes-physical-web-extension-on-the-ios


発見すると、通知画面に表示されます。バックグラウンドで実行されているわけではないので、iosでは、Widgetを開く必要があります。Androidも似たような感じでした。



Let's encrypt で、GAEで動作しているアプリをHttps化してみた

試しに、GAE上で動作させているWebページをHttps化してみました。
https://firefirestyle.net

SSLには、Let's Encrypt(https://letsencrypt.org/)を利用しました。
https://certbot.eff.org/#osx-otherの通りに手を動かすとできます。

Install brew install certbot


Get Started 1) sudo certbot certonly --manual

1-1) Please enter in your domain name(s) (comma and/or space separated)  (Enter 'c' to cancel):
firefirestyle.net

登録するドメインをしていする

1-2) Are you OK with your IP being logged?
Y

IPを記録するとのことなので、OKする。NOだと、登録できない。


1-3) Make sure your web server displays the following content at
http://firefirestyle.net/.well-known/acme-challenge/xxxxxyyyyy...

zzzzaaaaa....

http://firefirestyle.net/.well-known/acme-challenge/xxxxxyyyyy...
を開くと、zzzzaaaaa....と表示されるようにする。


1-4) Enterを押すとpemが生成されます。


2) private.keyをrsaフォーマットにコンバードする
sudo openssl rsa -inform pem -in privkey.pem -outform pem -out out.pem


3) GAEの登録
3-1) ページを開く
https://cloud.google.com/appengine/docs/python/console/using-custom-domains-and-ssl
に記載の登録ページに行く

3-2) PEM encoded X.509 public key certificate に、fu…

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ002はFIXしたと見なす

気軽に書き始めたものも、完成させるとなると結構なエネルギーを消耗します。炎の型への入り口として、書き始めた火の型を完成させる事にしました。
ただ、完璧を目指すると終わりません。 既にネタはほとんど書き終わっているので、あとは構成とかを見直すだけです。
なので、構成を見直したところは、もう終わりとして見直さない宣言をする事にしました。

これで、終わらせられるかな。

火の型のおまけ002はFIXしたと見なします。
カウントダウンして、発射https://firebook.firefirestyle.net/presents002.html

Scratchのイベント機能を利用してみましょう。



以降は、以下を参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ001はFIXしたと見なす

気軽に書き始めたものも、完成させるとなると結構なエネルギーを消耗します。炎の型への入り口として、書き始めた火の型を完成させる事にしました。
ただ、完璧を目指すると終わりません。 既にネタはほとんど書き終わっているので、あとは構成とかを見直すだけです。
なので、構成を見直したところは、もう終わりとして見直さない宣言をする事にしました。

これで、終わらせられるかな。

火の型のおまけ001はFIXしたと見なします。
7-8日目 猫を縦横無尽に動き回らせてみる 「もし端に着いたら、跳ね返る」と「回転方向を左右のみにする」を使ってみる。
https://firebook.firefirestyle.net/presents001.html



以降は、以下を参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

AngularDart のチュートリアルを試してみた。 ngModel

前回の通り、AngularDartだとデータを紐づけるのが簡単。
で、Html側で値を変更するようなシナリオがあった場合は、ngModelを利用すると
良いですよ的な事が、Angular Dart の Tutorial に書かれていた。


import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; void main() { bootstrap(AppComponent); } classMonster { int id; String name; int lv; Monster({this.id:0,this.name:"slime",this.lv:1}); } @Component( selector:"my-app", template:""" <div>Lv. {{monster.lv}} 's {{monster.name}} </div> <div> <label>mode name </label><input value={{monster.name}}></div> <div> <label>mode name ngmodel</label><input [(ngModel)]="monster.name"></div> """) classAppComponent { Monster monster =new Monster(); } https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-input/app

ngModelを利用しない方は、Input Domで値を変えても、Lv.{{}}.... の部分は変更されない。
しかし、ngModelを利用すると…

火の型 Scratchでプログラム入門 固定レイアウト版 「あとがき」はFIXしたと見なす

気軽に書き始めたものも、完成させるとなると結構なエネルギーを消耗します。炎の型への入り口として、書き始めた火の型を完成させる事にしました。
ただ、完璧を目指すると終わりません。 既にネタはほとんど書き終わっているので、あとは構成とかを見直すだけです。
なので、構成を見直したところは、もう終わりとして見直さない宣言をする事にしました。

これで、終わらせられるかな。

火の型の「あとがき」はFIXしたと見なします。

※ 日本語が少しへんだけど、情熱を感じたのでそのままにした。

あとがきhttps://firebook.firefirestyle.net/epilogue.html
プログラムを習得するのに必要なものは何でしょうか。 プログラムに必要な知識や技術力は、大きな問題ではない気がします。 
必要な知識って何って話です。 たとえば、プログラムで世の中に「何か」を提供する際に必要な 知識を私は教えることができません。 
「何か」は、それを発見した数だけあり。多分、全人類の人口よりは多いでしょう。 そんなものは、前もって学習する事はできません。  
「何か」が見つかったあなたは、幸せものです。 Tryしてみてください。 きっと、実現できますよ。 そして、どこでも習得できない知識や経験を得る事ができるはずです。 
ではでは
Good Luck  


以降は、以下を参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

火の型 Scratchでプログラム入門 固定レイアウト版 7日目はFIXしたと見なす

気軽に書き始めたものも、完成させるとなると結構なエネルギーを消耗します。炎の型への入り口として、書き始めた火の型を完成させる事にしました。
ただ、完璧を目指すると終わりません。 既にネタはほとんど書き終わっているので、あとは構成とかを見直すだけです。
なので、構成を見直したところは、もう終わりとして見直さない宣言をする事にしました。

これで、終わらせられるかな。

火の型の7日目はFIXしたと見なします。

7-8日目 野望に忠実であれ!! 「イカのインクゲーム」をハックする--3--https://firebook.firefirestyle.net/day07.html
さらなる高みへ。 Scratchでプログラム入門 0巻のラスト






以降は、以下を参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

AngularDart のチュートリアルを試してみた。

この、2年間はDart 向けのフレームワークをアレコレ行ったり来たりしていました。

私の場合だと、Web系では、dart_web_toolkit -> polymer-dart ->フルスクラッチ-> material design lite -> フルスクラッチ アプリ系では、chrome app -> flutter -> cordova x フルスクラッチ  
しかし、そろそろ、Angular Dart と、Flutter が、そろそろ使えるようになるのではと期待しています。
で、学習を再開しました。ドンドン使ってみる。

まずは、Angular Dart の Tutorial を 試してみました。 良い感じ。とってもコードを書くのが楽になりました。 ※ AngularDart 用の componentsも、だいたい揃ってる。

Data Binding とか 例えば、Dartのクラスと、Domが自動で連携してくれて便利!!
一秒ごとに、Counterを増やすような場合、以下のような感じで書ける。
https://github.com/kyorohiro/memo.dart.angular/tree/master/a002

main.dart import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; import'dart:async'; main() { bootstrap(AppComponent); } @Component( selector:'my-app', template:""" <div>{{counter}}</div> """ ) classAppComponentimplements OnInit { int counter =0; ngOnInit() { new Future(() async { while (true) { await new Future.delayed(…