HTML5 Conference 2016 に参加したときのメモ

イベント

動画アーカイブ

発表内容のまとめというよりは発表聴きながら気になった点や思ったことのまとめです

基調講演

中村教授

  • BigData や Iot, AI は Web が前提としてある
  • インターネットがいわば OS の立ち位置となっている

及川さん

  • 実はIE7担当してました
  • WebAssembly とかまでいくと、Web とはなんなのか
  • Webがサボってきた結果としての AMP
  • セマンティクスの重要性

Reactの最新動向とベストプラクティス

Reactの最新動向とベストプラクティス // Speaker Deck

  • Facebook, Instagram, Netflix, Twitter(mobile) で使ってる
  • React.PureComponent いずれ最適化されるかも
  • react-addon-perf で描画を計測
  • High Older Component パターン
    コンポーネントでラップする
  • Container Component と Presentation Component
    役割分担。
  • Redux Middleware
    Action 内の非同期処理など
  • Test
    Component のテストや DOM レンダリングまでなど
  • ESLint

お金ではなく知恵でサイトを成長させるグロースハックの海外事例とGoogle Analytics解析のコツ

  • 効果が大きいところから手掛ける
  • CVR, 直帰率、営業転換率
    どこから手を付けるべきか
    予想：10%以上、20%以下、10%以上
    解答：1%以上、40%以下、10%以上
  • ペルソナ設定
  • 試験は500回分のアクセス数で試している

Material Design を使ったマルチデバイスに対応するデザインの作り方

  • 次の bootstrap？
  • 3つライブラリがあるよ
    素のHTMLで使うなら Material Design Lite

Webパフォーマンス最前線

  • パフォーマンスに対する優先度 Reaction Animation Idle Loading
    Webサイトでは Load 推しだったのが
    アプリ風Webサイトでは R A 推し
  • top, left 使わずに translate 使って移動を GPU 上で処理させる
    Layout 処理をCPUでやらせないことでパフォーマンスを上げる

Progressive Web Apps の導入基礎

  • push notification 怖くないよ
  • 具体的な実装方法が事細かに解説
    この資料見ればたぶん大丈夫
  • SUUMO は今はWebとアプリ両方に注力している
    数年後どうなっているか

最後に

ほか


いまから始めるWebフロントエンド開発

いまから始めるWebフロントエンド開発


.NET(C#) で subversion してる環境から抜け出すための施策

WIP

前提条件

施策

  • nuget を使う

nuget のサーバーを用意する

nuget はパブリックなリポジトリだけでなく、オンプレミスなサーバーを用意することでリポジトリ登録ができる。
Hosting Your Own NuGet Feeds

ビルドサーバーを用意して、ここに送り込むようにする。
robots.txt や travis.yml みたいにファイル名を決め打って設定できるようにしておくと便利かも。

パッケージの配信にあたってはターゲットプラットフォームやバージョン管理などのルールを考慮する必要がある、はず。

svn:externals から nuget の参照に移行する

準備が整ったアセンブリから nuget 経由での参照に切り替える。

subversion リポジトリを移行する

すべての参照元が nuget から移行できた段階でリポジトリを移行する。
git-svn で移行できたはず。

git を定着させる

ここまで問題になったということは subversion が組織に根付いており、git そのものはもちろん、付随する PullRequest 文化が組織に定着していないはず。
布教活動をきちんと行う。
できれば経験者がチームを横断的に関わってハードルを下げることが望ましい。
チームが大きい場合は git-svn を一部ユーザに使ってもらうなど、段階的に以降することも視野に入れる。

最後に

こうやればできないかなってアイデアをメモ代わりに書いた。
妄想含む。
進めたら追記しよう。


GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)

GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)


AmazonWishlistCalendar というWebサイトを作った

サービス紹介 作った AWS

サイトの説明はサイトに全て書いたのでそちらを参照してほしい。

Amazon Wishlist Calendar - ほしい物リストをカレンダーに


ということでサイトに書かない話をここに書く。


作った目的

ゲームから長らく離れてた中、昨年(2015)のスプラトゥーンからゲーム熱が再燃し始めた。
しばらくはゼノブレイドクロス、Fallout4、GTA5 などメジャーなタイトルを遊んでいたけど、2016年秋はPS4でいろいろ発売されるのでカレンダーにでも登録しておくかという気持ちになった。
で、どうせ Amazon で買うことだし、なんかしらの登録した情報がカレンダーと連携できればいいのにと考えていたのが発端。


あとはドミノ式に要件を固めていった。

  • 予約まではしないソフトもあるのでほしい物リストと連携したい
  • お金をかけずに運用したい
  • カレンダーとの連携は iCal あたりで
  • 発売をスルーした場合にも後で教えてもらえるように RSS フィードが欲しい
  • どうせなら発売前も RSS フィード流れてほしい
  • RSS フィードにアフィリエイトリンク貼ってアフィ長者目指そう


使用技術

iCal, RSS フィードは URL 見ると分かる通り AWS S3。
S3 のコンテンツは初回登録時と以降は毎日スケジューラで lambda の NodeJS スクリプトをコールして生成している。
そのため発売日の変更があれば翌日には更新される。FF15 の発売日は無事更新されていた。
ほしい物リスト自体は DynamoDB に保存する。
DynamoDB ってキーワード見かける度にスプラトゥーン思い出す。

コンテンツは小さいし、スクリプトの実行回数も小さい。
カレンダーや RSS リーダーが極端にアクセスしないかぎりは S3 の通信も小さいので大したコストにはならないはず。


lambda のデプロイは apex を使った。
初見だからか lambda の制約で起きる問題にぶつかることが多く、さくっとデプロイできる体制は大事。
みんなどうしてるんだろう。
gulp とかを組み合わせてビルド、デプロイするのかな。
面倒で1ファイルに書いてしまった。


最後に

アフィ長者になる夢は残念ながら崩れてしまった。
Amazon に問い合わせたところ、AmazonWishlistCalendar はアプリケーションなので、Amazonアソシエイト・プログラム参加要件 の6に該当するため、ダメだということ。
今どきブログのRSSにアフィがあることもあるしいけるでしょと思ってたけど甘かった。


ちなみにデバッグで使った僕のほしい物リストはこちら。


ファイナルファンタジー XV　初回生産特典　武器「正宗/FINAL FANTASY XVオリジナルモデル」アイテムコード同梱

ファイナルファンタジー XV　初回生産特典　武器「正宗/FINAL FANTASY XVオリジナルモデル」アイテムコード同梱

ペルソナ5 [PS4]

ペルソナ5 [PS4]


機械学習で株式・FXを売買しようとする人に伝えたいこと

雑記

はじめに

機械学習以前から、株やFXで自動売買する取り組みを試みたことがある。
たぶん7, 8年くらい前。


結果から言えば、ややマイナスで今に至る。


機械学習を取り入れて再チャレンジしてみたいところではあるが、機械学習を理解できるだけの素養がまだないので、過去の経験をインターネットに放流することで誰かの役に立てば嬉しい。
全くのゼロから取り組むよりはいいだろう。

検証するのは面倒なので記憶のみを頼りに書く。
読み手はそのつもりで。


日本株式

まずはリアルタイムデータの取得。
簡単に思いつくのはYahooファイナンスあたりからデータ取得することだが、日本の最新株価は無料では取得できない。
最新の株価情報は証券会社が東証などにお金を払って仕入れているのが理由、だったはず。


じゃあどうするか。
楽天証券だ。
楽天証券はマーケットスピードというサービスを提供していて、その機能の一つとして「エクセルにRSSで最新のデータを取り込む」ことができる。
取り込むというか、表示し続けるというか。
Googleスプレッドシートでもないのにリアルタイムにセルのデータが変わり続けるのでなんかスゴイ。

少し前にGoogleスプレットシートでスクレイピングして株価取得する記事があったっけ。
そこに時間を費やすくらいならアルゴリズム作りに時間を割こう。
株価から出来高に単元株数まで取得できるので、スクリーニングもできる。


機械学習では肝心の過去データ。
これは知らないのでググってほしい。
たぶん探せばある。
Yahooファイナンスで日次のデータはダウンロードできた気がするが、5分足などはなかった気がする。


発注。
残念ながら僕が取り組んだときは自動化するいい方法がなかった。
ブラウザを操作するくらい。
今はあるのかな。知らない。
自動売買しようと思ったらアルゴリズム作りがすべてなので、発注のことなんて考える必要ない。
どうせしばらくは現実のデータを流し込んで発注はログ出力するのみのテスト運用を走らせることになる。
その時間に Selenium でも使ってやったらいい。


FX

こちらは当時から自動売買するための仕組みが進んでいた。
MetaTrader、通称MT4が鉄板のツールで、トレード用アルゴリズムを専用言語で書ける。
提携している？海外の投資用口座アカウントに MT4 からログインできて、そこで発注できる。
データの取得や過去データを利用してアルゴリズムの検証などもできる。
アルゴリズム自体を売買している人もいて、よくわからんサイトで売っていた。
数千円から数万円。
自分も買ったことがある。 儲かったか？
儲かっていたらやめていない。
結局アフィリエイトと似ていて、その作り方を売っている人は自分で儲かっていないんだろう。


株式にも言えることだが、FXは開く口座が肝心で、どれくらい取り分を持っていかれるかが重要になる。
週に数回とかならいいが、スキャルピングのように取引回数が膨大になるアルゴリズムならその影響は大きい。
デモ口座でのシミュレーション時にこれを再現するように注意すべき。


あと MetaTrader は Windows のみ。
昔と違って VPS も安くなったので、動かしっぱなしにするのはそれほど高くないだろう。


あとがき

数値のみを追ったテクニカルな手法だけでは、日銀の動きなどの異常系の動きに耐えられない。
なのでそういうファンダメンタルな手法も今の機械学習なら取り入れられると思うので、そのへんを考慮するといいんじゃないかと思う。


あと言うまでもなくマーケットの世界はとびきり優秀な人がごろごろしている。
FXは特にそう。
そういう人と真っ向から戦わずに済むよう、流通金額の少ない銘柄で取引するとか、そういう防御策を取ったほうがいい。
短期的に勝つことよりも負けずに生き残ることが大事。


