開発環境を構築したり、ツールを導入したりするのに、パッケージ管理システムはよく使われる。よく目にするものでも、Homebrew・yum・apt-get・npm・pip・gem...などいろいろある。 パッケージ管理システムはエンジニアを面倒な作業から開放してくれる。コマンドひとつで、オンラインからパッケージを探せて、ダウンロードでき(リポジトリの機能)、パッケージを追加したり削除したりもできる(インストーラの機能)。さらに、パッケージに必要な別のパッケージを同時にインストールしてくれる(依存関係解決機能)。たとえば、Ubuntuでhttpieが欲しいと思ったら、次のコマンドを打ってしばらく待てば使えるようになる。 パッケージ管理システムとしてのDocker ところで、話題のツールにDockerがある。Dockerはインフラ構築の文脈で、開発環境や本番サーバのプロビジョニングして配置するよう

第1回 tubularプラグインを使用して YOUTUBEの動画をブラウザの背景全体に再生させる YouTubeにアップロードした動画をブラウザの背景全体に表示させてインパクトのあるページをtubularプラグインを使用して作成しました。また今回はスマートフォンで閲覧の場合には通常の動画として見れるように対応しました。背景に動画を流したい場合におすすめのサンプルです。 解説：（有）ムーニーワークス　ハヤシユタカ 最近Webサイトでブラウザの背景全体に動画を配置してインパクトのあるサイトを見ることがありましたので2回に分けて、YouTubeにアップロードした動画や自分のサーバー上の動画をvideo要素を使用して配置するサンプルを作成してみようと思います。今回はその前半の1回目です。 まず初回はYouTube動画を背景に表示させるjQueryの「tubular」プラグインを使用してインパクトの

第1回では、Serverspecの概要とテストコードを書くまでの事前準備についてご紹介しました。第2回では、より具体的な環境を例として、実際に即したServerspecのテストコードの書き方をご紹介します。テストコードを記述する際のポイント等をまとめ、テストコードの記述をスムーズに実施できるようになることを目的として解説します。 LAMP構成のシステムのテスト 具体的なシステムとして、LAMP（Linux、Apache HTTP server、MySQL、PHP）構成の環境を想定し、この環境に対するテストコードの一例を紹介します。 LAMPの構成を採るシステムの例として、今回は統合監視ソフトウェアのZabbixを稼働させるための環境を取り上げます。LAMP環境のベースとなるLinuxは、CentOS 6.5を想定しています。 稼働状況のテストとして、大まかに以下の4つの部分に分けて各部分の

「Vide」 はWebページの背景に動画を表示するjQuery プラグインです。最近よく見かける、動画上にオーバーレイでコンテンツを表示するプロモーションサイトが簡単に制作できます。 minify(圧縮版)が 3.6KBと軽量で、Google Chromeなどのモダンブラウザーと、Internet Explorer 9以降に対応しています。iOSとAndroidでは動画のインライン再生ができないので、動画の代わりに静止画を表示します。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Vide をGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 Videは、パッケージマネージャーの「bower」でもインストールできます。b

WebStorm 8とSpy-jsによるJavaScriptのトレースについてはこちらですでに解説しましたので、今度は噂のWebStorm 9の新機能、「Spy-js for Node.js」を試してみようと思います。と言ってもほとんどやることは変わらず、Webアプリケーションの方で出来たことがNode.jsでも出来るよというだけのことです。 この記事の作成にあたってはWebStorm公式ブログを参考にしました。 ※この解説で使用したWebStormは WebStorm 9 EAP WS-138.1495です。正式アップデートに向けて今後変更される可能性もあるので注意してください。また、WebStorm 9 EAPの使用も自己責任でお願いします。 サンプルプロジェクトを作る 今度はNode.jsのアプリケーションを作るので、簡単に済ませるために新規プロジェクトを「Node.js Expre

こんにちは！　LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト

来たる8/23(土)にLL Diverというイベントでmozaic.fm出張版があって、そこで適当にTypeScriptの何かを話す予定なので、ECMAScript 6の予習をしていきます。 司会のJxck先生は知識量豊富なので予習していかないとボコられて恥を晒して死んじゃうからね！ あんどうやすしさんは優しいと思うんだけど！！ 参考資料 わかめのECMAScript6のはてブ ECMAScript 6のドラフト(ログ) ECMAScript 6で提案されたもの ECMAScript 6 compatibility table es6-shim ECMAScript6をまるっと学ぶ。重要用語とか、仕様策定の進め方とか、新機能とか。 traceur-compiler入門 ECMAScript6をまるっと学ぶ。はすごい参考になったのでぜひ読むべきそうすべき。 この辺りをガシガシ読んでこの記事を

先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます（チートシートでは「c」がついています）。

