2015-11-29

「DMM.Study Night フロントエンド勉強会」に行ってきた

勉強会 Web

「DMM.Study Night フロントエンド勉強会」に行ってきました！

就職で地方から上京してきた私としては、東京での勉強会というのは憧れでした。

インターネットやWebが発展し時間や場所への制限が少なくなってきたとはいえ、こういう機会というのは地方では難しいのが現状だと思っています。このあたりの問題はどうにかなってほしいと思ってますし、どうにかしていかなければと思います。

それはさておき、今回はDMM.comさんが主催する勉強会「DMM.Study Night」。恵比寿ガーデンプレイスタワーにあるDMM.comのオフィスで行われました。

f:id:masayuki610930:20151129215927j:plain

既にこの勉強会を開催しているそうですが、フロントエンドに全面に押し出した勉強会は初めてとのことでした。

4人公演されましたので、それぞれ書き下したメモを載せていきます。

DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話

DMMにおいて、フロントエンドエンジニアという役割が明確になったのは1・2年前とのことであり、フロントエンドエンジニアは何をコントロールすべきかを整理してお話してくださいました。

以下内容。

全体

JSよりもCSSのルールぎめが重要。

下記を使っている。

bower: コマンド一発でライブラリがもてる
webpack: ビルドツール

css

Sassを採用
設計はFLOCSSを採用
覚えづらいルールは極力排除
書式はLinterで制御
英名規則はBEM
スタイルガイドの導入

Sass

ガッツリやると複雑なので、簡易的に以下に限定した

変数
ネスト
親セレクタの景初
コメント

下記は不採用 - 関数 - mixin/extend - などなど...

FLOCSSという考え方

Foundation
Layout
Object
Component
Project
Utillity

Object以下は、作業者のみが触る範囲。リードエンジニアは全体を触る。

Component: パーツは全て個々
Utillity: 設計者が用意・作用者は使うだけ
Project: パーツとは無関係な独立ページ用

ComponentとUtillityで基本的に全て賄う→スピードの向上

スタイルガイド

Gulpを使って.sccsファイルから直接スタイルガイドを自動生成

設計者が管理するために必要なもの

CSS import
Webpac Entorypoint
などなど

フロントエンドエンジニアがいると

メンテしやすい
パフォーマンス高い
バグが出にくい

Developertools表示しておけばネトゲやってても仕事してる感でる

タイトルからネタ的な話をするかとおもいきや、すごくためになる話でした笑。ChromeのDevelopertoolsを使うことはあっても、単純なブレークポイントくらいしか使ってなかったので知れて良かったです。

以下内容。

条件付きブレークポイント

ブレークポイントして、右クリックして出てきたボックスにコードを書く
実態は、Ture返したら止まるやつ
jQueryも呼べる
非同期通信もちゃんと動く

通信のブレークポイント

XHR Brakepoints
call stack で一覧見れる
任意の通信を引っ掛けられる
ポート番号も指定可能
typeがXHRのリソースは右クリックからリプレイできる

計測ツール

Networkパネル：コンテンツのダウンロード時間
Timelineパネル：ダウンロードやレンダリングの時系列
Profilesパネル:CPUの利用料など

通信周りから調べてみる

HARファイルを使ってみる
Webサイトを解析した結果情報
中身はJson
比較用のツール（HAR viewer）
PhantomJSを経由して、自動でとるスクリプトをかける

次にAuditsパネルを見る

ネットワーク／ページパフォーマンスの2方向から検査してくれる
JSまとめろ
gzipで送れ

Chromeオンリーブラウザゲームがマルチブラウザ対応するまで

マルチブラウザ対応が大変とは聞くけど、その内容を初めて聞くことができました。実際には、はじめからChrome向けに書かれたものを後からマルチブラウザ対応にするのは大変だってのが今回の根本なんですが。

以下内容。（気になった言葉だけ抽出）

Autoprefixer: CSSのマルチブラウザ対応に使える。ベンダー接頭語を自動付与する。
Can I Use: 各ブラウザのCSS対応状況を確認できる
pleeease: Gulpのプラグインで、utoplefixに圧縮、メディアクエリーをまとめてくれる

DMMの闇に触れた話

