LivePhotosKitReactを作成しました

先日Appleから LivePhotos をWebでも再生できるようにした、LivePhotosKit JS が公開されたので、そのwrapper的なReactコンポーネントを作成しました

github.com

www.npmjs.com

ターミナルで以下を実行すれば使うことができます

$ npm install --save @henteko/livephotskit-react

使い方

基本的にはLivePhotosKit JSの公式ドキュメントを参考にしてもらえたら、シンプルなwrapperなので問題はないと思います
https://developer.apple.com/reference/livephotoskitjs

こんな感じで簡単に使えます

import React, { Component } from 'react'
import LivePhotosKitReact from '@henteko/livephotoskit-react';

class App extends Component {
  render () {
    return (
      <div className="App">
        <LivePhotosKitReact
          photoSrc='./test.JPG'
          videoSrc='./test.mov'
        >
        </LivePhotosKitReact>
      </div>
    );
  }
}

おわりに

LivePhotosKit JS結構楽しいですが、再生方法がデフォルトだとマウスオーバーだけなのが結構辛い
LivePhotosKit JS側に play() メソッドがあるので、それを使えば再生ボタンとかも置けなくはないかも
次はこれを使って何か作ってみたいです

はてな記法の中のhttp記法が好きだ

はてな記法の中のhttp記法が好きです
http記法とは - はてなキーワード
1年前くらいにmarkdownで書けるリアルタイムプレビュー出来るメモ帳的なのを作ってた時に、このhttp記法をmarkdownの中に入れ混んでた
そこときは外部に公開するつもりなかったので雑な感じで作った
今回も雑な感じで作ってみた
javascript難しい…むりぽ…

動くデモ

github

henteko/hatena-httpjs · GitHub

こんなの

[url:title]とか[url:image]とか[url:barcode]って書くとなんかそれっぽいのになる
一番めんどくさかったのが自動でurlのタイトルを取ってくるところだった
ここを使わせてもらっている
タイトル取得API for JSONP | 駄文と書評

1年前は、自分でサーバー側にAPI作ってそれらしいのを作ってた
でも今回は全てjavascriptのみでやりたかったから使わせてもらった
ありがたい

さいごに

http記法、色々種類あるし追加していきたい

選択中の文字をgoogle翻訳に投げるchrome拡張作った

作ったよ！

henteko/selectedGoogleTranslateChromeExtension · GitHub
いつも英語読めなくて辛いからgoogle翻訳を使ってるけど、いちいちgoogle検索でgoogle翻訳ってぐぐるの疲れた
ブックマークとかすればいいんだけど、なんかずっとしてなかった

要望として、文字を選択したらすぐgoogle翻訳にかけたかった
だから、選択したらgoogle翻訳に飛ばす拡張機能作ったらめっちゃ便利だった

こんなん

文字を選択する

Ctr-h押す(翻訳のHだよ☆)
翻訳された

さいごに

この拡張、webサイトでしか動作しない
もっと詳しく言うとbodyタグが無いと動作しない
英語論文をpdfでchromeで読んでる時にもgoogle翻訳に投げたい
どうやるのかわからない

追記

pdfでもbodyタグあった
pdfで選択中の文字が上手く取れない

peer.jsで複数人チャットをする

はじめに

peer.jsで複数人でのチャットって出来るのかなと思い公式のドキュメント見てたら普通にpeer.connectionsってのがあったから試してみた

やり方

普通に1対1のチャットを実装するやり方とほぼ同じである
違うのが、データを受信するDataConnectionのon('data')にてpeer.connectionsを使い、受信したmessageを他のpeerに送るということをする
具体的にはこんな感じ

conn.on('data', function(data) {
  var id = data.ids[0];
  var ids = data.ids;
  var message = data.message;
  $.each(peer.connections, function(_id, _conn) {
    if($.inArray(_id, ids) == -1) {
      ids.push(myId);
      _conn[0].send({
        message: message,
        ids: ids
      });
    }
  });
});

ここで注意すべきは、送信データとして既に送られたidを記録しながら送っていくという所だ
messageを受信したpeerは自身のidをidsに入れて、まだidsの中にidが入っていないpeerに送信をする
バケツリレーみたいにどんどん運んでいくイメージだと思う

まとめ

詳しくは今回作ったサンプルを見てもらいたい
peer.js使ったら簡単に複数人対応のチャット作れるし便利
クライアント側だけの実装で作れるのすごい簡単

あと、なんとなくすごいpeer.jsのドキュメントが見やすい気がする