読者です 読者をやめる 読者になる 読者になる

エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

JavaエンジニアのPyCon2016参加報告

プログラミング 勉強

開催概要

PyCon JP 2016 in Tokyo | Sep 20th – Sep 24th

日時:2016年9月21(水)、22(木・祝)
会場:早稲田大学西早稲田キャンパス

レポート

Pythonでpyftpdlibを使ってFTPサーバーを作る際に使ったテクニックの紹介

作った肯定のお話。
いわゆるウォーターフォールで、このフェーズではこんなことしましたって紹介。
どっちかっていうとソフトウェア開発の方が色濃く出ていた。

Pythonで実現する4コマ漫画の分析・評論

ゆゆ式について熱く語っていた。
PyConでは珍しい、かなり異色の人だ。

ゆゆ式をデータ分析して、ゆゆ式らしさとは何かを探し出そうとしたらしい。

画像認識によるコマの検出では、セリフが枠を突き抜けていて大変だったらしい。
確かに、最近の漫画は、インパクトある表現の一種として、枠を突き抜けることが多いからな。
どうやって回避したかというと、平均値より多めのパティングを付けて何とかしたらしい。
そう考えると、人はどうやってコマを認識しているのか気になった。

そうやって集めたデータを解析していたらしいが、1巻分のデータ解析にかなり時間がかかったらしい。
回避するためにNumPy使ったら、早くなって万事解決に至ったとのこと。

メタプログラミングPython

Pythonを使ったメタプログラミングの紹介。
メタプログラミングは、黒魔術に近い印象がある。
案の定、あんまり見たことのないコーディングで実現していた。

海外の人の言葉の引用をして説明していたが、やはりメタプログラミングは、基本やらない方向に倒すのが普通らしい。
「ご利用は計画的に」の言葉で締めくくっていた。

Javaでも勉学のためにやってみたいと感じました。

感想

初日に行けなかったのが痛かった。。。
業務都合に左右されるので、大手の企業じゃないと平日は辛い。

自分のPythonプログラミング能力が低いことを痛感した。。。
去年も感じていたが、あまり進歩していなかったな。。。
来年こそは、スキル向上させて、内容をスラスラ理解できるようにしたい。

あとは、有料だけあって、金がかかっている。
ドリンク飲み放題、昼食付き。
当日、雨だったのが辛かったくらいだな。
休憩スペースの食堂が結構広くて、合間時間の待ちが助かった。
次回も大きめの休憩スペースがあると嬉しいかも。

次回のPyConまでには、バリバリ使えるレベルまでスキルを上げたい。

大企業のシステム開発で思うこと

FW エンターテイメント チーム 生産性

書くに至ったきっかけ

現在、大きな企業でシステム開発を担当しているにあたり、思うことが幾つかあった。
今いる現場ではなく、前にも大企業でシステム開発をした経験はあるが、そこであったことも踏まえて書き連ねていく。

大企業のシステム開発

大企業のシステム開発を何度か経験してきたが、どこも独自のFWを使っている。
そして、開発に携わる人は、かなり多い。
だからこその大企業ではあるが。。。

なぜ過度にFW化したがるのか?

既存のFWでも十分なはずなのに、なぜ独自で作りたがるのか?
いつも疑問に思っていた。
自分が感じているメリット・デメリットは、以下だと思っている。

ベンダ独自FWのメリット

  • 開発効率の向上
    独自の仕様を追加して、開発効率を向上できる(かも?)
  • 独自FWによるユーザの囲い込み
    ある意味、独自FWの最大メリット。
    ロックインすることで、永久に顧客を離さないようにできる。
  • 開発スキルの平坦化
    優秀な開発者もそうじゃない開発者も、スキルの違いをなくし、平坦化する。
    スキルが劣る人から見てのメリットということで。

ベンダ独自FWのデメリット

  • 開発平坦化による優秀なエンジニアの生殺し
    難解な独自仕様を追加することで、標準化から遠のき、多くのことを知っている優秀なエンジニアの能力を阻害する可能性がある。
  • 生産性向上のために汎用性を捨てる
    生産性を向上させることは、何かを捨てている。
    独自FWの怖いところは、それを認知することが難しいこと。
    独自仕様を追加しているがゆえに、汎用性を落としていることに気づかない。
    本当は、慎重に仕様追加すべきで、業務をものすごく詳しく理解していないといけない。
  • アーキチーム?のようなFW専属部隊が必要になる
    独自FWを持つということは、バグフィックスの人が必要になるということ。
    必ず保守要員が必要になってくる。
  • 引用元のバージョンアップに対応できない
    独自仕様で固めているため、大元になっているFWのバージョンアップに対応できない。
    そして、それがセキュリティ関連の対応のバージョンアップだと、致命的!
  • ユーザの要望を独自FW起因で対応不可にしてしまう
    独自仕様であるがゆえに、対応工数増を背景に対応を見送ってしまうケースが発生する。

