JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(

最近、スマホやタブレットを使う機会も多いですが、その辺りの端末に動画コンテンツを提供する時に楽なのがmp4形式の動画をvideoタグで貼り付ける事です。 ただ、ちょっとした注意点があって、どういう状況で再生するかによって細かい調整をしておかないと、再生開始までにえらく時間がかかるようになって、非常に不便になります。 既に作成済みの動画を再生する場合 mp4形式の動画を再生するためにはメタデータ情報が必要です。メタデータは通常ファイルの末尾に付与されます。ファイルサイズが小さい時は気付かないのですが、10分、20分ぐらいあるような動画を再生しようとすると末尾まで読んでから再生できるかどうかを判別するので、再生が開始できるようになるまでに異様に時間がかかるようになります。 そこで動画作成時にメタデータをファイルの先頭に移動させておきます。 こうする事で、ファイルサイズが大きい動画でも一瞬で再生

はじめに YouTubeやFacebookでも利用されているという噂のFFmpegは、開発が非常に活発で、ここ1年だけでもバージョン1.0から2.1まで上がっています。 ちょっと前まではFFmpegでエンコードした動画をストリーミングに対応させるのは一手間かかったのですが、今では-movflags faststartオプションを付けるだけで対応できるようになりました。（…というのも新しい機能のほんの一部で、他にもたくさんあります） ここでは、FFmpegの簡単な使い方をメモします。 内容は基本的なことですが、実運用で得たTipsもできるだけ混ぜていきたいと思います。 また、内容に誤りなどあれば、是非ご指摘頂けると有難いです。 インストール インストールについては公式サイトに丁寧な解説があるので、そちらをご参照ください。 https://trac.ffmpeg.org/wiki/Compil

iOSとの比較つき!Androidでこんなアプリ,こんな機能を作りたかったらこれを見ろ！作りたいアプリに対応するクラス、ライブラリのまとめ！iPhoneAndroidiOS by @mixiappwchr 最近Androidのほうも久しぶりがっつりやっているため、簡単ですがまとめてみました。 環境編 IDEは何を使えばいいの？ 今から始めるにはnatvieのコードとかを書かない限りAndroid Studioを使いましょう 最近ようやく1.0が出ました。 Android Studio http://developer.android.com/sdk/index.html 検証用のエミュレータが遅いよ！ iOSと違う点ですが、Androidはエミュレータの遅さに定評があります。Intel HAXMでの高速なエミュレータか、Androidの仮想環境を提供してくれるGenymotionを使いまし

サーバのボトルネックを探る サーバが重い時、主に以下の4つがボトルネックとなる。 CPU使用率 メモリ使用量 ディスクI/O TCPコネクション数 この記事では、これらのうちどれがボトルネックとなっているかを突き止める方法について書く。 ロードアベレージを見る まずはロードアベレージを見ることで、おおまかに問題を切り分ける。 ロードアベレージの確認方法はload averageを見てシステムの負荷を確認するに書いた。 ロードアベレージが高い場合 現在のホストの「1. CPU使用率」, 「2. メモリ使用率」, 「3. ディスクI/O」を疑う。 ロードアベレージが1以下であれば軽く、1〜3くらいだとやや重く、それ以上だとこれらがボトルネックの可能性が高い。 ロードアベレージが低い場合 「4. TCPコネクション数」か、リモートホストがボトルネックになっていないか疑う。 特定のホストの問題を解

What's Google Guava? Googleが開発しているOSSのjava core libraryで、Googleの多くのJavaベースのプロジェクトで使用されており、 Java 1.5 以上で使用できる。 昔、Google Collectionとして開発されていた。 Apache Commons の Lang、Collectionsなどに替わる機能を提供していて、パッケージ名を見れば大体の機能について想像がつくと思います。 com.google.common.annotations com.google.common.base com.google.common.cache com.google.common.collect com.google.common.escape com.google.common.eventbus com.google.common.hash c

TL;DR Chromeで console.profile() と console.profileEnd() を使うと超簡単にJSの実行パフォーマンスを解析できる、という事実を今日知ったのでシェアさせていただきます。 やりたいこと JSの任意の関数の実行プロファイル (コールスタックごとの所要時間) を見たい。 やりかた Google Chromeのデバッグコンソールで以下のようなスクリプトを入力して実行 (見やすくするため改行入れてますが実際には一行で)

課題 サイトをを立ち上げるときに当然のごとくSSL証明書をベンダーから購入して設置していたが、いざセキュリティ診断等でチェックしてもらうとSSLについての指摘を何件か受けてみた。なんでだろうと思いながらも、さらに最適なSSL設定は？と聞かれてそういえばあまり昔から手を入れたことなかったなと思い調べてみた SSL通信が確立するまでの概要フロー SSL通信について再度おさらい Nginxを元にしたSSLの設定 nginxのHTTPS サーバの設定を参考に、たった２行だけどSSLを考えてみる。書き方は違えどもapacheも概念は一緒のはず。

追記：openssh-7.3 以降なら ProxyJump や -J が使えます ホスト名を + で繋げることで多段Proxy接続も簡単に、がコンセプトだった本エントリの設定ですが、OpenSSH 7.3 から ProxyJump という設定が使えるようになったので、使えるなら ProxyJump を使う方が健全だし柔軟で使い勝手も良いのでそちらを覚えて帰ることをオススメします。 使い方は簡単で以下のような感じです。多段も行けるし、踏み台ホスト毎にユーザ名やポート番号を変えることも出来ます。 # 1. bastion.example.jp -> internal.example.jp ssh -J bastion.example.jp internal.example.jp # 2. bastion.example.jp -> internal.example.jp -> super-de

GitHubのHelpに記述されているSSH Keysの作成方法が僕の知っている作成方法と 微妙に異なっていたので、書いてみました。 以下の参考にしています。 Generating SSH keys - User Documentation SSH Keysの確認 既存のSSH Keysの確認をする必要があるので、以下を実行 デフォルトでのSSH Keysの名前は以下のうちのどれか id_dsa.pub id_ecdsa.pub id_ed25519.pub id_rsa.pub 現在使用している鍵の暗号強度の確認 以下のコマンドにて鍵長が2048以上かつ暗号化方式がRSA、或いはECDSAやEd25519であればOK $ ssh-keygen -l -f ~/.ssh/id_rsa.pub 4096 SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

なんかはよく使うはず。 だが、ちょっとした関数の使い分けでデバッグ一つもしやすくなる。 なのでほんの少し紹介。 ※以下は全てGoogle Chromeでの実行結果です console.error 赤い！よくあるエラーメッセージ エラーとみなす箇所に是非

Spring ★431 手軽にアニメションが行えるライブラリです。SrotyBoardからアニメションの設定を行えるのがいいですね。 インストール Xcodeに手動でドロップします。 サンプルコード アニメションのコードはとってもシンプルです。 ２６種類のアニメションパターンを設定できます。 shake pop morph squeeze wobble swing flipX flipY fall squeezeLeft squeezeRight squeezeDown squeezeUp slideLeft slideRight slideDown slideUp fadeIn fadeOut fadeInLeft fadeInRight fadeInDown fadeInUp zoomIn zoomOut flash デモ デモアプリでアニメションの動きを確認できます。 design+

bugspotsはgoogleが開発した、バグ予測アルゴリズムをオープンソースとして開発されたツールです。 細かい説明は後にまとめますが、実際に使ったのを見るほうが分かりやすいので早速使ってみます。 実際に使ってみる 1.bugspotsをgemでインストール 3.結果を見てみる このHotspotsの下に出力されている左の数値がバグが起こりやすい度合いを表すスコア、右が対象のファイルになる。 メチャクチャ簡単に導入できるので、 リファクタやコードレビューなどで目星をつけるという意味では有用なツールな気がしました。 背景の説明 googleでは、チェックイン前にユニットテストやコードレビューが行われているが、コードが大量になってくると、ユニットテストやコードレビューをすり抜けたバグも少なからず発生してします。 googleではこの問題に対処するために、独自の「バグ予測アルゴリズム」を採用し

やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度