DMMには金沢にも拠点を持っており、そちらで活躍されているフロントエンドエンジニアの方のお話でした。勉強会後の懇親会でもお話したのですが、非常に楽しい面白い方でした。あちらの方で働き口を見つけたいときには、DMMさんにお話を聞きに行こうと思いました。

以下内容。（気になった言葉だけ抽出）

2015-11-19

feedly APIを使ってみる

Web やってみたネットワーク

RSSリーダーとして使っているサービス、feedlyのAPIを使おうとしたところ意外と引っかかったので、使い方を書き残しておきます。

今日（2015/11/19）時点のAPI 、V3で確認をしています。

アクセストークンを取得する

Web APIは様々にありますが、企業が公開しているAPIを利用する際は往々にしてアクセストークンというものが必要になります。

各ユーザーに紐付けられた文字列であり、公開元がアクセスの管理・解析をする目的として必要であるという理解を私はしています。

手順は簡単です。

認証

https://feedly.com/v3/auth/devにアクセスし、いずれかの方法（すでに自身が使っている認証方法）を選択して認証を行います。
メッセージの確認

認証後の画面に記載されている連絡先をチェックします。

今回はGoogleで認証を行ったため、自分のアドレス****@google.comのメールをチェックします。
リンクへのアクセス

メッセージがfeedlyから送られてきているので、記述されているURLに飛ぶと、

アクセストークンが表示されています。

表示欄は小さいですが、横にスクロールされて結構な文字数となります。（今回試したところ242文字ありました。）

使ってみる

curlで問い合わせ結果をGETで取得してみましょう。

問い合わせ形式はこんな感じです。

$ curl -s -H 'Authorization: OAuth [トークン]' [アクセスURL]

取得したトークンを今仮に "MyToken" という文字列、

アクセスURLをhttps://cloud.feedly.com/v3/categoriesとすると、

$ curl -s -H 'Authorization: OAuth MyToken' https://cloud.feedly.com/v3/categories

となります。

アクセスURLは欲しい情報により異なるので、公式ドキュメントを見てみてくささい。

結果はJSONで帰ってくるみたいなので、あとはこれをパースしてうまく活用すればOKです。

curlのオプションである -s と-H はそれぞれ、

-s : 進捗状況やエラーを表示しない

-H : HEADER HTTPヘッダにHEADERを追加もしくは変更する

という意味らしいです。参考

これでとりあえずアクセスが出来るようになりました！

2015-09-07

AndroidのMediaRecorderで録画・録音する際はクラス関数の順番に注意を！

Android開発やってみた

Androidで動画の保存（録画）や音声の保存（録音を）する際、MediaRecorderを使用します。

さくっと使えて便利なクラスなのですが、クラス関数の利用順番がしっかりと決められているので、使用例を載せておきます。

一瞬ハマったので。

AndroidのMediaRecorderを使った録画・録音の設定

順番については公式ドキュメントを読めば一発なんですが、録音のあり/なしをif文分岐で2度書くのがめんどくさく感じて、つい何も考えなしにまとめてしまったりするんですよね。

反省。

2015-08-05

MaterializeのCharacter Counterの重複解消方法

Web プログラミング

前回紹介したデザインフレームワーク Materializeの便利機能に、文字数カウントがあります。

サンプルはこんな感じです。

しかし、ドキュメントにしたがってそのまま書くと、下図のようにカウンターが重複してしまいます！ f:id:masayuki610930:20150805002709p:plain

修正するのは簡単です！

デザインフレームワークMaterializeのcharacter counterの重複解消

.removeで生成されたelementを消してあげましょう！

たったこれだけで、スッキリ解決です！！

2015-07-12

Webでマテリアルデザインを簡単につくれるMaterializeを使ってみた

プログラミング Web やってみた

Googleが言い出したマテリアルデザイン。

Android 5.0:LolipoのCMを最近目にしたりしますが、Lolipopが広まってくるにつれ、世の中にのなんとなく認知されてきたかなと思ってます。

このマテリアルデザインをWeb上で表現する際に強力にサポートしてくれるMaterializeというものがあり、最近ちょっとした経緯でこれを使いました。

サンプルとhowtoをまとめたので御覧ください。

Materializeの使い方 f:id:masayuki610930:20150712224946p:plain

github.ioにあげてます。 <a href="https://github.com/masayuki610930/materialize_sample/tree/gh-pages">masayuki610930/materialize_sample</a>github.com