本当にメリットは少ないのか?

大企業だから、人が多く集まる。
中には面白い奴、自分にはない考え方を持つ奴もいて、一概に大企業が悪とは言えない。
抱えている中にも優秀なエンジニアはいて、話をすると楽しい。

大企業ならではの高額な有料ソフト使えたり、贅沢な開発環境使えたりして、いい経験にはなる。
何も考えないで、言われたことだけしていたらダメだろうけど。

大企業のシステム開発で一番気をつけなければならないこと

人間関係。
これに尽きる。
人間関係をこじらせるのは、一番悪いパターン。
なぜなら、人を集める能力に長けているから、大企業での人間関係悪化は、契約解除に繋がる。
だからと言ってYesマンになることはない。
ちゃんと管理職レベルの人には、話せば伝わる。
喧嘩腰で話さないことが重要。
喧嘩腰で接すれば、相手も喧嘩腰になってしまう。
いい結果は生まないので、絶対にしてはならない。
初めて合う現場の上司でも、人の上に立つ人であることを理解し、それができる人間であることを信頼して接することが大切。

どういった人間が好まれるのか

管理面は大企業の人がやるので、好まれるのは、積極性のある人。
そして、知識を持っている人。
積極性があっても、知識がない人は重宝されない。
その逆も然り。知識があっても、積極性がない人は、邪魔なだけだと思われる。
知識があり、積極性もある人が好まれる。

やっていること

個人的には、知識を取得することに貪欲に行動しているつもり。
積極的にPJ動かそうとはしている。
あとは、大企業で持っているwiki等に、自己PRの文章や、ポエム的なことを書いて、目立つように動いている。
自分は、影の薄い存在で、常時ミスディレクションを発動している。
なので、自分がどういったことに興味を持っているのか、どういったことを感じたのかをみんなの目に着くとこに書いている。
当然、誰かの批判等はしてない。人間関係が命だからね!
自己PRやネタ的な話を書いておくことで、wikiが活性化してくれればという期待も込めてしている。(本当だからね!)

たまにポエムのファンができたり、興味を持っていることを書くことで繋がりができたりする。
場の空気も、少しは良くなっていると思いたいね。

なぜだろう?

独自FWを批判するつもりが、いつの間にかどうやって行けばいいか論になってしまった。
でも、言いたいことが書けたのでこのままにしておこう。。。

Progressive Web Apps の概要

HTML/CSS プログラミング UI/UX

きっかけ

HTML5 ConferenceでProgressive Web Appsって単語が出てきたが、単語の意味が分からなかったので、調査した。
HTML5 Conferenceの内容は、下記記事でまとめてある。

suzaku-tec.hatenadiary.jp

Progressive Web Apps

Progressive Web Appsとは?

ウェブアプリを最新テクノロジーを駆使して、ネイティブアプリのように高速動作するアプリにしようという考え方や動きのこと。
Alex Russell氏がブログで提唱したのが始まりらしい。
原文のリンクは、下記を参照。
俺は、英語見ただけで嫌悪感が走ってしまった。。。何とか克服したい。

Progressive Web Apps: Escaping Tabs Without Losing Our Soul – Medium

ネイティブアプリとウェブアプリ

このまま話が進んでも、漠然としたことしか考えられないので、それぞれのメリットを列挙。
デメリットは、相手のメリットが該当する。

ネイティブアプリ

  • 動作が早い
  • バイス特有の機能を使える
  • ネットワークリソースに左右されない
  • Push通知
  • Google PlayApp Storeといったアプリの配布サイトの集客力を利用できる
  • 決済をストアが代行してくる。

ウェブアプリ

  • アプリのダウンロードが不要
  • Google PlayApp Storeといったアプリの配布サイトの制約に縛られない
  • バイスの制約がない
  • 開発言語が一般的なものを使える
  • URLでアクセスできるので、拡散しやすい

