IT

#02 create-react-appについて

ということで久々にReact.jsを触っているわけだけど、create-react-appが使いやすくなったように感じる。
初期からあるApp Componentがいつの間にかFunctional Componentになっていたりと、そっちに寄せてるのも良いなぁと。

ほとんど

yarn start

だけで良いというのは、とりあえず始めるときにすごく便利だけど、やっぱしボイラープレート的なものは作っておいたほうがいいかも。
reduxもreact-router-domも無いので・・・。

material-ui

やっぱし良く出来てるなぁと思いつつ、Style部分がよくわかってない。
今回のBlogシリーズはひたすらよくわからないところとかを垂れ流して、どこかで見直す・・・のか?って感じになりそう。

Github Actions

これもちょっと触ってみた。
Firebaseと相性良すぎて困る。今後もうこれでいいんじゃないですかね・・・。

#01 久々にReact.js

この間のUdemyのセールで久々に動画を買った。
フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 | Udemy

業務で使う機会がないから結構すっぽり忘れててなかなかつらい。
というか、Hook周りあまり追えてないのでその辺は書きながらやっていこうと思う。

とりあえずcreate-react-appの使い勝手が上がってる気がしてよい。

Vue.js Nuxt.js

この間、業務でVue、Nuxtを使う機会があったけど、その前にReact.jsをやってた関係もあって結構混乱した。
ちょっとやった感じだと個人的にはReact.jsのほうが書きやすい。

macOS Catalinaでlsyncdが動かなくなった話

1週間くらいハマっていたりっくんですこんにちわ。

lsyncdとmacOS Catalinaについて

Catalinaに更新してから、lsyncdのファイル変更検知が効かなくなっていた。
権限周りで色々初期化されたからそのへんかなぁと思って、追加してみたりしたけどだめだったから切れそうになってたんだけど、これっぽい。

macOS Catalina の読み取り専用のシステムボリュームについて - Apple サポート
macOS Catalina で NFS が動かない問題に対応する - Qiita

つまり、lsyncd.confとかにはこういう書き方をしないといけない。

sync{
  default.rsync,
  delete = false,
  source = "/System/Volumes/Data/Users/{username}/{sync_dir},
  target = "centos@192.168.xxx.xxx:/home/centos/share/web",
  exclude = {
    ".DS_Store",
    "node_modules/*",
    ".git/*",
  },
  rsync = {
    binary = "/usr/local/bin/rsync",
    archive = true,
    compress = true,
    group = false,
    owner = false,
    update = true,
    sparse = false,
    _extra = {
        "--omit-dir-times",
        "--omit-link-times",
    },
  }
}

絶対他にもハマってる人いると思う。
Docker for Macのファイルマウントが遅い問題で、rsync系使ってる人が自動更新でlsyncd使ってるとか・・・。

Firebaseがすげー便利でびっくりした

なるべくBlogに記事を書いていきたいと言ったので積極的に「良い!」と思ったことは記事にしたいりっくんですこんにちは。

とりあえず、進捗はこんな感じです。

Firebaseいいかもしれない

先日の記事で、Firebaseを使おうと思う、でもここまで手を広げていくと大変かなぁとか言ってましたが、
React.js(やっと)使ってみてる | SteadyWorX

firebase
バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。
firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと – Qiita
でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

実際に触ってみたら結構簡単で、且つやりたいことがそのままできそうなのでこのまま採用しようと思いました。という話です。

Realtime Database

FirebaseのDB機能、NoSQL系だってことしかしらなくて、よく見たらRealtimeって入ってるんですね。
で、そこから色々見ていったら、やっぱし更新を検知することができるっぽいんですよ(というか、そういう使い方がメインなのかな?)

ということで、現在のリロール状況を保持しつつ、更新があったらstateを変更する感じのコードを買いてみました。
実際の動きがこちら

これはいいですね、これならチームごとに更新をリアルタイムに取ってこれます。

後はこの辺に所持チャンプ情報周りもすべて格納していけば結構いい感じになるんじゃないかなぁというのが今のところの感覚です。
楽しくなってきた!!!!

React.js(やっと)使ってみてる

ちょっと体重がやばい感じになっていてゆるくダイエット中のりっくんですこんにちは。
Blogの更新、いよいよちゃんとやっていきたいので最近やってることでも書いておきます。

React.js触ってる

  • 作りたい物
  • 作る時間
  • モチベーション