新MT4対応 FXメタトレーダープログラミング入門

新MT4対応 FXメタトレーダープログラミング入門

MetaTrader 4で始める FX自動売買システム作成の教科書

MetaTrader 4で始める FX自動売買システム作成の教科書


MISFIT RAY 開封の儀

買った物 雑記

ウェアラブルな活動計、MISFIT RAY を購入した。

jp.misfit.com


箱は多言語表示されているので世界で統一のパッケージっぽい。

f:id:khei-fuji:20160530214001j:plain


リボンのマークみたいなロゴ。モノクロですね。
f:id:khei-fuji:20160530214156j:plain


内装はシンプル。
f:id:khei-fuji:20160530214209j:plain


最初は電池を入れるためにバンドを回して分解する。
f:id:khei-fuji:20160530214805j:plain


準備OK。 f:id:khei-fuji:20160530222210j:plain


活動計用のアプリ(Misfit)とデバイスの設定用アプリ(Misfit Link)があり、アプリを起動するとデバイスを自動認識する。

MISFIT RAY では3タップ時の操作を設定できる。
カメラのシャッターや音楽の再生・停止、あとは IFTTT の連携なども可。
今どき Yo の連携が可能なのは流行の名残だろうか。


使用感のレビューは2週間くらい経ったらするつもり。
気になってるのは以下

  • 運動・睡眠トラッキングの精度
  • デバイスのバイブレーションによるアラームの効果
  • 24時間つけっぱなしで邪魔にならないか


MISFIT RAY (ミスフィット レイ) ローズゴールド / ブラックスポーツバンド 【日本正規代理店品】

MISFIT RAY (ミスフィット レイ) ローズゴールド / ブラックスポーツバンド 【日本正規代理店品】


iOSアップデート後にパスコードが入力できない現象の回避策

雑記 iPhone

毎回この現象に悩まされているが、ついに回避策を見つけた。
ちなみに iPhone6 SIMフリー版 64GB。


  1. 一度ロック画面に戻す
  2. 右にスライドしてパスコード入力画面に遷移する
  3. (入力できなくなるまで2秒ほどの猶予があるので急いで) キャンセルをタップし、ロック画面に戻す
  4. この後パスコード入力画面に行くと、固まる現象は出なくなる


iPhone6s ガラスフィルム iPhone６ 保護フィルム Hippox 強化ガラス保護フィルム 超薄0.2mm 硬度9H 気泡ゼロ 耐指紋 撥油性 98%高透過率 2.5D ラウンドエッジ加工 3D Touch対応 耐衝撃 飛散防止処理 【生涯保証】

iPhone6s ガラスフィルム iPhone６ 保護フィルム Hippox 強化ガラス保護フィルム 超薄0.2mm 硬度9H 気泡ゼロ 耐指紋 撥油性 98%高透過率 2.5D ラウンドエッジ加工 3D Touch対応 耐衝撃 飛散防止処理 【生涯保証】


BotFramework で PomodoroBot をつくった

作った サービス紹介

前回 に続き、BotFramework で作ったもの第二弾。
PomodoroBot を作成した。

Pomodoro Bot

使い方はサイト内の How To Use を参照。


訴求点

  • ギョームとプライベートなどで異なるプラットフォーム環境でも共通して使えるツールが欲しかった
  • Bot のインストールで済むので気軽


システム構成

pomodoro-bot

pomodoro-notification


まだまだなところ

  • タイマーの途中停止ができない
  • Heroku の再起動) でタイマーが止まる
    通知は来る
  • Heroku の deploy でもタイマーが止まる
    Deploy Hooks で止まった通知は来る


学び


感想

BotFramework 自体は C# or Node.js だが、FormFlow は今のところ C# でしか実装されてない。
これを渡すだけでポモドーロタイマーを作成するウィザードにしてくれるんだからありがたい。

[Serializable]
public class PomodoroTimer
{
    public const string DescName = "name";
    public const string DescDuration = "duration minutes";
    public const string DescShortBreak = "short break minutes";
    public const string DescLongBreakSpan = "long break span";
    public const string DescLongBreak = "long break minutes";

    [Describe(DescName)]
    public string Name { get; set; }

    [Describe(DescDuration)]
    [Numeric(5, 60)]
    public int Duration { get; set; }

    [Describe(DescShortBreak)]
    [Numeric(1, 20)]
    public int ShortBreak { get; set; }

    [Describe(DescLongBreakSpan)]
    [Numeric(2, 10)]
    public int LongBreakSpan { get; set; }

    [Describe(DescLongBreak)]
    [Numeric(5, 60)]
    public int LongBreak { get; set; }
}


Bot 開発は機械学習に踏み入れなければそこまで難易度は高くない。
アプリのように UI がないのが大きい。
システム全体の構成を考えるアーキテクト視点のスキルが必要に感じた。
フルスタック、というか広く浅いスキルセットを持っている僕みたいな人にマッチしてる。


アジャイルな時間管理術 ポモドーロテクニック入門

アジャイルな時間管理術 ポモドーロテクニック入門