ハイブリッドアプリとの違い

似たような単語にハイブリッドアプリがある。
違いは、アプローチの違い。
最終的な目標は、同じ場所。
ネイティブとwebの融合にある。
※ネイティブアプリとWeb技術が融合することで、ハイブリッドアプリか、Progressive Web Appsが融合召喚できる!

ネイティブアプリが、Webアプリを取り込む方式で作られたアプリ。
一般的にWebViewを使って、Web技術をネイティブアプリに持ってきている。

Progressive Web Appsは、その逆である。
Webアプリが、ネイティブアプリを取り込む方式で作られたアプリ。

Progressive Web Apps を体現するための特徴

  • レスポンシブ
    どんな環境でも最適化されたレイアウトで表示する。
  • オンライン/オフラインでも動作
    ネットワークの接続状況に依存せず、同じ動きをする。
  • ネイティブアプリのようにインストール
    アプリ感覚で操作でき、インストールすることもできる。
  • リンク可
    URL を使って共有できる。
  • 安全性
    傍受されないよう暗号化され、セキュアされている。
  • Push通知などのエンゲージメントが可能

感想

発祥元がGoogleだけあって、Web技術の発展のための考えがまとまっている。
どれも、実現しようとすると、かなり難易度が高い気がする。
規約を作らないと厳しいかもね。
Progressive Web Appsを実現するためには、Web技術を総動員しないと解決が難しいと、調べていて感じた。
サーバーサイドエンジニアとしては、特にレスポンシブデザインの作成が難しいんだよね。。。
どこかで、サポートするFWがでないと厳しい。
デファクトスタンダードのFWが必要そう。
今は、Service Workerがそれに当たるのかな?

あとは、ストアに制約されないのがいいと思いました。
ストアの集客力は、確かに嬉しんだけど、制約に振り回されることが結構ある。
今は拡散はいろんな方法があるから、自前の集客力がある場合は、選択肢の一つとしてProgressive Web Appsはありだと思いました。

バイスの違いを意識しない開発ができる点も嬉しい。
ただ、デバイスごとにテストは必要だと思うけど。
あと、懸念として、特定デバイス固有の事象が出ないかが凄く心配。
バイス固有の事象のために、ロジックを入れなければ行けないは、マジ勘弁。
もし、そういう問題出た時にどう対処するか、エンジニアの腕の見せ所かもね。
あまり遭遇したくは無いが。

いろいろ述べたが、魅力的な技術だと個人的に感じる。
Webエンジニアは、結構ネイティブアプリを作りたい衝動がある。
それをできるような手法が確立されれば、飛びつくWebエンジニアは、多い気がする。
自分もその一人になると思う。

ハイブリッドアプリと、Progressive Web Appsのどちらが良いかは、判断できない。
自分は、Webの技術畑の出身だから、Progressive Web Appsに魅力を感じる。
たぶん、今まで.NETなどをしてきた人は、ハイブリッドアプリに魅力を感じるのではないかと感じた。

参考サイト

developers.google.com

html5experts.jp

sisidovski.hatenablog.com

iyuichi.hatenablog.jp

digiday.jp

www.domore.co.jp

HTML5j Conference 2016 参加報告

FW HTML/CSS UI/UX プログラミング 勉強 開発環境 論争 ブラウザ チーム

公式サイト

events.html5j.org

開催概要

公式転用

項目名 内容
イベント名称 HTML5 Conference
開催日時 2016年9月3日(土)10:00 ~ 19:30(予定)(受付開始 9:30)
募集人数 1,600名
対象者 Web開発者、Webデザイナー
会場 東京電機大学 千住キャンパス(東京都足立区千住旭町5番)
参加費 無料

"より深く、広がるWeb"

少し前には次世代のWeb標準技術であったHTML5は、既に多くの業界に広がり、浸透しています。
今では、HTML5は当たり前のものとして利用され始めています。
また、それに留まらずHTML5に続く次のWeb標準技術は、現在も多くの仕様が検討されており、着々と歩みを進めています。
そうした中で、Web技術が多くの業界、様々な環境で活用されることによる新しいノウハウや最新情報をキャッチアップすることが、Web技術者たちに求められています。

