すっかりこのBlogも放置しちゃってる。
タイトルの件だけど、かれこれ10年くらい稼働させているこのWordPressも実際にはWordPressである必要が全く無い状況だったりする。
具体的には、プラグインとかほとんど使ってないしけしてもいい感じのものが多い。
さらに言えば、Kusanagiで建ててるんだけど、Docker環境にしているのもあってちょっとメモリ使いすぎで思ったよりも（サーバースペックに依存してるとは思うんだけど）早くならないなぁという課題感がある。
個人的にNext.jsを最近触っていることもあり、Blog自体を静的サイトとして再構築するのが一番良さそうだし、モダンな技術の勉強になりそうなのでモチベーションとしては高め。
その時の課題としては、現状のWordPressの記事データとか画像データとかを、プロジェクトに移植するのがめんどくさいなぁというのが・・・。
とりあえず、まずはそのへんの調査を行おうかなぁと。
Next.jsでBlog作るとかいっぱいあると思うし、後は画像とかも自動で小さくしたのを配信できるのかな？ちょっと調査が必要そう
今日はこんなとこ。
ということで久々にReact.jsを触っているわけだけど、create-react-appが使いやすくなったように感じる。
初期からあるApp Componentがいつの間にかFunctional Componentになっていたりと、そっちに寄せてるのも良いなぁと。
ほとんど
yarn start
だけで良いというのは、とりあえず始めるときにすごく便利だけど、やっぱしボイラープレート的なものは作っておいたほうがいいかも。
reduxもreact-router-domも無いので・・・。
やっぱし良く出来てるなぁと思いつつ、Style部分がよくわかってない。
今回のBlogシリーズはひたすらよくわからないところとかを垂れ流して、どこかで見直す・・・のか？って感じになりそう。
これもちょっと触ってみた。
Firebaseと相性良すぎて困る。今後もうこれでいいんじゃないですかね・・・。
この間のUdemyのセールで久々に動画を買った。
フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 | Udemy
業務で使う機会がないから結構すっぽり忘れててなかなかつらい。
というか、Hook周りあまり追えてないのでその辺は書きながらやっていこうと思う。
とりあえずcreate-react-appの使い勝手が上がってる気がしてよい。
この間、業務でVue、Nuxtを使う機会があったけど、その前にReact.jsをやってた関係もあって結構混乱した。
ちょっとやった感じだと個人的にはReact.jsのほうが書きやすい。
なるべくBlogに記事を書いていきたいと言ったので積極的に「良い！」と思ったことは記事にしたいりっくんですこんにちは。
とりあえず、進捗はこんな感じです。
先日の記事で、Firebaseを使おうと思う、でもここまで手を広げていくと大変かなぁとか言ってましたが、
React.js(やっと)使ってみてる | SteadyWorX
firebase
バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか！って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。
firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと – Qiita
でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。
実際に触ってみたら結構簡単で、且つやりたいことがそのままできそうなのでこのまま採用しようと思いました。という話です。
FirebaseのDB機能、NoSQL系だってことしかしらなくて、よく見たらRealtimeって入ってるんですね。
で、そこから色々見ていったら、やっぱし更新を検知することができるっぽいんですよ（というか、そういう使い方がメインなのかな？）
ということで、現在のリロール状況を保持しつつ、更新があったらstateを変更する感じのコードを買いてみました。
実際の動きがこちら
これはいいですね、これならチームごとに更新をリアルタイムに取ってこれます。
後はこの辺に所持チャンプ情報周りもすべて格納していけば結構いい感じになるんじゃないかなぁというのが今のところの感覚です。
楽しくなってきた！！！！
ちょっと体重がやばい感じになっていてゆるくダイエット中のりっくんですこんにちは。
Blogの更新、いよいよちゃんとやっていきたいので最近やってることでも書いておきます。
全部がないとなかなか新しい技術がさわれません。
すげー広くの分野でHello Worldレベルは触ってるんですけど、なかなか理解できないですね。
2周遅れくらいではあるものの、Reactは触りたかった技術の一つなのでこれを気にちょっと使ってみています。
League of Lgendsっていう神ゲーがあるんですけど、いま一緒にゲームをしている人はARAM（All Random All Mid）をよくやるメンバーで、5人を超えると8人、ないしは10人頑張って集めてカスタムゲームを開催しています。
ですが、カスタムゲームのARAMではリロールが出来なくて、しょうがなくドラフトピックのARAM（Randomではない、ハウリングアビスマップのドラフトピックというだけ）を行っていました。
※リロール ＝ 完全にランダムだとツライので、最高2回、自分のチャンプをまた振り直すことができる。
それを雑にWebアプリ化すればなんとかならんかなぁと思ってふらーっと休日、夜間にポチポチ作っているという状況です。
わからんことだらけでつまりまくって入るんですが、これが結構面白いですね。
jQueryで作ったらまぁ形はできるんだろうけど、データがごっちゃごっちゃになるので今回はReact.jsを使っておいてよかったような気がします。
後ついでに、eslintも入れてAirbnb JavaScript Style Guideも適用させてます。
これはTwitterに書いたんですが、
でもこの大リーグボール養成ギブス的な感じ、好きだわ。出来上がったコードも読みやすいし。
です
で、まぁとりあえずリロールできるところまで来たんですが（くっそ見にくいけど、名前の横にREROLLボタンが有る）話していて
等々、色々課題があります。
バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか！って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。
firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと - Qiita
でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。
実はいろいろあってこんなことしてる場合じゃないんですが、割りと楽しいです。
ぱぱっと作ってやることやらないと。
Hello 2017!! 今年もよろしくお願いしますという事で、年末は掃除、年始1日から仕事の対応でSQLを流しておりましたりっくんですこんにちは。
さて、その年始のお話です。
今回は株式会社オプトが作成したクイズアプリを、実際に元旦に試したことを書いていきます。
主に使用感と、改善するなら～という点、躓いたところを書いていく予定です。
感想ですが、非常に良くできていて、親族全員で楽しめました。
このようなアプリケーションをMITで公開してくださったオプト様に感謝し、記事として残すことにします。
会社の納会用にクイズアプリを作りました（React / TypeScript） - Opt Technologies Magazine
会社の納会用にクイズアプリを作りました（Akka HTTP） - Opt Technologies Magazine
opt-tech/noukai_quiz_app: オプトの納会でのクイズコンテンツのために作成したアプリを公開したものです。
これです。
詳しくはBlogとGithubのReadmeを参照してください。
アプリケーションがWebSocketを使ったインタラクティブなクイズアプリだったので、自分のさくらVPSでは非力且つ、現環境を壊したくないなぁと思いAWSを利用しました。
t2.microのインスタンスを立ち上げ、Java8、Nginx、Node.js、その他もろもろのインストールを行って簡単に構築しました。
はじめ、Apache2.4でリバースプロキシを噛ませようとしましたがうまくいかず、フロントはNginxにしてあります。
また、キャッシュにより問題Jsonが更新されないことが多々あったため、キャッシュもOffにしました。
この辺は僕の知識不足に起因すると思いますので、（そもそも、Portを開けておけば、Javaの実行プロセスに直接アクセスできるんじゃないのか！！って思ってました。MacのローカルでテストしているときはLocalhost（HTTPサーバー無し）で動いていたので）うまくできる方はそちらでも良いと思います。
こちらで変更する部分は
上記の4点ほどです。
もともとは新しい家族が増えるにあたって、親族のことを少しで知ってほしいということで企画しました。
その為、問題は「自分・家族に関すること」に限定しておきました。
※半分くらいはドジ話とかだったような気がしますｗ
問題選定は、いろんなものを集めたかったので親族に頼み、は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して結果画面のカスタマイズはやってみたいです（来年の課題として親族に言われてはいます・・・）
引っ越してやっとこさ生活が落ち着いてきた感が出てきておりますりっくんですこんにちは。
ついにソファーも購入しまして、かなりゆったり生活できるようになりました。Chrome Castも勝ったので、ソファーでまったりTwitch、Youtubeを見る生活が確立しつつあります。
ずーーーっと、Slackいいよ！って言い続けていたわけですが、ゲームをするメンバーでVCを行うならばDiscordというメッセンジャーがかなり良さそうなので紹介です。
Discord – Free Voice and Text Chat for Gamers
すごく簡単に説明すると、VCがついたSlackクローンです。ほとんどSlackです。
チャットとかファイルを送る部分、あとモバイルアプリの出来等はSlackレベルですごく使いやすいです。
そこに、ボイスチャットの機能が付いているのでゲーマーとしてはすごくありがたい。
チャットの延長でVCがあるのは誰もが感じていることだと思うのですが、VCだけ別のツールを使うとチャットが分散される問題とかがありました。（ずっとSkypeの人たちはないかもしれませんが、私がMumbleという糞チャットなツールを使っていたので・・・）
画面はこんな感じです。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してあげｔ・・・・！
そんなわけで、SlackからDiscordに移行しました。
まだまだVCが必要ないチームはSlackを使っていますが、こうやって代替案が出てくるのはいいですね。丸パクリはどうかとも思いますけど。
ちょっとAPIとか調べて、遊んでみたい感じでした。
すっかり忙しくてまともにゲームも出来ておりませんりっくんですこんにちは。ゲームはできなくてもBlogだけは・・・！というわけで、ひっさびさに更新します。
(´・ω・｀)
もう、すっごくニッチな需要だってわかってるんですけど，私のほしい動画共有サービスが無くて困っております。
具体的に挙げますと
まぁぶっちゃけ、ゲームの見返しをしたいんです。復習がしたいのです。
動画の見返しって結構大事で、プレイしてる時には気づかなかったこととかが結構見えてきます。 正直周りを見きれてない場合も多いですし。
そういう時に見返したいのですけど、そこが・・・こう・・・・！
今は開始するときに「せーのっ！」とか言って開始してるわけです。
これを全力で自動化したい（ぶっちゃけ恥ずかしい）
実際、シークがめんどくさいとかもあるわけです。
「MM:SSから開始したい」とか、すごいめんどくさいんですよ、ホント。
でもよく考えたら動画プレイヤーって、JSで制御できるじゃないですか。
なので、プッシュ的な形で同時再生って実装できると思うんですよねぇ。
とりあえずVideo.jsを使ってみようと持ってます。
そんなわけで、やります。
WebSocketとか使うのが本筋かもしれないけど、まぁWebRTC使えばいいかなぁと思ってます。
SkyWayありますし、一回やってるし。
WebSocketを使える環境も自分のサーバーに作りたいんだけども、というかNginxをフロントにおきたいんだけども時間がなくて設定できない・・・。
とりあえずLoLを想定して、プレイ動画の見直しができるようなものを作ります。
まぁ完成したら簡単に配布できるようにしようかなぁと思ってます。
いつになるか・・・、書いたからにはやりたい。
誰か手伝って。
では！
久々の早起きで眠気がピークに達しておりますりっくんですこんにちは。
約1年ぶり3度目のHTML5 Conferenceに、ボランティアスタッフとして参加してきました！もはや恒例になりつつあるのですが、面白いです。
あまり写真は撮ってないのですが、数少ない写真と一日について書いていきます。
8時に東京電機大学 北千住キャンパスについて今回のスタッフTシャツがオレンジだということを知りました！
私はオレンジがかなり好きな色な訳ですが、今まで「白」→「黒」→「オレンジ」と変わっておりまして、そろそろ事前に告知してほしいと思う次第であります。
そんな感じで、
と、結構ガッツリと見てしまいました。
それでは、その辺をそれぞれメモ代わりに書いておきます。
WebRTCは以前からちょいちょい興味を持ってました。
もともと、サーバーサイドのアプリケーションを書いた経験がなかった私が、WebRTCを使えばフロントのJSだけでいろいろできんじゃーん、P2Pサーバーいらないじゃーん！みたいなところから手を付けた技術だったりします。
（※なんだかんだでサーバーは必要です。）
特に、講演者の仲さんの所属するNTTコミュニケーションズが公開している、SkyWayは、このBlogでも何度か取り上げてる気がします。まぁ、ちょっと間違った使い方をしているような気がしますが、WebSocketでヤレって感じではありますな。
SkyWay – WebRTCを簡単＆柔軟に使えるプラットフォーム
このセッションもその次もですが、非常に盛況でした。
自分が多少曖昧に覚えていたICEの仕組みなどを解説してくれたので、良かったと感じてます。
他にも、Native Appで実装できそうとかいろいろ教えていただき、少しこの分野もやり直したいなぁと思ってます。
HTTP2も興味がありました。
これはVPSでCentOSを動かし始めてLinuxに触れ、実際にApacheやNginxを動かす機会が増えたからだと感じてます。
SPDYの頃から少し興味を持っておりましたが、HTTP2はかなり良い感じに進んでいるなぁと、素人的には感じているので、積極的に取り入れていきたいなぁと思いますね。
ただ、自分のサーバーはあまりちゃんと整備しきれていないので、まずはNginxをフロントに置くところからやり直したいなぁと思っております。
ギターをやっていたこともあって、結構興味あるんですよWeb Audio API。
これ、案外色々楽しめると思うんですよね、遠隔でセッションとかMixとか。しかも波長を計算出来る環境は整っているのであとは独自に組んでいけば良いみたいな状況になってるっぽいです。（ただしブラウザ間差異あり）
コレを聞いてて思ったのが、ボイスチェンジャー付きなボイスチャットが、WebRTCと組み合わせて作れないかなぁってところでしたね。
何とかできないかなぁ・・・。
閑話休題
「レッドブル」と「ビン・カン」で分ける意味がわからない。
Google 北村さんの講演。
一番びっくりしたのは結構Sublime Text2時代、活動していたと記憶していた北村さんが、Atomに乗り換えたと語った瞬間かもしれない。
正直にいうと、あまりPolymerの凄さを実感できていない。
というのも、SPAなどのガッツリJSみたいなものは作らず、基本趣味で作っているレベルで見た目レベルのものしかやっていないからだろうと思ってます。
ただこれも、Web Audio APIの話を聞いた後だと、むしろエフェクターを組み合わせる、みたいな部分にPolymerが使えるんじゃないかなぁって感じますね。
それなら、エフェクターを開発者が作って、Web Componentの技術を使って切り貼りすると好きな音作りができるみたいな（DTM界では一般的だと思う）、やってみたいなぁと思うわけですw
スペシャルセッションで行われたクイズ、全問正解して8位でした！！！！！（タイム激遅）
で、頂いたのがこれ。
Firefox OSベースの開発者向けクリエイティブプラットフォームを開発 | 2014年 | KDDI株式会社
FireFox OSが入っているコンピュータ。HDMI出力が標準であるので、さして即使うってことができそう。
箱がかなりしっかりしていて、磁石でちゃんととまってるんですよ。
うーーー、時間があるときにどうしてもさわりたいなぁこれ！！！！
KDDIさん、ありがとうございます！
毎年のことだけれども、やっぱりすごく楽しんでしまいました。
ボランティアスタッフとしてはかなり楽しんでいると思います！！！！
朝が早かった（夜も遅かった）のですごく今眠いのですが、忘れないうちに記事にしようとこんな時間に・・・。
写真、楽しみにしてます。
みなさま、お疲れ様でした。また来年！
そんなこんなで懇親会がなかったので、お疲れ様会。
懇親会が2月とかにあるみたいなので、その時また！
どうもこんにちはすっかりBlogを放置しっぱなしのりっくんです。
久々の更新ですが、新規でWebページを作ったのでその報告でもと。
今回製作した明治大学のサークル、「楽農」4Hクラブとの関係は、バイト先のお友達つながりなのですが、実はその前のWebサイトも僕が作りました。2年前の12月になるのかな？当時ちょうどWebページを作り始めたくらいでMacbookAirを初めて買って制作したものだった気がします。
2年前、それもWebページをようやく作れるようになったくらいの私が作ったページなので、それはそれはなかなか今見ると恥ずかしいようなサイトだったわけです。
確か当時Ajaxとか言われて、言われさるかなぁってタイミングだったような感じで、自分でもページ推移の少ないWebページをつくろう！って言って、ようやく覚えたJavaScriptとjQuery(最強のプラグインかと思った)を駆使して、ググってなんとか完成させたサイトだったなぁと。
思えば、誰かに頼まれて作った一番初めのWebサイトでしたね。自分みたいなペーペーに作らせて頂いて、ほんとに感謝。
自分もまだまだデザインとか苦手なのですが、前のサイトのデザイン、個人的にすごく不満が残っておりました。当時それだけの技術がなかったので仕方ないのですが、だんだん、ちょっとずつできることが増えてきて、あのままではアカンなぁと思っていたわけです。
当時、自分にサイト制作を頼んだ人はもう卒業してしまっていたのですが、その後輩がバイト先には入っていて、お友達なわけです。で、更新って形で作っておりました。
おおまかに2個、考えなくてはいけない点がありました。
まずスマホ対応。これは必須かなぁと思っております。
このサークルのページは、部員が見るというよりも、新歓期に新入生が情報収集として訪れるページだと聞きました。実際に、Webページをみて入部した部員さんも少なからずいるそうです。
そして大学1年生、PCで見る人がメインなわけがないなぁと思って、これはスマホ用にデザインを作るべきだろうという結論に至りました。
私個人は、切り替えできるようにしてほしいなぁと考えているわけですが、今回はコンテンツの表示数をPC、モバイルで減らない（隠すとかしない、どちらも同じコンテンツが表示される）ので、良いかなぁと。
ということでHTML5で。まぁ今更XHTMLとか使う必要ほとんど無いと思うんだよねぇ・・・。マークアップしかしないなら対応もクソもほとんど関係ないような感じだし。IEも7までは切っていいでしょ・・・？ｗ
で、いざ作り始めたわけですが、構造が簡単だったこともあり、一人で好きなツールを使って開発できる環境でSassをガンガン使い、結構らくらく作れました。まずはPC版作って、スマホに対応させていく感じでいじっていきましたね。
デバッグはPCにてChrome,firefox,IE8-11、モバイル系はiPad, iPhone5, iPhone5S, XperiaA, Nexus7 2012
あとSharpとPanasonic系のAndroid標準ブラウザで、heightの解釈が他のと違う現象が起きて、そっちでも一応確認したのかな。多分大丈夫だと思う。部員でバグったら教えてと入ってある・・・ｗ
CMSがあるわけでもない、ただHTMLとCSSとJSを返すくらいのWebサーバーで、権限もさっぱりわからないような場所だし、依頼者の方に聞いても絶対わからないだろうから、・・・いろいろかんがえたけど更新性は悪いと言わざるをえない。
一応、毎年変わる“幹事長とか副幹事長、書記”を書く部分については、周りのタグを消さないようにすれば 大丈夫って伝えてあるので、名前だけ交換してくれると思う・・・。
ただ、Blogの最新エントリをGoogle Feed APIをつかって取得するとか、Flickrにアップする部員の画像をその都度取得して表示するとかそういう機能を作ったので、多少は更新されていくページになったと思う。
こういう、なんとなく今どきっぽいページを作ってみたかった。1ページのWebサイトにしたのは、あまりコンテンツ数が無いのがわかっていたから。
ただ、拡大もあまり簡単ではなかったのかもしれない。CSSでイケルと思ったら、iOS系でなんか変な動きをするとかで、結局JavaScriptを使ってWindowサイズの変化を見て、動的に背景画像を置く要素の大きさをイジってる。
あとはスクロールに合わせて背景画像を変えてる。こういうのも面白いなぁと思って。
ちなみに、waypoint.jsっていうライブラリが、ある要素が画面の一番上に来たってのを簡単に取得していじれるのでおすすめ。
完成したなぁと。前のページはさぞアレだったなぁ・・・・ｗ
まだまだ、うーん、なんと表現していいかデザインがぼけてる部分があるとは思ってるんだけどまだ自分の力不足かなと。
でも一人で作った割にはある程度の成長が見れたので、作ってよかったという感じが結構、達成感なのかな？
これからもちょいちょい作っていきたいね！