公式のドキュメントはかなりしっかりしてていい感じです。が、

何ができるか
どうしたらできるか

という情報の所在と知らされる順番がいまいちにように感じてしまい、だったらせっかくだしと思いまとめた次第です。

間違い等なにかあれば教えて下さい！

2015-06-29

角度や方向に対する評価関数

アルゴリズムプログラミング

角度や方向に対する評価関数について考えました。

使用例

サッカーを例に考えます。

f:id:masayuki610930:20150629222057p:plain

今ボールを持ったプレイヤーに対して、近くにいる仲間A,Bがいるとき、どちらにボールをパスしたらいいでしょうか？

ゴール近くにいる仲間Aにパスする！と皆さん考えるでしょうが、例えば仲間Aと仲間Bに能力差があり、

能力差：仲間A＜仲間B

という場合では答えは難しいです。また、仲間までの距離も考慮に入れたくなります。

いろいろな要素が考えられますが、今回はこのうち「角度」に注目して角度のみに関する評価関数を考えてみました。

普通の考え方

プレイヤーを中心にゴール方向を0度とし、仲間が360度中のどこにいるかを元に考えます。

単純に考えると、0度に近いほど良い評価値を与えればよく、

${ \displaystyle evaluation = cos(\theta) }$

となり、負数を無視しゼロと置換えて次のようになります。

f:id:masayuki610930:20150630083751p:plain

提案

考え方

先の例で充分な例もあるでしょうが、

もっとシビアな評価
もっとメリハリのある評価

を求めるケースもあるでしょう。そこでシグモイド関数を使いこれを解決します。

評価関数

${ \displaystyle evaluation = \frac{1}{1+\exp(-\alpha(\frac{|\theta_x-180|-180+\theta_h}{\theta_h}))} }$

${ \displaystyle \theta_x }$ は仲間の角度、

${ \displaystyle \theta_h }$ は評価値半減点、

${ \displaystyle \alpha }$ はシグモイド関数のゲインを示します。

評価値半減点とゲインはパラメータ（設定値）であり、評価値半減点に評価値0.5を取る角度の値を、ゲインにはとりあえず5～10の値入れておけばいいです（後述）。

関数をプロットすると、次のようになります。

f:id:masayuki610930:20150630083810p:plain

図の通り、パラメータ評価値半減点により高い評価を与える角度の範囲設定を、ゲインにより評価値のメリハリの変化をつけることが出来ました。ゲインについては実際に試してチューニングすることをオススメします。

注意点

この手法は評価値が極めて低い値を取ることが理論上仕方ありません。プログラムに起こす際は、評価値半減点を閾値として、今回の関数に掛けるかどうかを判断するとよいでしょう。

この点だけを気をつけて頂いて、今回の提案手法をぜひ利用してみてください。

2015-06-28

知っておくと嬉しい、ストレージの技術用語

ハードウェア技術用語サーバ

スケールアップ型とスケールアウト型

スケールアップは、サーバーのCPUやメモリーといったハードウエアを高性能なものにして処理性能を上げる方法。一方のスケールアウトは、サーバーの数を増やすことで性能を上げる方法です。後者の場合、1台1台が高性能でなくても、大量のサーバーで同じWebサービスを動かせば処理性能を上げられます。スケールアップより構築コストが安く済む、1台くらいサーバーが停止してもWebサービスを提供し続けられる、というメリットがあります。

SPOF

Single Point of Failureのこと。

単一障害点（たんいつしょうがいてん。英: Single Point of Failure, SPOF）とは、その単一箇所が働かないと、システム全体が障害となるような箇所を指す。情報システム工学や通信、サプライチェーン・マネジメントなどの分野で使われる概念である。単一故障点と訳されることもある。

CVS

Hyper-V 2.0は、「クラスタ共有ボリューム（Cluster Shared Volume: CSV）」という特殊なボリューム・マネージャ機構をWSFCに実装した。これにより、ファイル・システムは通常のNTFSのままに、複数ホストからの同時アクセスを可能にしたのである。

出典

NFS

概要

Network File Systemのこと。サーバ・クライアントシステムの体型であり、サーバサイドのストレージにクライアントからアクセスを行い読み書きを行うことが可能である。

仕組み