そして、本カンファレンスが、それらのノウハウや最新情報の共有、そして交流の場としてありたいという想いがあります。
Web技術者同士だけではなく、Webを取り巻く様々な企業や団体と、垣根を超えて気楽に交われる機会を作りたい。
そういった「Web技術者の祭典」を目指しています。
本カンファレンスを通じて、皆さんの成⻑を促す機会になれば幸いです。

参加セッション

  • 基調講演
  • Reactの最新動向とベストプラクティス
  • 昼休み
  • HTMLスナップショット2016
  • The First Step to Angular 2
  • TechFeedのつくり方 - Angular2 / Webpack / Ionic2 / Cordova実践入門
  • AtomSublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦!

初参加

初めて参加。
Webのサーバーサイドエンジニアだけど、フロントの知識欲しさに参加した。
ある程度知っているから、大丈夫だろうと思ったけど、知識不足を感じることが多々あった。
一番聞きたかったのは、AngularJS関連の話とJavaScirpt周辺事情。
セッションも、それを意識して受講。

人が多い!

思ったより人が多い。
会場のキャパオーバーな感じがした。
人が多いところで一番気になるのは、トイレ事情。
案の定、大きい方はなかなか開かない。。。
お腹弱いから、こういうイベントでトイレの確保は、最重要事項。
なんかいい方法ないだろうか?
コンビニだと、店舗によっては店員に声を掛けなきゃいけないから、小心者の俺にとっては、かなりキツいルール。

話が逸れた。
HTML5というワードで人がこんなに集まるのだと感心してしまった。
Web関連で飯を食っているエンジニアがいっぱいいるのだなと、どうでもいいことを感じた。

各種セッション感想

基調講演

初めてだったので、イマイチどういうノリなのかよくわからないけど、聞いていた。
及川 卓也氏が登壇するとのことなので、ぜひ聞きたかったから、早起きして参加。
久々に、遊戯王の再放送を生で見たわ。

中村 修 教授

話の概略としては、以下が言いたかったのだと思う。

今までのWebは紙で表現の以降が主だった。
これからは、新しいデータでWebを表現する事が必要になる。
Webは、地球が使っているOSのことだ!(ニュアンス的には、そんな感じだったはず!)
Webは、世界で動く分散OSだ!

なるほどと思ったのは、今までは紙の焼きまわしだったということ。
たしかに、いまのUIは、フラットデザインが好まれ、紙のような質感が主流になっている。
これからは、映像の時代になるのも激しく同意。
現に、映像コンテンツの需要は、結構ある。
拡張現実の重要性も、ポケモンGoで十分に確認出来た。
これからのWebには、映像+どう表現するかが戦場になりそうだ。
そこら辺の技術は、要チェックだということがわかったのが、良かったことかな?

及川 卓也氏

経歴が凄い人だから、いろいろ自分には見えていないものが見えているのではないかと思い、心して聞いた。

Webを下記の3つの視点から見て、個人の見解を述べていた。

  • アプリ
  • メディア
  • 基盤

MSに居たころに、IE7の開発をしていたような発言があった。
本人は、その事実を隠したいようで、黒歴史にしたいのかな?と思いました!

アプリとしてのWeb

アプリの発展として、WebAPIが主流になってきたことを言っていた。
あとは、ProgressiveWebApp、WebAssemblyって言ってた気がする。
初見ワードだったので、キーワードだけ頭に入ってきた。

メディアとしてのWeb

キュレーションアプリの流通についての話だった。
情報サイトは多くあるのに、なぜキュレーションが流行ったのかにフォーカスが当たった。
簡単に言えば、UIUXが最悪だったから、生まれたものと言う見解だった。
本来見たいこと、広告が入らないからキュレーションが普及したとの見解を述べ、普及したのは、エンジニアがUXへの理解が足りていなかったから。
上手いこと、エンジニアに話を繋げたなと思った。

言いたいことは、エンジニアが怠惰だったということだ。。。
リゼロのペテルギウスを思い出す。

本来は、キュレーションが出ないように開発をする必要があり、それを防止するためにエンジニアが全力を賭さなければ行けないと、感じました。
自分にはない視点だったので、聞けて良かったと思います。

AMP?だったかな?
初見キーワードで、内容が理解しきれなかったが。
あとで、要調査しておきたい。

基盤としてのWeb

時間がなかったので、あっさりと終わった。
あんまり頭には残っていない。
たしか、HTTP/2が話に上がっていた気がする。

HTTP/2は、過去記事で書いたので、そちらを参照。

suzaku-tec.hatenadiary.jp