全部がないとなかなか新しい技術がさわれません。
すげー広くの分野でHello Worldレベルは触ってるんですけど、なかなか理解できないですね。

2周遅れくらいではあるものの、Reactは触りたかった技術の一つなのでこれを気にちょっと使ってみています。

こんなの作ってる


League of Lgendsっていう神ゲーがあるんですけど、いま一緒にゲームをしている人はARAM(All Random All Mid)をよくやるメンバーで、5人を超えると8人、ないしは10人頑張って集めてカスタムゲームを開催しています。
ですが、カスタムゲームのARAMではリロールが出来なくて、しょうがなくドラフトピックのARAM(Randomではない、ハウリングアビスマップのドラフトピックというだけ)を行っていました。
※リロール = 完全にランダムだとツライので、最高2回、自分のチャンプをまた振り直すことができる。

それを雑にWebアプリ化すればなんとかならんかなぁと思ってふらーっと休日、夜間にポチポチ作っているという状況です。

わからんことだらけでつまりまくって入るんですが、これが結構面白いですね。
jQueryで作ったらまぁ形はできるんだろうけど、データがごっちゃごっちゃになるので今回はReact.jsを使っておいてよかったような気がします。

eslint

後ついでに、eslintも入れてAirbnb JavaScript Style Guideも適用させてます。
これはTwitterに書いたんですが、

でもこの大リーグボール養成ギブス的な感じ、好きだわ。出来上がったコードも読みやすいし。

です

機能が足りない・・・

で、まぁとりあえずリロールできるところまで来たんですが(くっそ見にくいけど、名前の横にREROLLボタンが有る)話していて

  • やっぱし自分が持ってないキャラが出て来るのって微妙だよね
    ユーザー管理と所持チャンプ登録したい
  • この状況を共有できないとめんどいよね
    これは、URLで共有できるようにしたい、パラメーターに全部突っ込んで的な
  • デザイン、案はあるけどちょっとまともにしないと

等々、色々課題があります。

firebase

バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。

firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと - Qiita

でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

何にしても楽しい

実はいろいろあってこんなことしてる場合じゃないんですが、割りと楽しいです。
ぱぱっと作ってやることやらないと。

Franzが良い

どうもこんにちは、会社にWQHDの27インチモニターを持ち込んでいるのですが、会社を4Kに、家にそのモニターを戻したくてたまりませんりっくんですこんにちは。
FullHDはツライ体になってしまった・・・。

とまぁそれは関係なくもないんですが、Slackのアプリが重いなぁとずーっと思っていて、Twitterを眺めていたら「Franz」というアプリが良いと聞いて入れてみました。

Franz

Franz – a free messaging app for Slack, Facebook Messenger, WhatsApp, Telegram and more

まぁ何かといえば、いろんなアプリを一つのウインドウで管理、タブで表示が切り替えできて、中身はWebView的なものが表示されるってだけなんですが。
それでSlackの幾つかのチャンネルと、Discord、Google Play Music何かを突っ込んで一つのウインドウで完結させてます。便利です。

詳細は適当にぐぐって見てみてください。

で、Google Play Musicなんですがこれ、デフォルトでは利用可能なサービスに入っていません。
それらはまだBetaっぽいのですがプラグインで対応できるようで、有志がGithubなんかにコードを上げてくれています。

meetfranz/plugins: Franz Plugin Repository

ここからGoogle Play Musicのプラグインを落としましたけど、普通に便利です。

自作プラグイン

中身をみてみたらすごい簡単なので、とりあえず今日ちらっと雨が降った的なTweetを見たので、アメッシュのプラグインを作ってみました。
こちらのレポジトリからZipでDLして、Pluginフォルダに突っ込んでください。多分動きます。

Remicck/ameshu_franz

これ、自作のIRKIT操作アプリなんかを突っ込んでおくのも良いかもしれないなぁ・・・。

※でも、4Kモニターになったらいらなくなるかもなぁ・・・w

株式会社オプトが作成したクイズアプリを試した話

Hello 2017!! 今年もよろしくお願いしますという事で、年末は掃除、年始1日から仕事の対応でSQLを流しておりましたりっくんですこんにちは。

さて、その年始のお話です。

はじめに

今回は株式会社オプトが作成したクイズアプリを、実際に元旦に試したことを書いていきます。
主に使用感と、改善するなら~という点、躓いたところを書いていく予定です。

感想ですが、非常に良くできていて、親族全員で楽しめました。
このようなアプリケーションをMITで公開してくださったオプト様に感謝し、記事として残すことにします。

アプリケーションについて

会社の納会用にクイズアプリを作りました(React / TypeScript) - Opt Technologies Magazine
会社の納会用にクイズアプリを作りました(Akka HTTP) - Opt Technologies Magazine
opt-tech/noukai_quiz_app: オプトの納会でのクイズコンテンツのために作成したアプリを公開したものです。

これです。
詳しくはBlogとGithubのReadmeを参照してください。

react-akka-aws

環境

アプリケーションがWebSocketを使ったインタラクティブなクイズアプリだったので、自分のさくらVPSでは非力且つ、現環境を壊したくないなぁと思いAWSを利用しました。
t2.microのインスタンスを立ち上げ、Java8、Nginx、Node.js、その他もろもろのインストールを行って簡単に構築しました。

はじめ、Apache2.4でリバースプロキシを噛ませようとしましたがうまくいかず、フロントはNginxにしてあります。
また、キャッシュにより問題Jsonが更新されないことが多々あったため、キャッシュもOffにしました。

この辺は僕の知識不足に起因すると思いますので、(そもそも、Portを開けておけば、Javaの実行プロセスに直接アクセスできるんじゃないのか!!って思ってました。MacのローカルでテストしているときはLocalhost(HTTPサーバー無し)で動いていたので)うまくできる方はそちらでも良いと思います。

カスタマイズする部分について

こちらで変更する部分は

  • 問題用のJsonファイルの編集
  • ログイン時に”部署”を入力するようになっていたので、今回の親族でのクイズ大会という名目上、「○○ファミリー」という項目に変更してあります。
  • 「にゃーん」という音が出るボタンは、我が家用に「たらったらったー」という、まぁ身内ネタ用音声ファイルに変更してあります。
    ※この機能は最終的におまけで計測され、ランキング最後に発表されます。
  • 50位から表示されるが、デフォルトの名前が「開発 uryyyyyyy」となっていたので、点数と合わせて差し障りのない値に変更。(dev-server.es6)

上記の4点ほどです。

使用感

下準備

もともとは新しい家族が増えるにあたって、親族のことを少しで知ってほしいということで企画しました。
その為、問題は「自分・家族に関すること」に限定しておきました。
※半分くらいはドジ話とかだったような気がしますw

問題選定は、いろんなものを集めたかったので親族に頼み、はGoogleフォームに投稿できるようにしておきました。最終的に31問も集まってしまって、1時間弱はやっていたような気がします。
この辺は、せめて15問くらいに制限したほうが良かったですね。ただ、Googleフォームを使う選択は正解でした。

実際にやったときの事

うっかり写真を撮り忘れてしまったのですが(出題でテンパってて)、人数的には18人が接続し、大盛況でした!

AWSの無料枠でやろうと思っていたので、t2.micro(vCPU 1, Mem 1GB)で構築していたのですが、18人繋いだ時点でサーバーがハングしどうもSSHの画面も反応がない事態に・・・。
この点はAWSで良かったと思いましたね・・・。一度落として、すぐにm4.xlarge(vCPU4, Mem 16GB)に引き上げ、オーバースペックだなぁと思いつつもまぁ安定稼働するほうが優先、ということで最後まで動かすことができました。

うちの環境だったらこの方が良かった!ってやつ。

クイズに正解すると、画面が虹色にグラデーションします。
おそらくこれは、企業の納会用なので正解した人がわかりやすくなるような配慮だったと思うのですが、我が家の用途では、「選択肢と、回答、正解と、当たったかどうか」を表示してあげたほうが良かったと思います。

もしくは、ちゃんとプロジェクターを用意して、問題、回答用にスライドを作り、同時にめくってあげるとかでしょうか。

また、もし家族やコミュニティで利用する場合は「にゃーん」を絶対に変えたほうが良いです。
今回、我が家のテーマ(とも言えるような、謎の音楽 たらったらったー)の音源を利用しましたが、なかなかカオスな感じになります。

理想は2秒ほどのものが良いので、誰かに吹き込んでもらうのが良いかな。

終わりに

とてもとても、楽しめました!
特に実際やった感覚では問題は「経験した中で、やってないものを一つ選べ」が、今回うちのコンセプトとマッチしていました。(これなら3つは正解で、いろいろなことを伝えることができる)

