yarnで依存ライブラリのlicenseをファイル出力

yarnにはインストールしたライブラリのライセンスを出力する機能があります。

yarn licenses generate-disclaimer  

このコマンドで、インストールした全てのパッケージについて、ソートされたライセンスのリストを 標準出力 に返します。

https://yarnpkg.com/lang/ja/docs/cli/licenses/

実行すると
f:id:Shinji_Japan:20191124101638p:plain

長すぎて画面に入りませんがこんな感じ。
f:id:Shinji_Japan:20191124101650p:plain

これを適当なファイルにリダイレクトしてあげればOKです。

yarn licenses generate-disclaimer > public\licenses.txt

f:id:Shinji_Japan:20191124101722p:plain
licenses.txtが出力されました。

React/TypeScriptでKindle本を検索できるChrome拡張を作ったので公開しました

React/TypeScriptでKindle本を検索できるChrome拡張を作りました

React/TypeScriptでKindle本を検索できるChrome拡張を作りました。

以下の特徴があります ・一覧性が高い ・Unlimited限定での検索ができる ・検索結果に対してローカルで絞り込みできる ・先読みによりページングが速い

インストールはこちら
chrome ウェブストア

インストールすると右上に虫眼鏡アイコンが追加されるのでそれをクリックすると検索画面が起動します
f:id:Shinji_Japan:20191123114257p:plain

使ってみた動画
https://www.youtube.com/watch?v=ak9sp9Sh-aI&feature=youtu.be

ソースコードを以下に公開しました
https://github.com/ShinjiJapan/kindleSearch

審査にあたり以下の不安点があったんですが
・アプリ名にkindleとか入ってる(まあストアを検索したらkindleって付いてるのいっぱいあるんですが)
・エロいキーワードで検索するとエロい検索結果が出てきてエロい(ツイフェミかよ)
・別タブ全画面で開く
特に問題なくすんなりと一発で通りました。

Chrome拡張じゃなくてアプリとして使う

Chrome拡張として使用中に右上のアイコンを押してその他ツール→ショートカットを作成 を選択します
f:id:Shinji_Japan:20191123114339p:plain

ポップアップで「ウィンドウとして開く」にチェックを入れ作成を押します。
f:id:Shinji_Japan:20191123114414p:plain

デスクトップにショートカットが作成されるのであとはショートカットからいつでもKindle検索を起動できます。

公開目的というより自分が切実に必要なので作った感じですがよければ使ってみてください

React/TypeScriptでEdge拡張を作ってみる(Create React App)

ChromiumベースのMicrosoft EdgeChrome拡張が使えるとか聞いた気がするので
Create React Appで作ったものを拡張機能にできるのか試してみました。

ひな型作成

まずはCreate React Appでひな型を作成します。
Create React Appの詳細な説明は省略しますがFacebook公式のReactのboilerplateです。

npx create-react-app sample --typescript

これでsampleというディレクトリにReactのひな型が作成されました。
f:id:Shinji_Japan:20191115223248p:plain

sampleディレクトリに移動して以下のコマンドを実行します

yarn start

ブラウザが起動しreactのひな型が起動します。
f:id:Shinji_Japan:20191115214646p:plain

作成したひな型をEdge拡張に

ではこれをEdge拡張にしてみましょう。
publicディレクトリ内のmanifest.jsonを以下のように書き換えます。

public/manifest.json

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "CRA Sample",
  "description": "CRAで作ってみた",
  "browser_action": {
    "default_icon": "logo512.png",
    "default_popup": "index.html"
  }
}

書き換えたらビルドします。

yarn build

buildディレクトリが作成され、中にビルド結果が出力されます。
f:id:Shinji_Japan:20191115220340p:plain

ビルド結果をEdgeの拡張機能として追加

Edgeの右上のアイコンをクリックして「拡張機能」を選択し f:id:Shinji_Japan:20191115215434p:plain 左上のハンバーガーアイコンをクリックし f:id:Shinji_Japan:20191115215456p:plain 「開発者モード」をONにします。 f:id:Shinji_Japan:20191115215556p:plain

「展開して読み込み」を選択し f:id:Shinji_Japan:20191115215521p:plain

先ほど作成されたbuildディレクトリを指定します f:id:Shinji_Japan:20191115220423p:plain