Softwear Desineの雑誌が非常にわかりやすかった。
まだ、置いてあるか不明だが、見かけたら一読してみることを進める。

Reactの最新動向とベストプラクティス

React周りの知識は、サーバーサイドエンジニアも欲しいので聞いた。
特徴と今後が聞きたかったので、使い方は、聞き流した。

Reactの活用事例

意外と開発事例が多いように感じる。
業務で使っているか会場に訪ねていたが、半分いかないくらいの人がつかっているらしい。

React特徴

  • 書き方を学んでおくと、どこでも使える
  • Component指向
  • 宣言的

今後

軽量化&レンダリングの高速化・優先度の付与
ようするに、見た目と表示速度向上に力を入れていくことになる。
エンジニアよりではなく、ユーザよりの意見を強く取り入れていく方針なのだろうか?
そこら辺が気になった。
開発効率 < 見た目 って印象を受けた。 ユーザに見えるところの技術だから、そうなることが当然だけどね!

お昼

休憩がてら、そこら辺を散策。
散策理由は、言わなくてもわかるな。
そう、ポケモンGoだ!
昼休み中に、フシギソウをGetして、ちょっとテンション上がった。

HTML2016スナップショット

発表内容を、もうちょいよく見ておくべきだった。。
HTMLの変革の歴史みたいな内容だった。
今の新機能の紹介かな?と思ったけど、それまでの経緯とかの話だった。
エラッタとかのワードに反応してしまった。
遊戯王ではよく聞くワードだからな!

The First Step AngularJS 2

楽しみにしていたセッションその1。
実際に業務で使うから、聞きたかった。

特徴

なんか、Reactできいたような事が。
Reactとは、競合相手なのかと感じた。
フロントエンドの知識のなさを感じる。。。

Web標準

  • ES2015
  • web components
  • web animations API
  • terch API

未来の標準を意識して、仕様追加がなされている。
学習コストが減らせる反面、仕様に振り回されるデメリットもある。

シンプル

わかりやすく書けることを、実際のソース比較で説明していた。
資料を実際に参照したほうが分かりやすいので、ココでは明記しない。

高速化

チェンジディテクタと木構造
チェンジディテクタとは変更検知の仕組みのこと。
100000 / 10ms かなり高速で動作する。ただし、高速だからと言っても、変更検知は少なくなるように作るべきである。
自分の近くで、検知の仕組みを最小限にしなかったから、炎上したのを見たので。。。
ツリー構造になっており、変更検知した後の変更箇所が特定されているのが、高速に処理できる要因なのだと感じた。

TypeScript

  • 静的型 コンパイラによるバグ防止。入力補完の活用。ドキュメントとして使える。
  • Decorators @マークによる宣言的修飾子が使える。 すぐに入るわけではない
  • Type-base DI Angular2 型ベースでやることで、コンパイラによるタイピングミス防止機能が有効に働き、バグが防止でき

router

死んだり生き返ったりを繰り返しているらしい。
Googleですら、悩むことだから、ここがAngularの肝なのかと感じた。
まだ、実際にはAngularJS使ってないが、router関連は注意して見ておきたい。

Tech Feedの作り方

面白そうだな~と思って、なんとなく受講。
Webサイトは、よく見るので、気になった。

webアプリ → コンポーネント思考になる。
なぜなら、UIを突き詰めると、同じ動作が増える → 同じ処理が増える → 共通化が必要になる。 共通部品をコンポーネント化してしまえば、生産性を高められる。

Tech Feedのアーキテクチャと採用理由

Cordva

バイルアプリをweb技術で作れる。

  • 採用理由
    • Webの知識を活用したかった
    • コードベースの統一
    • webとモバイルの統一

Angular2

Reactじゃなかった理由 - 採用当時、Reactのモバイル版がなかった。 - 強めの強制が欲しかった。 - 採用することでコードスタイルを統一したかった。 - React-Reduxが難解 学習コスト、プログラミングパラダイムの違いにかかるコストが大きかった。

Ionic2

Angularに対応したUIアプリ

Webpack

モジュールバンドラー Javascriptをまとめて一つにしてくれるツール

開発現場

実機での確認が必須なので、デプロイしたら自動的にリブートする仕組みを構築。
つまり、CI環境を作ったってことですね! フロント系は、実機へのデプロイ&テストがあるので、サーバーサイドのCIよりも、1段階手間が掛かるんだなと心の中で呟いた。

