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',
    template: """
    <h1>Hello {{name}}</h1>
    <div>
    <div *ngFor='let v of logs'>{{v}}</div>
    </div>
    <button (click)='onClick()'>Click</button>
    """
)
class AppComponent {
  var name = 'Angular';
  List<String> logs = [];

  log(String l) {
    print(l);
    logs.add(l);
  }

  onClick() async {
    b.Bluetooth bluetooth = b.getBluetooth();
    b.BluetoothDevice device = await bluetooth.requestDevice({ "filters": [{ "services": ['battery_service']}]});
    log("name : ${device.name}");
    log("id : ${device.id}");

    b.BluetoothRemoteGATTServer server = await device.gatt.connect();
    log("server.connected : ${server.connected}");

    b.BluetoothRemoteGATTService service = await server.getPrimaryService('battery_service');
    log("service.isPrimary : ${service.isPrimary}");
    log("service.uuid : ${service.uuid}");

    b.BluetoothRemoteGATTCharacteristic chara = await service.getCharacteristic('battery_level');
    log("service.uuid : ${chara.uuid}");

    ByteData buffer = await chara.readValue();
    log("service.value : ${buffer}");
    log("service.value : ${buffer.lengthInBytes}");
    log("service.value : ${buffer.buffer.asUint8List()}");
  }
}

===

参考

Web Bluetooth Draft Community Group Report, 27 January 2017

https://webbluetoothcg.github.io/web-bluetooth/

https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web

Implementation Status

https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md#scanning-api

LeScanは、これから
https://github.com/WebBluetoothCG/web-bluetooth/pull/239
https://webbluetoothcg.github.io/web-bluetooth/scanning.html

PS

個人的に、ネタを集めて、WebBluetoothについて、まとめる予定

たぶん以下で

https://firefirestyle.net/

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);
}

class DynamicItemParam {
  int w;
  int h;

  DynamicItemParam() {
    Random rnd = new Random();
    w = rnd.nextInt(100) + 50;
    h = rnd.nextInt(200) + 100;
  }
}

@Component(
  selector: 'dynamicitem',
  template: """
  xxx
  """,
)
class DynamicItem implements OnInit {
  @Input()
  DynamicComponent parent;

  @Input()
  int width = 100;

  @Input()
  int height = 200;

  final ElementRef element;

  DynamicItem(this.element) {
    (element.nativeElement as html.Element).style.width = "${width}px";
    (element.nativeElement as html.Element).style.height = "${height}px";
    (element.nativeElement as html.Element).style.color = "#FF00";
    (element.nativeElement as html.Element).style.padding = "0px";
    (element.nativeElement as html.Element).style.margin = "0px";
    (element.nativeElement as html.Element).style.backgroundColor = 'yellow';
    (element.nativeElement as html.Element).style.display = 'inline-block';
    (element.nativeElement as html.Element).style.border =
    "medium solid #333333";
  }

  ngOnInit() {
    print("xx1 ${element.nativeElement}");
    (element.nativeElement as html.Element).style.width = "${width}px";
    (element.nativeElement as html.Element).style.height = "${height}px";
    if (parent != null) {
      parent.append(this);
    }
  }
}


@Component(
  selector: 'markdown-component',
  directives: const [DynamicItem],
  template: """
  <div #markdowncontent>
    <dynamicitem  *ngFor='let c of contents' [parent]='own' [width]='c.w' [height]='c.h' ></dynamicitem>
  </div>
  """,
)
class DynamicComponent implements OnInit {
  @Input()
  List<DynamicItemParam> contents;
  List<DynamicItem> items = [];

  html.Element _contentElement;
  dyna.DynaBlockCore dynaCore = new dyna.DynaBlockCore();


  final ElementRef element;
  DynamicComponent own;

  DynamicComponent(this.element) {
    var elm = element.nativeElement;
    elm.style.position = "absolute";
    own = this;
  }

  @ViewChild('markdowncontent')
  set main(ElementRef elementRef) {
    _contentElement = elementRef.nativeElement;
    print("${elementRef} ${elementRef.nativeElement}");
    _contentElement.onChange.listen((e) {
      print("-a");
    });
  }

  append(DynamicItem ap) {
    print("XXS");
    var elm = ap.element.nativeElement;
    int margineW = 10;
    int margineH = 10;
    dyna.FreeSpaceInfo info = dynaCore.addBlock(
        ap.width + margineW, ap.height + margineH);
    elm.style.position = "absolute";
    elm.style.left = "${info.xs}px";
    elm.style.top = "${info.y}px";
  }

  ngOnInit() {
  }
}