NFS プロトコルを利用した通信で行う。一般的にUDPまたはTCPの2049番ポートが利用される。サーバサイドで特定のディレクトリ領域のアクセスの許可・制限をかけ、クライアントはそのアクセスポイントに対しマウントをする。

使用例

ファイルの共有
フリーアドレス（どの端末でも自身の環境になる）
ファイルの保存やバックアップ専用（耐久性の高いHD）

NFSv3/v4の違い

ステートフルなインタラクションと権限移譲の導入
クライアントは一時的な排他的アクサセス
クライアント側のキャッシュ処理

などの変更がv4にあり、セキュリティー面での改善が施された。パフォーマンス的には、メリットがあまりないとの検証結果が出ている。

2015-06-28

知っておくと嬉しい、ネットワークの技術用語（その2）

ネットワーク技術用語

ルーティングプロトコル

BGP

Border Gateway Protocolの略で、AS間の通信交換のために作られたプロトコル。

BGPはTCPポート179番を利用して通信を行います。BGPルータはピアを確立するために、メッセージと呼ばれる形式で機能情報を交換します。メッセージはBGPの状態により数種類存在します。ピアが確立した後は、経路情報を伝達するためのメッセージを定期的に交換し、お互いの持つ経路情報を保持、更新し続けます。 BGPではピアを確立するルータが同じAS間である場合と、異なるAS間である場合とで異なる方式で経路情報を処理します。同じAS間でのピアをiBGP（内部BGP）ピアと呼び、異なるAS間でのピアをeBGP（外部BGP）ピアと呼びます。

EIGRP

EIGRP(Enhanced IGRP)はCisco独自のIGRPを改良した、クラスレスの拡張ディスタンスベクタプロトコルです。 EIGRPでは、クラスレスルーティング、VLSMのサポート、手動集約、ルーティング認証、マルチキャストによる差分アップデート、DUALを使用したIGP一番の高速収束、レイヤー2でのシームレスな接続、リンクステートの特性といえるHelloによるネイバー検出と隣接関係の維持、ルーティングのループフリーなどが実現されており、 Cisco製品だけで構成された小規模、中規模ネットワークにおいては最も適した IGP と言えることができます。

出典

OSPF

OSPF（Open Shortest Path First）は、ルーターやレイヤー3（L3）スイッチがパケットの転送先を動的に決定するためのルーティングプロトコルの一種である。主に中・大規模ネットワークで使う。　L3スイッチでOSPFを動作させると、ネットワークの経路情報（LSA）を他のL3スイッチとやり取りし、ネットワーク構成図（トポロジーマップ）を作る。その構成図から最適経路を判断し、パケットの転送情報であるルーティングテーブルを作成する（図）。L3スイッチはこのルーティングテーブルを見てパケットを送る。

RIP

RIP（Routing Information Protocol）は、IP用のルーティング・プロトコルとして、非常に古くから使用されています。このプロトコルは、UDPのブロードキャスト・データ・パケットを用いて、経路情報を隣接ルータにアナウンスします。この中には、「メトリック」と呼ばれるあて先ネットワークまでのディスタンスを表す情報（ルータのホップ数）が含まれており、ルータを超えるごとに1つずつ加算されます。RIPは、このメトリックを利用してネットワーク・トポロジを把握するため、「ディスタンス・ベクタ・アルゴリズム」に基づいたルーティング・プロトコルと呼ばれています。RIPでは、メトリックがより少ない経路情報が最適経路として使用されます。最大メトリックは15となっており、これを超えた場合は到達不能と見なされます。RIPでは、これらのすべての経路情報を30秒周期で隣接ルータにアナウンスすることにより、情報の更新を行います。

セキュリティー

ARPキャッシュポイズニング

ARPキャッシュを悪用した盗聴方法の一つです。具体的には、下図のようにARPによる問い合わせがあった際にMACアドレスを偽った応答を相手に返送することで誤った内容を記録させ、以降、本来の宛先とは異なる宛先にデータを送信させようとします。

出典

802.1X認証

IEEE802.1xとは、有線LANや無線LANで使用される認証について規定したプロトコルです。このIEEE802.1Xに対応したLANスイッチのポートでIEEE802.1Xが有効な場合、そのポートにPCなどを接続してもすぐにLAN接続が行われることはなく認証された機器のみが接続されます。IEEE802.1Xは検疫ネットワークでは中核の技術です。