開発してみての振り返り

Cordva

メリット
  • コードベースの統一
  • webの知識が活用できる
  • Androidのバージョン差が気にならない
デメリット
  • ネイティブよりも遅い
  • 一人のエンジニアが全部見ないといけない

Angular2

メリット
  • Angularの進化
  • 使いやすい構造
  • CSSカプセル化
  • 開発者によるコードの差がすくない
デメリット
  • 学習コストが高い
  • 静的型付けが辛い
  • バージョンアップで仕様がものすごく変わる(今だけかも)

TypeScript

メリット
  • 最新の言語仕様が使える
  • 静的型なので、コンパイラによるコーディング補助
デメリット
  • ツールが未成熟
  • JSとの溝を埋めるのが辛い→静的型のデメリット

Ionic2

メリット
  • 開発しやすい
  • ネイティブに近いUI
デメリット

Webpack

メリット
  • script地獄からの開放
デメリット
  • 機能が豊富過ぎて迷う
  • 学習コストが高い→ 言語化できない謎の難しさがある

コンポーネント開発ついて

開発できるようになるまでの環境準備が大変

Atom, sublime Text, Web Storm, Visual Studio Code 四大エディタ真夏の体決戦

なんかウルトラマンみたいなタイトルロゴ・・・

山本裕介氏の名前を見つけて、ネームバリューで閲覧を決定!
人が多すぎる。やっぱりエディターへの関心が高いことを感じる。

立ち見を覚悟していたけど、特別席になんとか座れた。 ちなみに自分は、圧倒的にAtom!!
ただし、HTMLは書いてない。メモ書きに使う。あとはブログ編集。Markdownが書きやすいので、それで使っている。

Atom

特徴

機能

Atomのメリット

会場で高評価

タイピングエフェクトを見て、会場がどよめく。
タイピングのエフェクトが俺と同じだったので、驚きはしなかったが、初見の人は新鮮みたい。
そういえば、自分も初めて見た時は面白かったから、入れた!
ものすごいタイピングが楽しくなるからね!

告知

Node学園祭を告知していた。
暇かどうかは、微妙な時期だけど、スケジュールが合えば行きたい!

Sublime Text

必要最低限の機能だけを持っているエディタ
エディタの大元
高度なテキスト編集が可能
拡張性が高いが、どのエディタも対応されるようになってしまって売りではなくなりつつある。

WebStorm

GitHubとの連携デモを交えて紹介
Issueに応じてやれるのを見た。
ブランチが自動でできるので、GitHub携わる人は必須な気がした。
Atomでもできそうではあるが。。
タイピングエフェクトがちょっとウザかった気がする。

Upsource

GitHubとの連携が凄い。 なにかでみたレビューツールで見ている。
Review Bordだったかな?
それに似ている。

VS code

バーサスコードって俺は心のなかで読んでいる。
響き的にカッコいいから。
electroenで作られているから、Atomの模造品ってイメージがある。

ターミナルがエディタ上で起動できるようになっている。
マルチプラットフォームで動くのは知っていたが、MSがって思うと、やっぱり異色なエディタなイメージがある。

若干気になったのが、mavenってどう読むのが正解なのだろう?って思いました。
自分は、メイブンっていうけど、登壇者は、マーベンって言ってた。
あとは、メイベンとか言う人もいるな。 こういういい間違えが怖いから、日本人の英語がなじめないのだと思う。
恥を捨てる心がいる気がした。

vs codeは、エディタってイメージよりも、IDEって言う方が近い気がした。
デモはJSのデバックをやっていたので、余計にそう感じた。

プラグインが補完できないところは、ターミナルのコマンド補完とかでやればいいので、汎用性が高いエディタなイメージを持てた。

感想

全体的に知識が足りてないことが多い。
己の無力さを感じる。
将来的には、フロントエンドもサーバーサイドもインフラもやれるようになりたいので、良いきっかけづくりにはなったのではないかと思う。

TODO:今後に向けて調査・実践すること

  • Reactを使ったWebページ
  • ProgressiveWebAppとは?
  • WebAssemblyとは?
  • Webpackの利用
  • Node学園祭への参加
  • AMPとは?

各種ブログへのリンク

HTML5 Conference 2015 講演資料まとめ #html5j | Time to live forever

HTML5 Conference に行ってきたメモ #html5j - console.lealog();

HTML5 conference 2016 スライド他まとめ - Qiita

HTML5 Conference 2016 の発表で自分の仕事が少しだけ紹介されていて嬉しい - 若き JavaScripter の悩み

Pandocを使ったMarkdownからGithub風のHTML作成

HTML/CSS ドキュメント

環境準備

Pandoc のインストール

Releases · jgm/pandoc · GitHub

最新版の Pandoc-x.yy.z-windows.msi をダウンロード&インストール

使い方

基本

pandoc <元となるファイル> -o <出力ファイル>

「-o」は、出力ファイルの拡張子を見て、自動判断してくれるので、便利!
なるべく自動判断したほうが、ヒューマンエラーが少ないのでオススメ!

Markdown → HTML

基本で説明したやり方でもできるけど、タイトルにあることがしたいので、そのやり方を説明。

pandoc <変換元Markdownファイル> -s --self-contained -t html5 -c github.css -o <出力されるhtmlファイル>

--self-containedは、CSSスクリプト、画像ファイルを全て埋め込む方法。

github.css

下記で公開されているので、ダウンロードして使用する。

Github Markdown CSS - for Markdown Editor Preview · GitHub

画像参照している箇所があるので、用意するのが面倒な場合は、削除してもいい。

第98回 全国高校野球選手権 八戸学院光星 対 東邦 感想

エンターテイメント

きっかけ

午後から読書(リゼロを読んでた)が、即読破してしまい、アルスラーン戦記まで時間があったから、視聴。
どっちかと言うと、横浜vs履正社の豪腕対決を見たかったからテレビを点けた。

結果

東邦が八戸光星にサヨナラ勝ち

スコアボード

1 2 3 4 5 6 7 8 9
八戸学院光星 1 0 3 0 2 0 3 0 0 9
東邦 0 1 1 0 0 0 2 1 5X 10

感想

試合見終わった後に書いている!

一方的な状況

自分が見始めたのは8回から。
自分も東邦の価値はないな~と思いながら見ていたが、東邦のバッターの粘りのバッティングが嫌らしかった。
粘られるのは、ピッチャーとしては辛いものがある。
決めに行ってもカットされるのは、かなり辛い。
一時期ピッチャーやっていたことがあるが、カッティングしてくるバッターのウザさは知っているつもり。

1点上げたのは良かったけど、後続が続かなかったのと、流れはそれほどでもなかった。

きっちり抑えた9回表

ゲームが動いたあとの次の回をどう抑えるか。これはプロ・アマ問わない。
この回をしっかり抑えたことで流れが出来た気がする。
得点圏にランナーが居たけど、上手く抑えられたと思う。

点を入れた後に失点してたら、士気もさがるし、会場を味方に付けられないからな!

9回裏

すぐ2アウトになるだろうな~と思ったけど、そうならなかった。
そこから長短打の連打で徐々に得点差を失くしていき、会場を見方に付けての逆転勝ち。

粘りのバッティング

8回もそうだったが、粘られるのが辛い!
投げ急ぎが感じられたので、粘られて結構辛かったのではないかと感じた。

盗塁の重要性

まさかの盗塁を絡めてきた、積極的な攻撃をしてくるのが意外だった。
プロ野球なら慎重になるから、あまりこういう場面はないけど、この姿勢が流れを引き寄せた気がする。
失敗してたら、たぶんサヨナラはなかっただろうなと思う。
盗塁の成功が一番でかかったと思う。
会場の雰囲気、得点を許せない状況で、ランナーも気にしなければいけない状況になった。
バッター有利の状態にできたので、サヨナラ勝ちは必然だったのではなかろうかと、あとになって思いました!

会場の雰囲気

会場の雰囲気が逆転を願っている感じが、テレビから伝わってきて、八戸学院光星の投手はキツイだろうなって感じた。
会場を見方に付けるのは、難しいけど、付けてしまえば結構なんでも起きるのだなと思いました!
さらに、相手が粘ってくるから、精神擦りきれるで、あの状況は!
投手変えるべきだったかも知れんな。
結果論だけど。

短期決戦のやり方

この試合を見て、短期決戦のあるべき姿を学べた気がする。
やはり後半になると、足を絡めた攻撃は有効な気がする。
気を配る対象が増えるのは、やっぱり嫌だよね?
集中力を削ぐ意味でも、ランナーのウザさは目立つ。

