yarnで依存ライブラリのlicenseをファイル出力
yarnにはインストールしたライブラリのライセンスを出力する機能があります。
yarn licenses generate-disclaimer
このコマンドで、インストールした全てのパッケージについて、ソートされたライセンスのリストを 標準出力 に返します。
https://yarnpkg.com/lang/ja/docs/cli/licenses/
実行すると
長すぎて画面に入りませんがこんな感じ。
これを適当なファイルにリダイレクトしてあげればOKです。
yarn licenses generate-disclaimer > public\licenses.txt
licenses.txtが出力されました。
React/TypeScriptでKindle本を検索できるChrome拡張を作ったので公開しました
React/TypeScriptでKindle本を検索できるChrome拡張を作りました
React/TypeScriptでKindle本を検索できるChrome拡張を作りました。
以下の特徴があります ・一覧性が高い ・Unlimited限定での検索ができる ・検索結果に対してローカルで絞り込みできる ・先読みによりページングが速い
インストールはこちら
chrome ウェブストア
インストールすると右上に虫眼鏡アイコンが追加されるのでそれをクリックすると検索画面が起動します
使ってみた動画
https://www.youtube.com/watch?v=ak9sp9Sh-aI&feature=youtu.be
ソースコードを以下に公開しました
https://github.com/ShinjiJapan/kindleSearch
審査にあたり以下の不安点があったんですが
・アプリ名にkindleとか入ってる(まあストアを検索したらkindleって付いてるのいっぱいあるんですが)
・エロいキーワードで検索するとエロい検索結果が出てきてエロい(ツイフェミかよ)
・別タブ全画面で開く
特に問題なくすんなりと一発で通りました。
Chrome拡張じゃなくてアプリとして使う
Chrome拡張として使用中に右上のアイコンを押してその他ツール→ショートカットを作成 を選択します
ポップアップで「ウィンドウとして開く」にチェックを入れ作成を押します。
デスクトップにショートカットが作成されるのであとはショートカットからいつでもKindle検索を起動できます。
公開目的というより自分が切実に必要なので作った感じですがよければ使ってみてください
React/TypeScriptでEdge拡張を作ってみる(Create React App)
ChromiumベースのMicrosoft EdgeでChrome拡張が使えるとか聞いた気がするので
Create React Appで作ったものを拡張機能にできるのか試してみました。
ひな型作成
まずはCreate React Appでひな型を作成します。
Create React Appの詳細な説明は省略しますがFacebook公式のReactのboilerplateです。
npx create-react-app sample --typescript
これでsampleというディレクトリにReactのひな型が作成されました。
sampleディレクトリに移動して以下のコマンドを実行します
yarn start
ブラウザが起動しreactのひな型が起動します。
作成したひな型を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ディレクトリが作成され、中にビルド結果が出力されます。
ビルド結果をEdgeの拡張機能として追加
Edgeの右上のアイコンをクリックして「拡張機能」を選択し 左上のハンバーガーアイコンをクリックし 「開発者モード」をONにします。
「展開して読み込み」を選択し
先ほど作成されたbuildディレクトリを指定します
拡張機能が追加され、アドレスバーの横にアイコンが表示されました。 アイコンを押してみると
エラーになりました。
inline scriptはダメと怒られているようです。
ひとまず「すべてクリア」でエラーを消しておきましょう。
エラー修正
buildディレクトリ内のindex.htmlを見てみましょう。
この部分がダメっぽいです。
sampleディレクトリ直下に.envファイルを以下の内容で追加します。
INLINE_RUNTIME_CHUNK=false
これはインラインスクリプト部分をいい感じに外出しにしてねというやつです。
でビルド
yarn build
インラインスクリプト部分がいい感じに外出しされました。
再びEdgeを開きアドレスバー横の拡張機能アイコンを押すと
動きました。ちっちゃ!
さすがにアレなのでサイズを指定しましょう。
あまりお行儀良くないですがスタイルに直に幅と高さを記述します。
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
動きました。
簡単でしたね。
Zenfone3 Ultra買いました
iPhone5sをiOS10にしたらスリープからの復帰もままならない〇〇と化したので端末の買い替えを考えていたのですが
最近のiPhoneは大きいのが多くて片手での操作は厳しそうです。
なのでAndroidにしようかなと思い、小さければなんでもいいやぐらいの気持ちでいろいろ探していたのですがいいのがありました。
そう、Zenfone3 Ultraです。
https://www.asus.com/jp/Phone/ZenFone-3-Ultra-ZU680KL/
6.8インチという大きさがちょっと気になりますが他は概ねOKです。
何といっても大画面で見やすいのがいいですね。
ということでヨドバシAkibaに行って買ってきました。
6万円ぐらいでした。
ではさっそく開封。
第一印象「でかっ!!」
これ絶対片手で操作できないやつだ…
次にふたをめくってアクセサリーを取り出そうとしたところ、なんと箱が開きません。
「Zenfone3 Ultra 箱 開かない」等でぐぐりながら2時間ほど試行錯誤したのですが
まさかの引き出し方式でした。
ただ、大きいといってもこうして比較してみるとみんなが大好きなMADOSMAとほぼ同じ大きさです。
使ってみればそんなに大きくて苦になることも無いかもしれません。
なお、しばらく使ってみた感想としては
・大きすぎて苦になる
といったところです。
なかなか買う前には気付かないものですね。
性能的には一昔前のハイエンドぐらいらしいですが最近Android使ってなかったのでよくわかりません。
twitterとかゲームがサクサク動いてます。
あと大きいです。
本体は金属筐体でこの時期冷たくてつらいのでケース買いました。
バッテリーの持ちはいいです。少々twitterとゲームやるぐらいなら2日ぐらい充電忘れても全然大丈夫です。
あと大きいです。
あ、せっかくの大画面ですがAndroid6なのでマルチウィンドウには対応していません。
スマホで本読みたいとか外で地図見たいとかいうときはこの「ポケットにギリギリ入る大画面」は良いですね。
これからはスマホのサイズは6.8インチぐらいが主流となっていくのではないでしょうか。
HTC Viveで解像度が上がってるふうにする設定
というのが紹介されていました。
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に汗とかつかないようにするやつ
自分は↑これを買いましたがお金と心に余裕がある人は↓こういうのもいいかもしれません
Amazon.co.jp: おたふく手袋 フェイスガード フリース レスラーマスク アソート B-96 (※色指定不可): 産業・研究開発用品
別に売れても自分には1円も入らないので買わなくていいです。
水中マスク用インナーフレーム
http://item.rakuten.co.jp/find/reef-ra16/
別に売れても自分には1円も(ry
自分はレンズ無しを買って、レンズはあとでちゃんとした眼鏡屋さんで作ろうと思ったんですが「フレームが特殊なので無理」(JINS、レイバン、ゾフ)とのことでした。で、「削る前のレンズがあればフレーム無しでViveに取り付けられるのでは」と思い買えないか聞いたところJINS、レイバンはNGでしたがゾフは売ってくれました。お値段は3000円~。自分はゆがみが少ないという5000円のやつにしました。
加工前のメガネのレンズ買ってきた。これをHTC Viveに… pic.twitter.com/352bHzdX8x
— しんじ (@shinji_japan) 2016年7月1日
全然ムリ pic.twitter.com/bzWEEK2HyI
— しんじ (@shinji_japan) 2016年7月1日
5000円を無駄にするのは惜しいのでうちにあった小さいやすりで削ろうとしましたが30分で2ミリぐらいしか削れません。
で、凄そうなのを購入しました
やすり pic.twitter.com/b3O3bL8a6z
— しんじ (@shinji_japan) 2016年7月2日
レンズがサクサク削れてすごい pic.twitter.com/95kiQ6CMCm
— しんじ (@shinji_japan) 2016年7月2日
30分ぐらい削り続け…
できた pic.twitter.com/6LnSzYN3BN
— しんじ (@shinji_japan) 2016年7月2日
戦いのあと pic.twitter.com/B2dZnJwOy1
— しんじ (@shinji_japan) 2016年7月2日
完成しました。
すごい、完璧だった。もう向こうの世界ではメガネいらない
— しんじ (@shinji_japan) 2016年7月2日
はめ込んだだけですが 動いてもレンズがずれたりしません。
フレームが見えたりフレーム外がぼやけたりも無いので素晴らしいです。
あと、別に売れても自(ry
あ、結局レンズを直接Viveにはめこんだので水中マスク用インナーフレームは買ったけど使ってません
HTC Vive買いました 設置編
VR ZONEで体験してきてあまりにもすごかったので、国内販売と同時に注文して購入しました。それ用にPCも組み直しました。
ですがこのHTC Vive、売りの機能であるルームスケール(ゴーグルかぶって部屋の中を歩き回ることで仮想空間内を歩き回れる)を利用するためのハードルが結構高いです。特に日本の賃貸だと。
まずスペース。「床から天井まで何もない空間が最低2m*1.5m」必要です。
なんとかスペースを確保 pic.twitter.com/ZYX4xbyVTY
— しんじ (@shinji_japan) 2016年6月16日
これでなんとか最低条件を満たすぐらい(2.3m*1.6m)。
ソファーをギリギリまで下げることで2.3m*2.6m確保できましたがリアスピーカーより後ろにソファーが来てしまいサラウンド的にはアレな感じになりました。
次にベースステーションの設置。
壁の高い位置に2か所、ベースステーションというセンサーを設置する必要があります。
設置用のネジが付属しますが賃貸でネジ穴開けたくないので(すでにプロジェクタのスクリーン設置するのに開けてますが)ネジの代わりにカーペット用の長くて太めのピンを使って壁に固定してみましたが翌日には外れかけてました。
たまたま家にあった「無印良品の棚に付属の、先が2つに分かれたピン」を使い固定しました。
今のところ問題ないみたいです。
次回はHTC Vive周りのお役立ちアイテムを紹介したいと思います