アプリ開発者の皆様 投稿サイト 『iPhonePLUS』 ですが、 2021年11月30日をもって閉鎖させて頂くことになりました。 ご参加の際に頂きました個人情報ですが、サイト閉鎖をもって消去いたします。 長きにわたりご支援を頂きましたことに、関係者一同、心より御礼申し上げます。 今後も弊社発行の各媒体への変わらぬご愛顧と、一層のご支援ご協力を賜りますよう、 宜しくお願い申し上げます。

近年、ソフトウェア開発を取り巻く環境が急激に変化してきています。ネットワークの整備や、コミュニケーションツールの進化に伴い、リモートワークやインターネット上での協業も盛んに行われるようになってきました。チームメンバー全員の住んでいる国が違う、といったこともあるかもしれません。 しかし物理的に離れた環境で働くと、今まで対面で行っていたコミュニケーションを別の手段で代替しなければなりません。SkypeやGoogleハングアウトなどのビデオ通話、HipChatやSlackなどのチャットアプリを利用することで仕事上必要なコミュニケーションは取れるようになりますが、ソフトウェア開発に関わる状況確認は別のツールを使う必要があります。 特にオペレーションは、いつ、誰が、どのような対応をしたか把握していたいですよね。 このような課題を解決する一つのスタイルとして、「ChatOps」があります。ChatOp

エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな

「アクセスが増えれば増えるほど、コンテンツ配信は高速になり、サーバーの負担が分散されます。ユーザーが特別な操作をする必要もありません」――。利用者が増えればサーバーの負荷は当然高まるはずだが、一体どういうことなのか。 そんなサービスを可能にするのが、P2P（ピア・ツー・ピア）技術を利用した配信プラットフォームを提供するMist Technologies（ミストテクノロジーズ）だ。設立は昨年7月。東京大学大学院の学生が立ち上げた私設ラボ「Intellectual Backyard」から生まれた会社で、田中晋太郎CEO(24)は大学院でネットワークやサーバー、クラウド、データセンターの運用などを研究している。オフィスも東大の本郷キャンパス内にあり、メンバーは4名のエンジニアで構成されている。 P2P利用して端末同士がコンテンツやり取り

フリーランスエンジニアのマッチング市場って、かなり先進的で面白いんですよ。 週2日から働けるハイレベルエンジニア向け「PROsheet」 たとえば「PROsheet」。こちらは週2日から会社勤めができるという、未来的なマッチングサービスです。どちらかというとハイレベルなエンジニア向けで、たとえば「週3日で月収36万円」なんて仕事が掲載されています。 特徴は「人力」でマッチングしていくこと。専属のエージェントがクライアント企業、エンジニアの相性を見ながらマッチングしていきます。以前営業資料を見せていただいたんですが、すごい人たちがすごい企業で働いていてびっくりしました。 PROSheetの運営者・中川さんは鼻息荒く「新しい働き方を作るんです！」と語っています。平日9時5時で一つの会社に働く、という働き方は、30年後にはマジョリティではなくなっていくのかもしれませんね。 エンジニアナビ ギーク

SublimeTextみたいに複数カーソルがあったら便利ですよね？ なぜvimでは使わないんですか・・・ なんて便利なんですか・・・。 Installation

Tweet 第1回では、カーネルパニックが発生した場合の情報取得方法として、 kdump を紹介しました。今回は、カーネルパニックまで至らない場合の情報取得方法として、シリアルコンソールを紹介します。 シリアルコンソールとは、カーネルが出力するメッセージを取得するための、比較的信頼できる方法です。 平常時であれば、カーネルが出力したメッセージは syslog デーモンによって /var/log/messages に保存されるようになっています。そのため、カーネルが出力したメッセージを確認したい場合、 /var/log/messages の内容を確認すれば済みます。 では、シリアルコンソールが役に立つのは、どのような場合なのでしょうか？それは、シリアルコンソールと syslog の動作方法の違いが意味を持つ場合です。 syslog デーモンは、カーネルが出力したメッセージを読み出して /va

フィンランドDigiaのQt Projectは8月19日、WindowsやMac OS X、Linuxなどで動作するQt向け統合開発環境（IDE）最新版「Qt Creator 3.2.0」をリリースした。テキストエディタ、C++コードモデルなどで細かな機能強化が加わった。 Qt CreatorはC++やECMAscript（JavaScript）、QMLなどに対応するQt開発者向けの統合開発環境（IDE）。QtベースのUIやアプリケーションを開発できる。コードエディタ、デバッガー、GUIデザイナなどの機能を持ち、BazaarやClearCase、CVS、Git、Mercurial、Perforce、Subversionなどのバージョン管理システムにも対応する。WindowsやMac OS X、Linuxに対応するクロスプラットフォームアプリケーションで、AndroidやiOS、QNX、Wi