拡張機能が追加され、アドレスバーの横にアイコンが表示されました。 f:id:Shinji_Japan:20191115220638p:plain アイコンを押してみると f:id:Shinji_Japan:20191115220710p:plain

エラーになりました。 f:id:Shinji_Japan:20191115220945p:plain inline scriptはダメと怒られているようです。
ひとまず「すべてクリア」でエラーを消しておきましょう。

エラー修正

buildディレクトリ内のindex.htmlを見てみましょう。
この部分がダメっぽいです。 f:id:Shinji_Japan:20191115223822p:plain

sampleディレクトリ直下に.envファイルを以下の内容で追加します。

INLINE_RUNTIME_CHUNK=false

これはインラインスクリプト部分をいい感じに外出しにしてねというやつです。
でビルド

yarn build

インラインスクリプト部分がいい感じに外出しされました。
f:id:Shinji_Japan:20191115224735p:plain

再びEdgeを開きアドレスバー横の拡張機能アイコンを押すと f:id:Shinji_Japan:20191115220926p:plain

動きました。ちっちゃ!

さすがにアレなのでサイズを指定しましょう。
あまりお行儀良くないですがスタイルに直に幅と高さを記述します。
src/App.tsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";

const App: React.FC = () => {
  return (
    <div className="App" style={{ width: "500px", height: "500px" }}>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
};

export default App;

で、またビルド

yarn build

f:id:Shinji_Japan:20191115221012p:plain 動きました。

簡単でしたね。

作成した拡張機能を試しにChromeで動かしてみるとそのまま問題なく動くことが確認できます。 f:id:Shinji_Japan:20191115225106p:plain

Zenfone3 Ultra買いました

iPhone5sをiOS10にしたらスリープからの復帰もままならない〇〇と化したので端末の買い替えを考えていたのですが
最近のiPhoneは大きいのが多くて片手での操作は厳しそうです。

 

なのでAndroidにしようかなと思い、小さければなんでもいいやぐらいの気持ちでいろいろ探していたのですがいいのがありました。

そう、Zenfone3 Ultraです。

f:id:Shinji_Japan:20170218130749p:plain

https://www.asus.com/jp/Phone/ZenFone-3-Ultra-ZU680KL/


6.8インチという大きさがちょっと気になりますが他は概ねOKです。
何といっても大画面で見やすいのがいいですね。


ということでヨドバシAkibaに行って買ってきました。
6万円ぐらいでした。

ではさっそく開封。

f:id:Shinji_Japan:20170218131444j:plain

f:id:Shinji_Japan:20170218131244j:plain


第一印象「でかっ!!」
これ絶対片手で操作できないやつだ…

 

次にふたをめくってアクセサリーを取り出そうとしたところ、なんと箱が開きません。
「Zenfone3 Ultra 箱 開かない」等でぐぐりながら2時間ほど試行錯誤したのですが

f:id:Shinji_Japan:20170218130111j:plain


まさかの引き出し方式でした。

 

ただ、大きいといってもこうして比較してみるとみんなが大好きなMADOSMAとほぼ同じ大きさです。

使ってみればそんなに大きくて苦になることも無いかもしれません。

f:id:Shinji_Japan:20170218131602j:plain

なお、しばらく使ってみた感想としては
・大きすぎて苦になる
といったところです。

なかなか買う前には気付かないものですね。

 

性能的には一昔前のハイエンドぐらいらしいですが最近Android使ってなかったのでよくわかりません。
twitterとかゲームがサクサク動いてます。
あと大きいです。

 

本体は金属筐体でこの時期冷たくてつらいのでケース買いました。
バッテリーの持ちはいいです。少々twitterとゲームやるぐらいなら2日ぐらい充電忘れても全然大丈夫です。
あと大きいです。

 

あ、せっかくの大画面ですがAndroid6なのでマルチウィンドウには対応していません。

スマホで本読みたいとか外で地図見たいとかいうときはこの「ポケットにギリギリ入る大画面」は良いですね。
これからはスマホのサイズは6.8インチぐらいが主流となっていくのではないでしょうか。

HTC Viveで解像度が上がってるふうにする設定

www.roadtovr.com

というのが紹介されていました。

 

steamがインストールされてるフォルダを開きます

(標準だとC:\Program Files (x86)\Steam)

 

その中のconfigフォルダの中に‘steamvr.vrsettings’というファイルがあるのでテキストエディターで開きます。

"steamvr"の中に"renderTargetMultiplier": 2.5という記述を追加します

(JSONって何?って人もいるかもなので念のため書きますが、前の行の最後に,を付けるのを忘れずに)

例:

   "steamvr" : {
      "allowReprojection" : true,
      "background" : "#A0A0A0FF",
      "renderTargetMultiplier": 2.5
   }

renderTargetMultiplierの数値が大きいほどきれいになりますがGTX1080、Core i7 6700Kでも2.5だとゲームによってはときどき処理落ちします。

お使いの環境にあわせていい感じに調整してください。

HTC Vive お役立ちアイテム

今回はHTC Viveを使う上で買っておくと便利なものを紹介します。

 

まずは前回出てきた「無印良品の棚に付属していたピン」、先が二つに分かれていて少々重い物でもネジを使うことなくしっかり固定できます。

ピン単体での購入も可能みたいです。

【パーツ】壁に付けられる家具専用ピン(1本・ピンのみ) 壁に付けられる家具専用ピン(1本) | 無印良品ネットストア

別に売れても自分には1円も入らないので買わなくていいです。

 

次にHTC Viveに汗とかつかないようにするやつ

https://images-na.ssl-images-amazon.com/images/I/71Xv0Rf7gdL._SL1500_.jpg

Amazon CAPTCHA

自分は↑これを買いましたがお金と心に余裕がある人は↓こういうのもいいかもしれません

https://images-na.ssl-images-amazon.com/images/I/41Qcxxqub%2BL.jpg

Amazon.co.jp: おたふく手袋 フェイスガード フリース レスラーマスク アソート B-96 (※色指定不可): 産業・研究開発用品

別に売れても自分には1円も入らないので買わなくていいです。

 

水中マスク用インナーフレーム

http://image.rakuten.co.jp/find/cabinet/reeftourer/2016/ra0508xra0507-1.jpg

http://item.rakuten.co.jp/find/reef-ra16/

別に売れても自分には1円も(ry

 

自分はレンズ無しを買って、レンズはあとでちゃんとした眼鏡屋さんで作ろうと思ったんですが「フレームが特殊なので無理」(JINSレイバン、ゾフ)とのことでした。で、「削る前のレンズがあればフレーム無しでViveに取り付けられるのでは」と思い買えないか聞いたところJINSレイバンはNGでしたがゾフは売ってくれました。お値段は3000円~。自分はゆがみが少ないという5000円のやつにしました。

 

 

 5000円を無駄にするのは惜しいのでうちにあった小さいやすりで削ろうとしましたが30分で2ミリぐらいしか削れません。

で、凄そうなのを購入しました

Amazon CAPTCHA

 

 

30分ぐらい削り続け…

 完成しました。

はめ込んだだけですが 動いてもレンズがずれたりしません。

フレームが見えたりフレーム外がぼやけたりも無いので素晴らしいです。

 

 あと、別に売れても自(ry

 

あ、結局レンズを直接Viveにはめこんだので水中マスク用インナーフレームは買ったけど使ってません

HTC Vive買いました 設置編

VR ZONEで体験してきてあまりにもすごかったので、国内販売と同時に注文して購入しました。それ用にPCも組み直しました。

 

ですがこのHTC Vive、売りの機能であるルームスケール(ゴーグルかぶって部屋の中を歩き回ることで仮想空間内を歩き回れる)を利用するためのハードルが結構高いです。特に日本の賃貸だと。

 

まずスペース。「床から天井まで何もない空間が最低2m*1.5m」必要です。

これでなんとか最低条件を満たすぐらい(2.3m*1.6m)。

ソファーをギリギリまで下げることで2.3m*2.6m確保できましたがリアスピーカーより後ろにソファーが来てしまいサラウンド的にはアレな感じになりました。

 

次にベースステーションの設置。
壁の高い位置に2か所、ベースステーションというセンサーを設置する必要があります。
設置用のネジが付属しますが賃貸でネジ穴開けたくないので(すでにプロジェクタのスクリーン設置するのに開けてますが)ネジの代わりにカーペット用の長くて太めのピンを使って壁に固定してみましたが翌日には外れかけてました。

たまたま家にあった「無印良品の棚に付属の、先が2つに分かれたピン」を使い固定しました。

f:id:Shinji_Japan:20160702133250j:plain


今のところ問題ないみたいです。

 

次回はHTC Vive周りのお役立ちアイテムを紹介したいと思います