さて。導入も簡単なのでサクッと紹介 導入手順 手始めに これらのサービスで使うメールアドレスだけは準備しましょう。 Gmailなんかでいいでしょう。え？増やしたくない？ YourAdress+ForProject@gmail.com とかもうエイリアス使えばいいよ。 Bitbucket導入 https://bitbucket.org/ ここに行くともう書いてありますね。 Get started for free free。なんていい響きなんでしょう。 ここクリックして登録しましょう！するとすぐに使えます！イケメン！ Wiki、IssueTracking導入 まずはRepositoryを作りましょう。なんでもいいです。 そして設定を開きます。 左バー -> 設定アイコン -> Wiki設定 Wikiを使用しないから自分で使いたいモードに。ここでは非公開Wiki 左バー -> 設定アイコン -

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

HTML5でクロスプラットフォームなデスクトップアプリケーションができてしまう、Electron(atom-shell)。 SlackのWindows版なんかでも使われているという噂のElectron。 Quick stratを日本語訳してみました。Have Fun!! Quick start イントロダクション ElectronではリッチなネイティブAPIを持ったランタイムを提供することでピュアなJavaScriptでデスクトップアプリケーションの開発を可能にします。Webサーバーの代わりにデスクトップアプリケーションにフォーカスしたio.jsランタイムであるといえばおわかりになるかもしれません。 ElectronはJavaScriptをGUIライブラリにバインディングするものではなく、ElectronはWebページをGUIとして使用します。ですので、ElectronはJavaScrip

webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G

初めまして。 現在クラウドファンディングサイトを作ろうと思い、ＰＨＰの勉強をしています。（まだ想像もつきませんが・・・。） プログラミングの勉強方法をネットで検索してみると、「他の人が書いたソースコードをとにかく見ろ！」という話が結構出てくるのですが、htmlやcssならともかく、phpなどのサーバーサイド言語はソースが見れません。 皆さんはいつもどこで他人が書いたソースを手に入れているのでしょうか？ すごく初歩的な事かもしれませんが、良ければ教えてください。 またプログラミングの勉強をしていく中で、お勧めのやり方等あれば、それも書いていただけると非常にうれしいです。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ノンプログラマーがはじめてWebサービスを作ってみた記録です。 2016.3.28 追記: リリース1年後について書きました。 はじめてのOSSリリース記 〜なぜ無料でソースコードを公開するのか？ 自己紹介 趣味でたまにプログラムを書く程度のノンプログラマー。 本業は SHIFT（ http://www.shiftinc.jp ） という会社でテスト自動化エンジニアをしています。 20代最後の年に何か新しいことを！と思い立ち、勢いでWebサービスを作ってみました。 作ったもの Chibineko - 世界で最もシンプルなテストツール h

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

フロントエンドエンジニアにとって、JavaScriptは今や開発の中心にあると言ってもいいと思います。 JavaScriptに対していまいち自信のない人向けに、おすすめしたい本をまとめてみました。 これで、日本のJS界隈がもっと賑わって、仲間が増えると嬉しいです(今でもかなり賑やかですが)。 基礎 JavaScript本格入門 JavaScriptの本の中では一番易しいんじゃないかな、と思います。 これ以上に読者ターゲットのレベルを落とした本は、解説が不十分だったり、レシピ集のような側面が強かったりで、勉強には向いていません(網羅的でないということ)。 この本は解説のみで、深い仕様やテクニックには踏み込みません。それだけに読みやすく仕上がっていると思います。 この本でJavaScriptに興味をもつことができたら、よりディープな本に進んでみるといいと思います。 パーフェクトJavaScri

PHPはいかにして拡張されるか PHPは従来、C言語で書かれたExtensionによって拡張されて来ました。 しかしPHPの開発者にとってCのハードルは高く、またCの開発者も明示的なメモリ管理に難儀してきました。 それを解決するのがZephirというPHP Extension開発専用の言語です。 PHPを拡張する言語、Zephirとは http://zephir-lang.com/ Zephir(Zend Engine PHP Intermediate)は現在、Phalcon開発チームが並行して開発を進めている静的／動的言語です。 静的に変数型を宣言するのが標準的な記法ですが、型推論の機能を利用することも可能です。 2014年12月末現在での最新バージョンは0.5.7で、安定版に達していないものの、既に実用レベルのExtensionをPHPとほぼ変わらぬ記法で開発できるようになっています。