また、AWSを使えばかなり小さい金額で行えるのも良いですね。
勉強がてらに触るのもありだと思いました。

再三になりますが、株式会社オプト様、ありがとうございました。
時間があれば上記した、Forkして結果画面のカスタマイズはやってみたいです(来年の課題として親族に言われてはいます・・・)

SlackからDiscordに移行した

引っ越してやっとこさ生活が落ち着いてきた感が出てきておりますりっくんですこんにちは。
ついにソファーも購入しまして、かなりゆったり生活できるようになりました。Chrome Castも勝ったので、ソファーでまったりTwitch、Youtubeを見る生活が確立しつつあります。

Discord

ずーーーっと、Slackいいよ!って言い続けていたわけですが、ゲームをするメンバーでVCを行うならばDiscordというメッセンジャーがかなり良さそうなので紹介です。

Discord – Free Voice and Text Chat for Gamers
discrod

すごく簡単に説明すると、VCがついたSlackクローンです。ほとんどSlackです。
チャットとかファイルを送る部分、あとモバイルアプリの出来等はSlackレベルですごく使いやすいです。

そこに、ボイスチャットの機能が付いているのでゲーマーとしてはすごくありがたい。
チャットの延長でVCがあるのは誰もが感じていることだと思うのですが、VCだけ別のツールを使うとチャットが分散される問題とかがありました。(ずっとSkypeの人たちはないかもしれませんが、私がMumbleという糞チャットなツールを使っていたので・・・)

discord_view
画面はこんな感じです。Slackでしょ。

VC部分はWebRTCを使っているようですが、ほとんど遅延や音質の悪さは感じません。重さも特に気にならないかな?
今時のVCツールにはある、ユーザごとの音量調整や、チャンネル移動機能、権限の管理ができるのでほとんどのVCツールから移行可能じゃないでしょうか。

また、SlackでいうIntegrationの機能もあります。当然APIもあります。
ユーザが作ったBotを、自分のチームに突っ込むことができるので、うちのチームではRSSを管理してくれるBotを入れて、LoL関係のブログ通知をそのBotにさせています。
Slackの時は無料プランだとIntegrationの数に制限がありましたが、Discordはどうなんでしょうね。

LoL eSportsのプロ観戦者になる為のSlack Bot作った | SteadyWorX

RSSの通知は、Slackの時はGoogle App ScriptとSpreadsheetsを使って投稿させていましたが、Botを使うことでURLの追加は
!rss add <url> の形式でよく、かなり楽です。他の人も簡単に追加できます。

他にも探すといろいろなBotがあって、
GitHub – Gravebot/Gravebot: An awesome bot for Discord
これなんか、サーバー、ユーザ名を指定するとその人の今のマッチゲーム情報を引っ張ってくれたり、現在のおすすめBanとかを教えてくれます。まぁ日本鯖まだ対応してないですけど。誰かPRしてあげt・・・・!

そんなわけで、SlackからDiscordに移行しました。
まだまだVCが必要ないチームはSlackを使っていますが、こうやって代替案が出てくるのはいいですね。丸パクリはどうかとも思いますけど。

ちょっとAPIとか調べて、遊んでみたい感じでした。

LoL eSportsのプロ観戦者になる為のSlack Bot作った

ちょっと前にSlackの記事をシェアしたら、元IRC勢の人たちが少し反応してくれてうれしかったりっくんですこんにちは。
でもやっぱり英語ってところにハードルがあるみたいですが、まぁ使ってる分には英語を意識することは無いですし、何よりスマホからも見やすいので皆様におすすめしてます。

そんなわけで、IRC、Twitterで連絡を取り合っていて、MumbleでVCしているメンバーにSlackを使ってもらうことになりました。
何もLoLだけをやるメンバーではないですが、LCS観戦は結構一緒にするため、その通知をしてくれるBotを作りました。

プロ観戦者の鑑

こういうBotです。

プロ観戦者の鑑