あとは、粘りのバッティングだな。
狙い玉は積極的に打つべきだけど、追い込まれた状況では見逃すより当てに行くバッティングが大事ではないかと感じた。
特に、投げ急ぎの傾向があるピッチャーには有効な気がする。
決め球のカッティングは、精神的にも辛いから。

個人的な甲子園攻略チーム

甲子園を見て、適当に夢を語る。。。

俊足打者

俊足と粘りのバッティングができる奴を揃えることが重要な気がする。
あとは、どれだけ早く先取点取れるか。

守備力は絶対

守備力は絶対!
甲子園の試合を見てて、エラーが絡んでの失点が多いので、安定した守備力は必須だと感じる。

投手のリスク回避と分業

投手も大事だな~と見てて感じる。
大エースいるのは必須だが、2枚看板構成にしたいところ。
常に調子がいいわけではないし、相手との相性もあるので、1人に頼るのはリスクがデカイ。
あとは、リリーフエースが欲しいかな?
後半のシビアな状態でも投げ切れる精神力を持った奴が、絶対必要だと感じる。

水を指すが。。。

負けたチームが甲子園の砂をかき集める様を、近場で撮影するカメラマンに、嫌悪感が走るのだが。。。
甲子園ビジネスが垣間見えるのは、やめて欲しいところ。
できれば遠目で撮影して上げて欲しいなと感じる。 男の泣き様を取るのは、粋じゃないと思うんですよ。。。

Vagrant個人メモ・まとめ

開発環境 OS

Vagrantとは

仮想環境の構築を自動化するためのツール。

きっかけ

いろいろ混乱するので個人的まとめ

環境

Vagrant by HashiCorp

Oracle VM VirtualBox

各種コマンド

概要 コマンド 説明・詳細・ネタ
現状確認 vagrant status VMの状態を確認できる。
running:起動中
poweroff:停止中
一時停止 vagrant suspend 死に戻りするための死のコマンド!
一時停止からの復活 vagrant resume ドラクエで言うザオリクである
シャットダウン vagrant halt 完全に死ぬ。お前はもう死んでいる。。
覚え方は
Vagrantを止めるぞ、ハルトォォォォ!
起動 vagrant up コイツ、動くぞ!
起動する場合は、カレントディレクトリに
Vagrantfileが存在する必要がある。
今の状態をBOX化 vagrant package 今の仮想環境の状態を共有できるように出力する。
後述するBOXの追加したりできる。
環境をゴミクズのように切り捨てできるので、
インフラ周りを管理する人には必須コマンド
BOX出力前にvagrant haltvagrantを停止
ボックスの追加 vagrant box add <boxの名前> <boxのパス> パスにはURLも指定可能
ボックスの初期化 vagrant init Vagrantfileをカレントディレクトリに作る
消去 vagrant destroy
追加しているBOXの一覧出力 vagrant box list たまに何があるのか忘れるので必須

ホストとゲスト

  • ホスト
    お主が使っているOS。仮想環境ではないOSのこと。
  • ゲスト
    接続される側のOS。つまり、仮想環境のOSのこと。

SSH接続のユーザ

vagrantが自動で追加されている。
パスも同じ。
ちなみに、rootユーザも同じパスワード。

設定

GUI起動

以下の部分のコメントを外す

config.vm.provider :virtualbox do |vb|
・・・
vb.gui = true
・・・
end

endは、config.vm.provider :virtualbox do |vb|の直近のやつ。

ポートフォワーディング

下記の設定をすることで、ゲストOSとホストOSのポートを紐付ける。
迂闊にやると、たまにポート競合を起こして混乱することがあるので、ちゃんと管理すること!

config.vm.network :forwarded_port, guest: <ゲストOSのポート>, host: <ホストOSのポート>

上記の設定をしたら、Vagrantの再起動が必要。

ポート競合は、大抵ゲストOS側の問題であることが多い。
Windowsを使っている場合は、下記の過去記事を参照。

suzaku-tec.hatenadiary.jp

参考URL

知識系

vagrant コマンド(起動・再起動・シャットダウン等々)備忘録 - Qiita

VagrantコマンドとVagrantfileの設定メモ - Qiita

Vagrant入門 | WEB ARCH LABO

開発環境の構築・共有を簡単にするVagrant入門 | Think IT(シンクイット)

教育系

Vagrant入門 (全13回) - プログラミングならドットインストール