@Component(
    selector: 'my-app',
    directives: const [DynamicComponent],
    template: """
    <markdown-component [contents]='contents'></markdown-component>
  """
)
class AppComponent implements OnInit {
  List<DynamicItemParam> contents = [
    new DynamicItemParam(),
    new DynamicItemParam(),
    new DynamicItemParam(),
    new DynamicItemParam(),
  ];

  ngOnInit() async {
    for (int i = 0; i < 10; i++) {
      contents.add(new DynamicItemParam());
      await new Future.delayed(new Duration(milliseconds: 500));
    }
  }
}

四角形を埋め尽くすアルゴ

https://github.com/firefirestyle/ebook_windstyle_markdown/blob/master/angular/tiny-dynamicblock/app/web/dynablock.dart

火の型 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>
  """,
)
class MarkdownComponent implements 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>""",
        treeSanitizer: html.NodeTreeSanitizer.trusted)
    );
    print(">> ${content}");
  }
}

@Component(
    selector: 'my-app',
    directives: const [MarkdownComponent],
    template: """
    <markdown-component [content]='content'></markdown-component>
  """
)
class AppComponent {
  String content = """
# H1
aasasdfa;lklasdf
  """;
}

火の型 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;
    }
    """,
    ]
)
class HomeComponent implements 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(_routeParams.params["token"]);
      config.AppConfig.inst.cookie.setIsMaster(_routeParams.params["isMaster"]);
      config.AppConfig.inst.cookie.userName = Uri.decodeFull(_routeParams.params["userName"]);
    }
  }
}

===

それは、そうだよなぁ...。
バイナリーデータが渡される事もあるわけだし

と、しかし、
Url.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-dialog-title' header>{{param.title}}</h3>
    <p class='inputimage-dialog-message'>{{param.message}}</p>
    <material-spinner *ngIf='isloading'></material-spinner>
    <div #imgc></div><br>
    <input #in *ngIf='isloading==false' type="file" id="upload" (change)='onInput(in,imgc)'>
    <div footer>
      <material-button *ngIf='isloading==false' autoFocus clear-size (click)="onCancel(wrappingModal)" class='inputimage-dialog-cancelbutton'>
        {{param.cancel}}
      </material-button>
      <material-button *ngIf='currentImage!=null||isloading==false' autoFocus clear-size (click)="onFile(wrappingModal)" class='inputimage-dialog-okbutton'>
        {{param.ok}}
      </material-button>
    </div>
  </material-dialog>
</modal>
  """,
  directives: const [materialDirectives],
  providers: const [materialProviders],
)
class InputImageDialog implements OnInit {
  @ViewChild('wrappingModal')
  ModalComponent wrappingModal;

  @Input()
  InputImageDialogParam param;

  bool isloading = false;
  html.ImageElement currentImage = null;
  String errorMessage = "";

  ngOnInit(){
    if(param == null) {
      param = new InputImageDialogParam();
    }
  }

  void open() {
    wrappingModal.open();
  }

  onCancel(ModalComponent comp) {
    wrappingModal.close();
  }

  onFile(ModalComponent comp) async {
    isloading = true;
    try {
      var ret = await param.onFile(this);
      if (ret != "" && ret != null) {
        errorMessage = ret;
      } else {
        errorMessage = "";
        wrappingModal.close();
      }
    } catch (e) {
      errorMessage = "failed to (${e})";
    } finally {
      isloading = false;
    }
  }

  onInput(html.InputElement i,html.DivElement c) async {
    isloading = true;
    try {
      c.children.clear();
      if(i.value.length <= 0) {
        return;
      }
      var img = await imgutil.ImageUtil.loadImage(i.files.first);
      var img1 = await imgutil.ImageUtil.resizeImage(img);
      c.children.add(img1);
      currentImage = img1;
    } catch(e){
      errorMessage = "failed to (${e})";
    } finally{
      isloading = false;
    }
  }
}

typedef Future<String> OnFileFunc(InputImageDialog d);

class InputImageDialogParam {
  String title;
  String message;
  String ok;
  String cancel;
  int get imgWidth => 300;
  int get imgHeight => -1;
  OnFileFunc onFileFunc;

  InputImageDialogParam({this.title:"File",this.message:"select file!!",this.ok:"OK",this.cancel:"Cancel",
  onFileFunc: null}){
  }

  /**
   * if failed to do onFind func, then return error message.
   */
  Future<String> onFile(InputImageDialog d) async {
    if (onFileFunc == null) {
      return "";
    } else {
      return onFileFunc(d);
    }
  }
}

====


main.dart