Montecristo大先生に発言してもらってます。
#lol-prokansensyaというひどい名前のチャンネルに垂れ流しています。なんだこれ
※この画像は修正前で、NAの遅い時間帯は表示されていませんね(´・ω・`)

カレンダーの配信元はGame4Broke様のLoL eSports Calendarです。
はじめはすべて流していたのですが、今はLCS NA、EUとLJLだけを流すようにしています。多すぎて・・・。

実装方法

Google SpreadsheetとそのGoogle App Scriptを使って、毎朝10時に投稿してくれるように設定しています。
以下のサイトを参考に、ほぼコピペで作りました。
【祝】麻生久美子が秘書になりました【ただしSlackのBot】 | ノウハウ | 株式会社カラメルカラム|Caramel Column Inc.

タイマーで実行時間を指定できるので、便利ですね。
時差的にどうしても翌日の予定まで拾ってこなくてはいけないため、その辺だけ少しカスタマイズしてます。

こんな感じで他にもBotとか活用したい。replay.gg使って、リプレイデータへのアクセスとか。
すでに運用してるのはLoLのBlog記事のRSSを取得してつぶやいてくれるチャンネルがあります。これも情報収集的には良くて、大量のフィードにならないのでRSSリーダーはいらないかなぁって感じです。

エンジニア向けっぽいSlackですが、普通に使ってもかなり便利なので、是非皆さんつかってみてください。

IRKitを買って家に帰った時の満足度を上げた

暑い毎日に辟易としておりますりっくんですこんにちは。
冷夏とはなんだったのか。ダメですね、暑すぎます。
家に帰る時間は結構遅いのですが、それでも帰るとむわっとするので、即クーラーをつける日々訳です。

誰もが「帰ってきたら涼しい部屋であってほしい!」と、「けど、つけっぱは電気代に影響してしまう…」と、感じているはず。私もそうです!!
※諸説ある部分については言及しません。

そこで!!!
IRKitという【外部からアクセス可能な多機能リモコン】を購入して設置しました!

IRKit

IRKitとは

簡単に説明すると、スマホから家の家電(赤外線を使うもの)を操作できるようになるデバイスですね。詳しくは以下のリンク先を見てください。

Androidでも簡単すぎ!クラウドリモコンのIRKitで自宅の家電を遠隔操作 – 週アスPLUS
外から家のエアコンをつけたいので『IRKit』とAndroidでがんばってみた|ONLINE デジモノステーション

具体的に言うと、スマホアプリから家のクーラーをつける、みたいなことができます。
ついでに、プログラムからもアクセスしやすいような設計になっていて、IRKitが持っている認証周りをパスして、jsonで赤外線のデータを投げてあげるだけなので、比較的簡単にコンソールや自作のツールから家の家電を操作できるようになります。

去年くらいに盛り上がり、すでにGemなども公開されていて使いやすい環境は整っています。Android,iPhoneのアプリとあるのでそれも良いですね。

使ってみた感想

まずセットアップですが、
今朝届き、AndroidからLTE越しに家電を操作できるようになるまでに15分ほどでした。コンソールからもやってみましたが全部で30分もあれば利用可能になった簡単さは素晴らしいです。

買った日も外に出ていたわけですが、家につく30分程前にクーラーをつけて帰ってくるとちゃんと部屋が冷えており、「ああ、これがIoTか、未来か」と感動しておりました。

買いか?

価格はAmazonで7700円。
個人的には外からクーラーをつけるためだけにこれを買っても良いとは感じています。

が、真価はプログラマブルな部分だと感じています。何かに連動して動作させるみたいな。
IFTTTなんかと連携させれば何かできるかも…???

とは言え、操作するものは赤外線経由なのでエアコン、テレビ、照明くらいとなってしまい、このあと何するかなぁと考えてます。
個別に判断が必要でしょう。

IoTについて

IoT、身近になったんだなぁと実感してますが、連携するものあまりないなぁとも思ってます。
おそらく、このガジェット自体が赤外線を媒体にしているからでしょう。

本来は物のインターネットと言うように、それぞれがネットと接続することで個別のアドレスを、どこからでも持ち操作できるように、と言うものなので、プッシュしかできない赤外線ではまだまだでしょう。

今後、IoTの共通規格とかが出てきて、いろんなものと連携できるようになれば面白くなるのかなぁと期待したいですね。

以上、ざっくり使用感です。

余談ですが、今回の記事、殆どの部分をDraftというAndroid製Markdownエディターをつかって書きました。
Markdownの記号がすぐに打てるので、かなりストレスフリーに記事が書けたので空き時間にメモしたい人におすすめします。

またIRKitをつかって何か作ったら書きますかね!
おそらく、Erectronで個人用ツール作ります。