Pastalablog in はてな

時代はブログ！ 日記もあるよ→http://pastak-diary.hatenadiary.com

サークルの例会講座でWebAPIについてざざっと紹介しました

資料をmarkdownで書いたので、gistに貼って共有したのですが、JS埋め込みなどが効かなかったのでブログに貼ることにしました。

自己紹介などは省略しております。あしからず。

（下記資料内の対応ブラウザの欄のFirefoxのあとの(M)はFirefox Mobileを表現しています）

今日のはなし

  • Web APIと呼ばれているJSのAPI群から一部のAPIについての紹介をします
  • 「そういうことがJSで出来るようになってるのかぁ」って程度の知見の共有です

Web API とは(1)

WebAPI はデバイスの互換性一式と、Web アプリやコンテンツがデバイスに保存されているデータ (カレンダーや連絡先など) に加えてデバイスハードウェア (バッテリーの状態やデバイスのバイブレーションハードウェアなど) へアクセスできるようにする API を指す用語です。これらの API を追加することにより今日の Web ができることを増やすとともに、従来はプロプライエタリなプラットフォームでしかできなかったことに広がることを望んでいます。

via https://developer.mozilla.org/ja/docs/WebAPI

Web API とは(2)

  • 要約するとJSからデバイス内のデータやハードウェアにアクセスするための各種APIの総称
    • MozillaがFirefox OSの開発のために積極的に実装(しているものが比較的多い)
      • まだ仕様が草稿・勧告候補段階または標準化提案がなされていないものもあります
      • 掲載、参照しているサンプルは今後の仕様変更などによる影響を大きく受ける場合があります。
  • Firefox OS以外（Android版FirefoxやChrome、デスクトップ向けFirefox）でも動くものをピックアップして紹介します。

WebRTC

  • ブラウザ同士でP2P通信を実現したり、カメラやマイクにアクセスしたり出来るAPI群の総称
    • チャット、ファイル交換、録音、録画・・・etc
  • 詳細：WebRTCで出会い系チャット転覆 by uiureo

Geolocation API

  • デバイスの経度緯度を取得 − ほぼ全てのデスクトップ向けモバイル向けブラウザで動作
    • デスクトップ向けブラウザは Google Location Services を使用した Wi-Fi 情報に基づく位置測定 をしている

デモ

Web Notifications API

  • デスクトップ通知を出すAPI
  • IE以外のデスクトップ向けブラウザで動作する

デモ

Network Information API

Battery Status API

Pointer Lock API

Vibration API

  • デバイスのバイブレーション機能を利用するためのAPI
モバイルデバイスで動画を見ていて、爆発シーンでデバイスが少し振動すると想像してみましょう。あるいはボンバーマンをプレイしていて、ブロックが爆発するときに穏やかな衝撃を感じると想像してみましょう!

devicelight event

  • デバイスの光センサの値の変更時に発火するイベント。
    • 環境によって背景のコントラストを変えるなどが可能になる。
    • event.valueに単位ルクスで格納される
  • サポート：Firefox(Macのみ), Firefox(M)

デモ

ここが変わる〜〜〜

deviceproximity Event

  • デバイスの近接センサーの変化に応じてイベントを発火。
    • 詳細な値を取得するdeviceproximityイベントとおおまかに近いかどうかを返すuserproximityイベントがある
  • サポート：Firefox, Firefox(M)

その他各種センサ系API

devicelightとdeviceproximityはそれぞれSensor DOM Eventとして提案されている。

上記２つは勧告候補になっている。Sensor Eventとしては下記のものも提案されている。

  • devicetemperature
    • 温度センサ(℃)
  • devicepressure
    • 圧力センサ(kP)
  • devicehumidity
    • 湿度センサ(%)
  • devicenoise
    • 雑音センサ(dbA)

まとめ

  • 最近はJSからデバイスの各種機能を利用できるAPIが増えてきた
  • 拡張機能などから利用する場合は更に出来る事の範囲が広がってる
    • 例：Chrome Extensionではスクリーンキャプチャが撮れる

参考

人生初ATOM package "nippo"を作った

nippo について

先日、 GitHub勉強会でAtomの話を聞いて意識が高まったので、atomのpackageを書いてみることにした。

そして書いたのがこちら。publish済みなので、packageメニューからも探して入れれる。

バイトに行くと日報を書かないといけないんだけど、日報書くの忘れることが多い。あといざ書くってなっても、何したか忘れるからいつもgit logして作業の履歴を確認することが多い。

ATOM上でgit-logからそれっぽい日報を作れると便利な気がしたからpackageにしてみた。

git logから生成するので、そのことを考えてるとcommitメッセージで何したか分かるようにちゃんと書こうという気分にもなるし、日報も書けるしお得。

ATOMのpackageについて

サンプルがCoffeeScriptで書かれてたから、CoffeeScriptで書いた。人生で初めてCofeeScript書いたけど、そんなに違和感なく書けて良かった。

ATOMのpackageの作り方は公式ドキュメントのCreating Packagesを読むと全部載ってる。

日本語だとこの辺のブログ記事で紹介されてる。

ATOMのpackage、ATOM上から1ステップでスケルトンが生成されて、ATOM上でテスト実行したりも出来て良かった。

ただ、packageの再読み込みするのに、ウィンドウをリロードしないといけないのが辛い感じだったので改善されると嬉しい。

ATOM上で全部完結してて画面をちょこちょこ行き来しなくて良いのはストレスレスな感じ。

ATOM、何でもAPIから操作したり、デフォルトのpackageすらも入れ替えたり出来るの良い。ATOMの人がGitHub勉強会でEmacsとTextMateを掛けあわせたって言ってたのなるほどって感じ。

ATOMのAPIドキュメント( https://atom.io/docs/latest/ )、latestじゃないものを見てるとページ上部に警告が出るんだけど、APIリファレンス( https://atom.io/docs/api/ )だとそれが出ない。https://atom.io/docs/api/にアクセスすると、https://atom.io/docs/api/[latest version]/api/ に飛ばされるから、常にhttps://atom.io/docs/api/にアクセスするようにすると良さそう。

NodeJSあんまりちゃんと知識を蓄えてなかったので、node.js - npm: Why is a version "0.1" invalid? - Stack Overflow と同じ状況になって、Semantic Versioning 2.0.0を知った。不勉強だった。

ATOMに関する知見、APIドキュメントとか公式ブログとかに結構載ってるけど、それでも分からないことは結構、ディスカッション( http://discuss.atom.io/ )に載ってたりした。

どっかのブログにも載ってたりするのかもしれないけど、ATOMって名前が悪すぎて検索できないので、それでも困ったら、適当にGitHub上で色んなpackageのコード読んだりした。package、基本的には全部GitHubに置いてあるし良い。

結構気軽にpackage作れたので、また何か思いついたら作りたいと思った。

京都であったGitHubの勉強会に行った話

日曜日のGitHub Kaigiに続いて、月曜水曜と京都でGitHubの人が来られる勉強会があったので参加した。

月曜日は京大の社会情報学系の院生向けの講義だったみたいだけど@diceさんに是非どうぞって言われたので突入して話を聞いた。この日はGitHub Kaigiで話された「How GitHub Works」の再演とその続きの話だった。

資料のアップロードが間に合わなかったとかでUSBメモリでPDFが配布されたりしたのが渋かった。

後半はGitとGitHub入門って感じで、GitHubにログインして、リポジトリ作ってGitHub上でREADME.mdを編集したり、それをcloneしたり、ローカルでcommit作ってpushしたりした。あとPull Requestを送ってレビューするのを会場でやるっていうのがあって、LGTMなGifアニメを貼ったら、GitHubのトレーナーの人もお気に入りのGifアニメを貼ってくれて盛り上がってた。

水曜日ははてなでAtomの話とGitのレクチャーがあった。

Atom、この春くらいから結構常用していて、8:2でAtomとVimを使うみたいな生活をしているけど、AtomShellとかほとんど使ってなかった。APIとか結構なんでもあって、packageのスケルトンを生成する機能とかもちゃんとあるから、もっと手軽package作って承認を得ていっても良いという感じがした。

Atom、夢とロマンがちゃんとある上にHTML+JS+CSSっていう扱いやすいプラットフォームに載せてて好感度が高まった。

Gitの話はいきなりghコマンドが発動して、hubじゃなくて時代はghなのかぁと思ったりした。そのあともgit cloneとか基本的なコマンドを扱ってるかとおもいきや唐突に便利なオプションが飛び出したりして気が抜けない感じだった。あと、gh pull-requestとかでbranch名を頑張って打つの絶対にtypoするから補完とかに頼りたいと思った。

このエイリアスをメモし損ねたので懇親しながら雑な英語であのエイリアスめっちゃ便利そうだし使いたいしコピーさせてくれ〜って言ったら、ついでにもう1個便利エイリアスを教えてもらってめでたい感じになった。

$ git config --global alias.show-ignored=ls-files --exlude-standard --others --ignored
$ git config --global alias.show-orphans=!git log --oneline --graph --decorate `git reflog | cut -c1-7`

こういうデモするときにtail -f ~/.zsh_historyを出してるてコマンド履歴が前に出せて良いって感じだった。

GitHubの人以外にも久しぶりに色んな人と話せて良かった。

坐禅のページにあったGIFアニメ

先輩に坐禅行こうぜ〜ってチャットで言われたので、近々行くことになりそうな坐禅について調べてた。

このページに座り方が載ってた。

座り方の確認の仕方がGIFアニメになってたけど、スピードがゆっくりで動きが見えてこないので、早くした。

早くしたら残像とかも見えるから動きと動きの間とかが埋まって滑らかに見えて動きが伝わるから早い方が良いと思った。

せっかくなので貼っておきます。

元のやつ

f:id:Pasta-K:20140421031458g:plain

早くしたやつ

f:id:Pasta-K:20140421031522g:plain

もっと早くしたやつ

f:id:Pasta-K:20140421031538g:plain

ちなみに説明文は

足が組めたら、先ず体を左右に、続いて前後に揺すって中心を決めます。

って書いてあった。こうしたら中心が決めれるっぽい。GIFアニメは左右だけだったけど、説明をよく読んだら前後もって書いてあった。GIFアニメだけじゃ見落とすところだった。ちゃんと前後のもGIFアニメにしておいて欲しい

京大マイコンクラブでGitHubのプライベートレポジトリを無料で50個有効化した話

追記2016/05/12 1:18 (JST)

全てのプランにおいてプライベートリポジトリ数の上限が撤廃されたので、それに関する情報をKMCブログに書きました。

この前、GitHubの人々が来日されて京都でもイベントが開催されて、そこでアメリカとかでは大学の授業やゼミなどにGitHubが活用されているという話を聞いて、ブログに書いたりしました。

そのイベントの時に通訳をしてらした @dice さんと村岡さんとやり取りをしていた中でKMCでもGitHubを使ってみませんかという話になったので、手順を教えてもらって実際に利用を開始したので、簡単に方法をまとめておきます。（今回はサークルのOrganizationで利用を開始したのでその例を紹介しますが、同様の方法でゼミなどでも利用になれると思います。）

（この記事を書こうと思い立ってから1週間ほど経っていて、その間に同じような内容の記事（【学生必見】個人や部活でGitHubのプライベートレポジトリを無料で使おう！）が出てたけど、くじけずに書きます。）

ちなみに授業などで活用する場合の方法は英語で公式ページにまとまっています。

質問などもここに書けば良いと先日のイベントでGitHubの人が言っていました

0. Organizationを作る

京大マイコンクラブは前からOrganizationをGitHub上に持っていた*1ので、新たに作る必要はありませんでした。

無い場合は GitHub の上部ツールバーの右側の＋メニューからNew organizationを選んで、Organizationを作成してください。この時に入力するe-mailなどは団体の物でも問題ないです。また、まだこの時はChoose the organization’s planで有料プランを選ぶことはせずにOpen Sourceを選択してください。

1. https://education.github.com/ にアクセス

https://education.github.com/ にアクセスします。

上の方のRequest a discountと書かれているボタンを押します。

ちなみにこの横のOctcatのフラスコから泡みたいなの出てるの面白くてずっと見てられる。

この言葉も良いと思うしドンドン取り入れて欲しい。

The days of sharing source code by email and thumb drives are long gone.

2. アカウント情報を選択する

申請者の自身の属性と申し込むアカウントの属性を選択します。

申請者の属性は

  • Student
  • Teacher
  • Researcher
  • Administrator/staff
  • Other

のどれかで、また大学などのドメインでメールアドレスを所持している必要があります。 今回の場合では僕は学生なので、Studentを選択肢ました。

また、アカウントは今回はOrganizationのアカウントを対象としたいので、Organization accountを選びましたが、Individual accountを選べば個人のアカウントに適用できると思います。

選んだら、Nextで次に進みます。

3. Organizationアカウントを選ぶ

Which GitHub organization is this for?で対象にしたいOrganizationアカウントを選択します。自身のアカウントがOwner権限を持っていないと選択出来ないので注意してください。

サークルなどの場合はStudent groupを選べばOKです。それ以外の場合は適切に選択肢てください。

4. グループに関する情報を入力する

グループ名や在る場合はグループのサイトのURL、How many private repositories will you need?に必要なプライベートレポジトリの数を入力します。

ここの数字でクーポンの適用されるプランが変わるので、団体の規模などに応じて入力すると良いと思います。プランについてはここにあります。

5.申請者自身の情報を入力する

Nameは申請者自身のアカウント名で問題なさそうでした。School-issued emailの欄に大学のドメインなどで発行されているメールアドレスを入力します。この前、話を聞いたら日本を含む各国の大学のメールアドレス一覧みたいなのがあってそれと照らしあわせてチェックしているそうです。もし、アカウントに紐付けていない場合は https://github.com/settings/emails から設定してリロードすると選択できるようになります。それ以降にはには学校名や卒業予定年などを入力し、最後にGitHubの利用予定方法を書いて送信すれば完了です。

1週間程度で使えるようになります。

ちなみにKMCではGold Planを有効化してもらって50レポジトリを利用できるようにしてもらっています。KMCは今までも内部でGitwebを用いてGitレポジトリを管理したりしていたのですが、内部で使っているサーバのBoxなどをGitHubで管理するようにしたり、今後は新入生向けのプログラミング勉強会などでもGitHubのPRなどを上手く活用できればと思っています。

現在のアカウントの様子です。

京大マイコンクラブでは随時新入部員を募集しています！！！！！！！！！！！！！！！！！！

所属、年齢、性別などは不問です。KMCでGitHubプライベートレポジトリを使おう！！！！！！！！！！！！！！

詳細は http://www.kmc.gr.jp/ からどうぞ。お待ちしております。

*1:レポジトリは１つもありませんでしたが…

Google Chrome version33で chrome-inrernal://newtab が無効になった件

表題の通りの変更がGoogle Chrome version 33から加えられています。

結構反応している人が多くて、公式ブログのアップデート報告記事でもNew Tab機能を復活させてくれの声がいくつも投稿されているようでした。

僕は すぐに宮崎あおいを見れるGoogle Chromeの拡張作った。 - @soh335 memo の拡張を愛用しているのですが、デフォルトの新規タブにある機能、例えば他のデバイスで開いているページを見るとかが使いたいことがあるので"chrome-internal://newtab/を開くリンクを追加して使ってた*1から割とダメージを受けた。

正確にはChrome Ver29でデフォルトでは使えなくなってflagで有効に出来る状態になっていたのが、Chrome Ver33で完全に削除された模様。

今まではChrome拡張を用いて、chrome://newtabを上書きしている場合でも、chrome-internal://newtab/を呼び出せばデフォルトの新規タブ画面を開くことが出来たのだけど、このchrome-internal://newtab/が利用できなくなった。

各種フォーラムとかにもいくつか話題になっているようだけど、みんな結局どうしようもないから、chrome://appsとかを使って代替するということをするしかないみたいな感じだった。

あと、New Tabを任意のURLに書き換えるみたいな拡張があるから、それと組み合わせて、New Tab用のURLを設定するところにchrome://newtabを設定したり、chrome-extension://[extension-id]/を設定したりしてそれを切り替えて使うという提案も上がってた。 後者だとやりたいことが割と実現できてる感じだけど、少し面倒な気もするから、出来れば復活させて欲しいけど望みは薄そう。

Chrome Ver33はこの件もそうだけど、custom.cssが使えなくなったり*2とか割とディープにカスタマイズしていた人たちが代替の拡張機能を使ったりして回避しないといけない変更が立て続けに入っていて少しビックリした。

窓の杜には

比較的小規模な開発者向けの変更がメイン

（カスタム要素と音声合成をサポートした「Google Chrome 33」がベータ版に - 窓の杜）

って書いてあったけど、そんなに小規模じゃないよなぁと思ったり・・・

尚、GIGAZINEはこの件には触れてるけど、大した影響はないと判断した模様。

また、Google Chrome 33安定版バージョンのリリースページでは、「新しいタブページ」が変更されたことについて不満を漏らすユーザーが多く見受けられましたが、実際にGoogle Chrome 33安定版バージョンに更新して確認したところ、以前のバージョンから大きく変更された点は見受けられませんでした。

（悪意のある拡張機能を無効化する「Google Chrome 33」安定版リリース - GIGAZINE）

気にはなっているので、この連休中に関連する議論を漁れれば読んでみようかなと思っております。*3

*1:https://github.com/pastak/chrome-tumblr-tile/commit/7a3f387703c52a5f94b0c9725d9727b807a975b3

*2:参照：http://pastak.hatenablog.com/entry/2013/12/13/230117

*3:最近、少しフォーラムの議論を漁って読むのが面白くなってる