import 'package:angular2/platform/browser.dart';
import 'package:angular2/core.dart';
import '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>
    <inputimage-dialog #myDialoga [param]='param'>
    </inputimage-dialog>
    </div>
  """
)
class AppComponent implements OnInit {
  final InputImageDialogParam param = new InputImageDialogParam();

  AppComponent();
  ngOnInit() {
  }
  onClick(InputImageDialog _dialog) async {
    _dialog.open();
  }
}

====

InputImageDialogParam を用意して、デフォルト値を持たせるようにして
初期化は必須で無くした。

onFIle()メソッドを追加して、後から機能を拡張できるようにしてみた。


うーむ
徐々に汎用的な部品が作れるようになってきたかな。
まだ、微妙かな

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>
  """
)
class AppComponent implements OnInit {
  AppComponent();
  ngOnInit() {
  }
  onClick(InputImageDialog _dialog) async {
    _dialog.open();
  }
}

===

input_image_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: 'input-image-dialog',
  template: """
<modal #wrappingModal>
  <material-dialog style='width:80%'>
    <h3 header> File </h3>
    <material-spinner *ngIf='isloading'></material-spinner>
    <div #imgc></div>
    <div footer>
      <input #in type="file" id="upload" (change)='onInput(in,imgc)'>
      <material-button autoFocus clear-size (click)="onCancel(wrappingModal)">
        Cancel
      </material-button>
      <material-button *ngIf='currentImage!=null' autoFocus clear-size (click)="onFile(wrappingModal)">
        File
      </material-button>
    </div>
  </material-dialog>
</modal>
  """,
  directives: const [materialDirectives],
  providers: const [materialProviders],
)
class InputImageDialog {

  @ViewChild('wrappingModal')
  ModalComponent wrappingModal;

  bool isloading = false;
  html.ImageElement currentImage = null;

  void open() {
    wrappingModal.open();
  }

  onCancel(ModalComponent comp) {
    wrappingModal.close();
  }
  onFile(ModalComponent comp) {
    wrappingModal.close();
  }

  onInput(html.InputElement i,html.DivElement c) async {
    isloading = true;
    try {
      if(i.value.length <= 0) {
        return;
      }
      var img = await imgutil.ImageUtil.loadImage(i.files.first);
      var img1 = await imgutil.ImageUtil.resizeImage(img);
      c.children.add(img1);
      currentImage = img1;
    } catch(e){
    } finally{
      isloading = false;
    }
  }
}

===

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

一点透視図法による、なんちゃって3D

https://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',
      component: XXXComponent,
      useAsDefault: true),
  const Route(path: '/yyy', name: 'YYY', component: YYYComponent)
])
class AppComponent {
  String title = 'Tour of Heroes';
}


@Component(
  selector: 'yyyy',
  template: """<div>xxx</div> """,
  directives: const [ROUTER_DIRECTIVES],
)
class XXXComponent {
  XXXComponent();
}


@Component(
    selector: 'xxxx',
    directives: const [ROUTER_DIRECTIVES],
    template: """
    <div>yyy {{v}}</div>
    <button (click)="goBack()">Back</button>
    <button (click)="gotoDetail()">View Details</button>""")
class YYYComponent implements OnInit {
  final Router _router;
  final Location _location;
  String v="";
  YYYComponent(this._router,this._location);

  void ngOnInit() {
    v = _location.path();
  }

  void goBack() => _location.back();
  Future<Null> gotoDetail() => _router.navigate([
    'XXX'
  ]);
}

===

index..html
====

<!DOCTYPE html>
<html>
  <head>
    <!-- For testing using pub serve directly use: -->
    <base href="/">
    <title>Hello Angular</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="main.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>
  </head>
  <body>
  <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

====

チュートリアルには書いているのですが、

<base href="/">

を書き忘れて、躓いた。

そこだけ、注意。

火の型 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 に、fullchain.pem を指定する

3-3) Unencrypted PEM encoded RSA private keyに、out.pem を指定する

期間

証明書の期限は、3ヶ月なので、こまめに更新する必要があります。

もともと、lets encrypt は、Unencrypted PEM encoded RSA private key を利用して

自動更新する方法を想定して作られています。

GAEでの、この辺りの自動化については、以下とか参考にしてください。

https://code.google.com/p/googleappengine/issues/detail?id=12535

まだ、私は試していません。

参考

http://koni.hateblo.jp/entry/2016/06/02/233900
http://blog.seafuj.com/lets-encrypt-on-google-app-engine
https://community.letsencrypt.org/t/error-adding-cert-invalid-private-key/5167

これから読む

https://github.com/jlandure/go-appengine-https
https://github.com/xenolf/lego

火の型 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);
}

class Monster {
  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>
    """)
class AppComponent {
  Monster monster = new Monster();
}

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

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

便利!!

火の型 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くらいあります。