タグ

ブックマーク / tsuchikazu.net (10)

  • 新人研修で「jQueryのその先へ」の話をした | tsuchikazu blog

    jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜 from Kazuyoshi Tsuchiya ペパボでは、新卒エンジニア向けにメインとなる研修とは別に、週2回に1時間ほどエンジニアでも、デザイナでも、ディレクターでも誰でもいいから、自分が教えたいものを教える。という時間があります。そこで、Webフロントエンドの話をしたので、その資料を公開します。 GoogleMapが登場したときの衝撃(当に当時は感動したなぁ…)から始まり、jQueryの登場。そして、その後の複雑化していくフロントエンドについて 言語(ES, AltJS) ツール(タスクランナー, パッケージマネージャ) アーキテクチャ(MVC/MVVM/Component指向) の3つにわけて、登場する背景や進化していく過程を伝えるようにしました。それぞれを詳しく。というよりは、ざっくりと全体感を伝える気持ちで。

    新人研修で「jQueryのその先へ」の話をした | tsuchikazu blog
    inouetakuya
    inouetakuya 2016/12/23
    新人研修にちょうどよい感じでわかりやすくまとまってた
  • Let's Encryptの証明書をnginxに設定してhttps化した | tsuchikazu blog

    今頃ではありますが、このブログをLet's Encryptの証明書を使って、https化してみました。 Let's Encryptとか、ACMEプロトコルってなに? Let's Encryptは、無料で証明書を発行してくれるCA(Certificate Authority:認証局)です。日で有名なCAといえば、GlobalSignやシマンテック(旧ベリサイン)でしょうか。 CAが発行する証明書の種類として、以下の3つがあります。 DV (Domain Validation) ドメインの所有を確認して発行 OV (Organization Validation) 組織の実在の確認をして発行 EV (Extended Validation) より厳密な実在確認をして発行 Let's Encryptが発行できる証明書は、DVの証明書のみです。これは、証明書を発行したい人が、当にそのドメインの

    Let's Encryptの証明書をnginxに設定してhttps化した | tsuchikazu blog
  • 9isというサービスを開発した話 | tsuchikazu blog

    去る1/9は一休さんにちなんで、クイズの日と呼ばれているようです。そんなクイズの日に9is(クイズ) - みんなでもっとおもしろくできるというサービスをリリースしました。これはペパボで毎年開催している、お産合宿という名の開発合宿で開発したものです。お産合宿後も、誰かがやる気が高まった時にイイ感じに進める。というゆるい感じで開発を進めていましたが、晴れて1/9に正式リリースということにしました。 リリースといっても、特別何もしてないんですが、これを機にサービスの紹介をします。 9isとは 某感謝祭風のクイズができるサービスです。自分でクイズを自由に作れて、参加者を集いリアルタイムに回答・早押しランキングを表示することが出来ます。 なぜWebアプリ? 今なぜ、ネイティブアプリではなく、Webアプリを作ったのかというと、ブラウザやフロントエンド周りの技術の進化によって、ネイティブにWebが近づこ

    9isというサービスを開発した話 | tsuchikazu blog
  • Advent Calendar 2014のフロントエンド周りまとめ | tsuchikazu blog

    フロントエンド周りの技術は色々ありすぎて、どこから手をつけていいかわかりません。 Advent Calendarで人気の記事を見れば、今何が人気なのかがわかるかなと思い、まとめてみました。 2014年のAdvent Calendar一覧 - Qiitaから、フロントエンド周りに関係ありそうなものをピックアップし、総はてブ数でソートしました。(総はてブ数は 2015/01/03 15:00 時点)。それぞれで、人気トップ5の記事のリンクも貼っています。 ピックアップは、手動で適当にしたので、抜け漏れあるかもしれませが、ご了承ください。下に参考までに2013のAdvent Calendarも記載しています。 2014のAdvent Calendar VirtualDOM Advent Calendar 2014 (1388 users) 仮想 DOM が素晴らしいのはわかってるけどリアルDOM

    Advent Calendar 2014のフロントエンド周りまとめ | tsuchikazu blog
  • PhantomJSと各ブラウザのJavascriptエンジンまとめ | tsuchikazu blog

    JavaScriptの単体テストやE2Eテスト。書いてますかー? それらのテストをCIで実行するとき、Headless ブラウザとしてPhantomJSを使っている人が多いと思います。私もそのうちの一人で、仕事でも使っています。 PhantomJSとは、Scriptable Headless WebKitと説明されており、WebKitベースのブラウザです。 WebKitはただのレンダリングエンジン。という認識だったため、PhantomJSのJavaScriptエンジンはなんだろう?なんでJavaScriptが動いているんだろう?という疑問が沸き起こり、色々調べてみたのでまとめてみます。 JavaScriptエンジンとは? JavaScriptエンジンの役割は、JavaScirptを解釈して実行することです。 例えば、ECMAScript6の機能が使えるブラウザがある。ということは、そのブラ

    PhantomJSと各ブラウザのJavascriptエンジンまとめ | tsuchikazu blog
  • 2015年3月のJavaScriptトピック | tsuchikazu blog

    今年の1/4が終わってしまいました。3月も色々ありましたね。 さて、私の独断と偏見による3月のJavaScriptトピックを紹介します。 ng-conf & ng-japan ng-confが3/5〜3/6にソルトレイクで、ng-japanが3/21にサイバーエージェントで開催されました。 主なトピックは、近々リリース予定のAngular1.4と、次世代のAngular2についてです。(近々リリースすると言い続けているAngular1.4は、一体いつリリースされるんでしょうか) 中でも興味深かったのは、Angular2で導入が予定されていたAtScriptがTypeScriptに統合されることです。 前からTypeScriptチームとAngularチームが協力している話はありましたが、AtScriptの機能であったアノテーションなどがTypeScriptに入ることになり、AtScriptと

    2015年3月のJavaScriptトピック | tsuchikazu blog
  • 2015年2月のJavaScriptトピック | tsuchikazu blog

    この前1月が終わったと思ったら、もう2月が終わってしまいました。今年の進むスピードは、近年でもNo.1な感じがしています。 さて、私の独断と偏見による2月のJavaScriptトピックを紹介します。 React Canvas FlipboadがReact Canvasを発表しました。Canvasに描画することによって、60fpsでいい感じにアニメーションするスクロールを実現したそうです。 一覧表示はもちろんすごいのですが、個人的には画面遷移であるとか、メニューボタンやメール送信ボタンなどを押した時の動きが、まるでネイティブアプリのようになっていることに、ものすごい衝撃を受けました。 ReactAngularや、その他もろもろJS界は動きが激しくなっていますが、それらが目指すものの一つが、このようなネイティブアプリのようなUIのなのかなーと思っています。railsなどが得意としている古き良

    2015年2月のJavaScriptトピック | tsuchikazu blog
  • JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog

    昨年のAdvent Calendarを眺めたり、JS周りの記事を見ていると、RequireJSとか、CommonJSとか、AMD、Browserify、webpackあたりが、同じような文脈で登場するんですが、それぞれ何を指しているのかよくわからなかったため、今更ながらまとめてみます。 前提 小規模にしかJavaScriptを使っていないWebサイトでは、jQueryを使ってDomイベントで色んな処理をして、Domに反映させる。というような処理が、ごちゃっとまとめて書くことが多いかと思います。ごちゃっととは、特にDomにしか情報を保持していない状態を指していて、イメージとしてはこのようなコードです。 $(function() { # イベントハンドラ $("#btn").on("click", function(){ $.ajax({ url: "api/resources", dataT

    JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog
    inouetakuya
    inouetakuya 2015/09/23
    browserify と webpack について調べていてこの記事にたどり着きました。きれいにまとまっている
  • Google Analyticsデータ取得Gem「Garb」の使い方 | tsuchikazu blog

    最近、色々な数値を社内のIRCに自動投稿するツールを作るのにハマっています。投稿している数値とは、前日の売上とか、契約数とかですね。メールでも送信はされていますが、読んでくださいと言われても、埋もれて読まないことも多く、みんなが気軽に読める場所へアウトプットするのは結構便利です。さらに今回Google Analyticsからも数値を拾ってみましたので、その紹介です。 Google Analytics API用のgemとして、「Garb」があります。RubyGemsに登録されている家のGarbはvigetlabs/garbなんですが、残念ながら2011年12月のversion 0.9.1を最後に更新が止まってしまっていて、今(2012/11)は動きません。issueを見ると、俺のを使えよ!というコメントがありますので、Sija/garbversion 0.9.7を使います。 普通に $ g

    Google Analyticsデータ取得Gem「Garb」の使い方 | tsuchikazu blog
  • 30歳エンジニアの個人的な反省とこれから | tsuchikazu blog

    これはPepabo Advent Calendar 2014の21日目の記事です。 昨日は@getsukikyuさんの野菜 - ロマネスコに見る幾何学でした。 明日はnezumi650さんです。 もう年末で、みなさん1年を振り返り、評価の面談などが実施されている時期ではないでしょうか。 今日は、Pepabo Advent Calendarに書くことではないかもしれませんが、個人的な反省点と来年に向けてやっていきたいことをまとめていきたいと思います。 ペパボのエンジニア評価制度について、おいちゃんがAdvent Calendarに書かれていて(ペパボのエンジニア評価制度を、社内の一般エンジニアはどうみているのか? - 彼女からは、おいちゃんと呼ばれています) この記事でいう一般エンジニアでの視点になります。2年半前に新卒で入ったSIerからペパボに転職し、3月で30歳になります。 反省するこ

    30歳エンジニアの個人的な反省とこれから | tsuchikazu blog
    inouetakuya
    inouetakuya 2014/12/22
    "それを選ぶ軸としては、社内に出来る人がいない、これをやったら評価されるのでは?という邪な気持ちは一旦置いておいて、とりあえずやりたいこと1つに集中してみようかと思っています。それが結果的に他の人よりも
  • 1