ちょっと趣向を変えてJavaScriptの情報をどうやって集めているかという話を書きたいと思います。 使っているもの Twitter RSS(feedly) Pocket はてブ TwitterはただフォローしてTL見ていたり検索してたまに見ているだけでリストを作ったりはしてなくて暇な時に見ている感じです。 RSSはこれから紹介するようなサイトとかこの人のブログ面白い！というものだけを登録しています。未読が100件増えると消化する気がどんどんなくなっていくので...。 PocketはTwitter、RSSで気になったものを後で読むためにとりあえず突っ込むのに使っています。 こうすることでRSSはすぐに終わるので、その後で時間があればPocketで読みます。 Pocketに溜まった記事はちょっとした合間に読んだりしていて、たまにまとめて読んだりして消化しています。 今見ると20件くらいあるの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? エンジニア組織を強くするための本を出版しました Qiitaでエンジニアリングをめぐる様々なコミュニケーションの問題とその解決策や考え方を書いてきた。それらの背後にあるエッセンスをこの度書籍として出版するに至りました。 エンジニアリング組織論への招待 ～不確実性に向き合う思考と組織のリファクタリング この書籍は、エンジニアリングを「不確実性を削減する」という第一原理で捉え直し、様々なエンジニアリングとその間のコミュニケーションをめぐる現象を説明していくものです。 はじめに 今年、書いた幾つかの記事のタネ本であったり、新卒教育の際に参考書籍

はじめに 一昨日、FIFA15 でサイドバックが前線に放ったフィードが直接入って80m強の超ロングシュートとなって困惑しました。 さて、話は変わりますが、2014年12月時点の TIOBE Programming Community Index によると、昨年と比較して最もランクアップしているプログラミング言語は、Visual Basic なんですね。 そんなプログラミング言語上位20位ですが、Webアプリケーションを構築するにあたって、どの言語を採用するかというのと同じく悩ましいのがどのフレームワークを採用するかということ。 フレームワークの選定基準はアプリケーションの要件はもちろんのこと、環境や開発者、その他にも様々な条件や制約を踏まえつつ、フレームワークの特性も踏まえて適切な選択をする必要があるものです。 そして、今年も各言語において様々なフレームワークにおいて動きがありました。人気

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショ

メリット メンテナンスコストがほぼゼロ ほぼ何もしなくても勝手に動いてくれます。 個人的な体感値だとAWSでEC2やロードバランサで環境を組んだ場合と比べると1:100ぐらいの手間無し感です。 デプロイがコマンド一発 デプロイは基本的にgit push heroku masterでHerokuにpushするだけです。(Railsのマイグレーションを行う場合はheroku run rake db:migrate も必要) 自分でデプロイスクリプトを頑張って書かなくてもいいので楽です。 スケールアウトがコマンド一発、もしくはGUIで非エンジニアでも操作可能 Herokuはdynoという独自のWebサーバプロセスの単位で操作するのですが、heroku ps:scale web=3でプロセス数を変更出来ます。 Herokuサイト上のダッシュボードからバーをスライドさせる事によって1〜100までdy

MacBookAirを買ったらすぐに入れたいアプリ BetterTouchTool //トラックパッドを拡張するために役立つアプリ。 Google Chrome //インターネットブラウザ Growl //通知を拡張するアプリ Kopypasta //クリップボードをバックアップしてくれるアプリ Quicksilver //アプリにショートカットキーを割り当てることができるアプリ WindowFlow //Windowsユーザーにお馴染みの[Tab+Alt]でウィンドウを切り替えを使えるようにするアプリ XtraFinder //Finderを拡張するアプリ Xcode //開発環境を提供するアプリ TinkerTool //Macの隠し機能を簡単に有効にするアプリ VirtualBox //仮想環境を提供するアプリ Skitch //スクーンショットの撮影と画像の編集を行うアプリ Das

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

もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe