デブサミ2014、講演関連資料まとめCodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Photoshop Generatorプラグインの作り方
改めてGeneratorとは 前回の冒頭では概念的にGeneratorの概要を書きましたが、端的に言うとGeneratorはiPhone/AndroidやPhotoshop以外のアプリケーションからTCP/IPを利用してPhotoshopへリモートアクセスを可能にするnode.jsサーバーです。 従って、Generatorプラグインはnode.jsアプリケーションということになります。Photoshopと接続して状態の変化をイベントとして探知できるので、夢が広がります。本稿では、プラグイン作成の基本的な作法を紹介していきたいと思います。 なお、本稿で使用するPhotoshop CCは、Adobe Creative Cloudの無償メンバーシップへの登録で30日間の体験版が利用可能です。 コアライブラリの準備 まず第一にnode.jsをインストールしている必要があります。まだインストールをさ
「Selenium2」のインストール手順と初めの一歩
対象読者と環境 Webブラウザを使ったテストを自動化するOSSのツール「Selenium2（WebDriver）」のインストール手順と基本的な使い方をご紹介します。想定読者は、テスト自動化に興味のあるプログラマーです。 SeleniumにはSelenium IDEというブラウザ操作を記録できるツールがあり、SeleneseというSelenium1に対応したコマンドをHTML形式で保存します。これによってノンコーディングでテストスクリプトを作成することができるのですが、WebDriverやプログラミングによる効率化の恩恵を受けることができません。本記事はSelenium IDEを活用しながらWebDriver使ったテストスクリプトをJava（JUnit）形式で書いていくための手引きとなっています。 今回筆者が使用した環境は以下のとおりです。 OS：Windows 7 Java：1.7 Fir
「D3.js」を使ったデータビジュアライゼーション
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。 D3.jsとは D3.jsは、Mike Bostock（mbostock）が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます（2013/10現在）。ライセンスは修正BSD
OpenGLを使った地図描画エンジンの作り方（1）
初めに 従来のYahoo！地図アプリは、社内ではラスタ形式地図アプリと呼んでおり、サーバ上で生成された地図タイル画像（ラスタデータ）を端末側で貼り合わせることで、地図を表示していました。 しかし、画像でやり取りを行うために、次のようなデメリットもありました。それは、通信の帯域を多く占有したり、地図の回転をする場合に地名などの文字も回転してしまい、読みづらくなったりする点です。 そこで、今回フルリニューアルしたAndroid版Yahoo！地図アプリでは、サーバからベクトルデータを受信して、端末側で地図を描画するベクトル形式地図アプリに移行しました。 ベクトル形式地図アプリに移行したAndroid版Yahoo！地図アプリは、従来版と比べ、以下のような点がメリットとして挙げられます。 通信の軽量化 回転拡大縮小のスムーズ化 3Dなど新しい地図表現の追加 ベクトル形式地図アプリ ラスタ形式のデータ
HTTPリクエスト数削減テクニック2： CSS Sprite編
はじめに こんにちは、クラスメソッド株式会社の野中です。 HTTPリクエスト削減テクニックの紹介に入り、前回の『リクエスト数削減テクニック1：インラインイメージ編』では、インラインイメージについて紹介しました。本記事では「CSS Sprite」の基本的な知識と使い方、使いどころについて解説します。すでに定番のテクニックとなっていますが、何となく使っていることが多いと思います。初学者の方にも理解していただけるよう詳しく解説します。 対象者 対象者は主にコーダー、フロントエンドエンジニアです。 デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 CSS Spriteとは Webサイトではアイコンやナビゲーションなどに多くの画像が使われ、サイトによっては20個30個とたくさんのアイコンが使わ
Mochaを使ってJavaScriptのテストをブラウザで実行してみよう
対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 JavaScriptのテスティングライブラリの分類 JavaScriptには、テストを記述するためのライブラリが多く用意されています。ライブラリには、大きく分けて「テスティングフレームワーク」と「アサーションライブラリ」があります。まずはこの2種類の違いについて説明します。 テスティングフレームワーク テストを記述する関数群を提供し、それらの関数を使って書かれたテストの結果を判定、集計した上で結果を表示する機能を持ちます。ブラウザでのテストの場合、ブラウザ上でグラフィカルにテスト結果を表示することもありますし、サーバサイドのJavaScriptであるNode.js向けにはコマンドラインで実行し、結果を表示する機能も持ちます。 アサーションライブラリ テスティングフレームワークは、テスト
モダンPerl入門増補改訂版（仮）
※本ページは『モダンPerl入門 増補改訂版（仮）』の特設サイトです。商品紹介のほか、電子書籍版の早期ディスカウント販売（β版を先行提供）などを予定しています。今後の更新情報は「CodeZine Books」のFacebookページなどで配信していきます。 本書の内容 本書は、Perl言語でプログラミングする上で、筆者の経験を基に日々の仕事で使えそうなティップスやベストプラクティスを集めた本です。基礎知識は身につけている読者を想定して、Perlの基本文法やプログラミングの基本は意図的にカバーしていないため、プログラミング初心者にとって本書は難解かもしれません。 2009年に刊行した初版では、いまだに根強い「Perl＝CGI」「Perl＝オブジェクト指向ができない」「Perl＝開発が止まっている」といった間違った思い込みを正したいという当時の筆者の思いから、筆者が使っている最新ツールやモジュ
JavaScriptテンプレートエンジンJsRender 基本のキ
はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード
Web APIの基本的な使い方
Android端末の通信機能と、国内外のさまざまなサイトで提供されているWeb APIを活用すれば、楽しいアプリをかんたんに作ることができます。この連載では、多種多様なWeb APIの紹介と、そのAPIを利用したサンプルアプリの制作を通じて、Androidアプリの実践的な開発を解説します。第2回目の本稿は、AndroidアプリからどうWebAPIにアクセスすればよいのかを、具体的なソースで解説していきます。 対象読者 Androidアプリケーションの開発を始めたい方で、JavaとEclipseの基本的な知識がある方を対象とします。 Web APIを利用するには 前回説明したように、AndroidアプリからWeb APIを呼び出す場合、HTTP通信を行うため、メインのスレッドとは別のスレッドで、非同期に処理するようにします。 Androidアプリで、スレッドを作成して非同期処理をあつかうには
Tizenアプリの開発環境構築と実行
TizenをはじめとするWebベースのスマートフォンOSの登場で、スマートフォンアプリ開発のあり方が今後大きく変わっていくかもしれません。Tizenは、今冬に日本でも端末の発売が予定されています。本連載では、HTML5関連技術を使ってTizen向けのスマートフォンアプリを開発するための手法を、豊富なAPIの紹介とサンプルアプリの制作を通じて先取りしていきたいと思います。 はじめに 第1回目の本稿は「Tizenの説明」と、開発するための準備として「開発環境のインストール」および「アプリ実行」について解説します。 対象読者 jQueryやjQuery Mobileなどを利用したスマホサイトの開発経験があり、スマホアプリの開発にも興味がある方を主な対象としています。また、AndroidやiOS向けのアプリ開発経験者の方にも興味を持っていただければと思っています。 「WebベースOS」Tizen
Webサイト高速化に必要な画像形式の基礎知識 (1/3)：CodeZine（コードジン）
はじめに こんにちは、クラスメソッド株式会社でWebを担当している野中です。前回はWebサイトの高速化を行うにあたり知っておきたい「HTTPの仕組み」について紹介しました。 HTTPの仕組みについて何となく理解できたでしょうか？ この連載で紹介していく高速化テクニックの解説を理解するために必要ですので、都合の良い時に読んでおいてください。 「いつ読むか？ 今でしょ！」なんてね（笑） もう古いですね。 対象者 この記事では、特にWebデザイナーを対象としています。 フロントエンドエンジニアの方はWebデザイナーから受け取ったPSD（Adobe Photoshop Data）ファイルや、AI（Adobe Illustrator Data）ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。 Webデザイナー フロントエンドエンジニア Webディレクター Web担当者 ビ
jQueryで地震分布図を作成しよう
地理情報を含むデータを表現する場合、地図上で表すことで視覚的にその情報を認知しやすくなります。例えば、車のナビや道路標識などでは、単純に方向や座標だけを示すのではなく、地図上に表現することで、見た人が直感的に認知できるようにしています。本稿では、jQuery対応コントロール集である「Ignite UI 2013 Volume 1」のigMapというコントロールを用いて、地震分布図を作成していきます。 対象読者 JavaScriptの経験者、地図アプリに興味のある方。 必要環境 IDEは特に必要がなく、コード編集用のエディタと動作確認用のブラウザがあれば良いです。 今回使用するigMapコントロールは、jQuery UIウィジェットの一つであり、jQueryライブラリとjQuery UIライブラリに依存します。そのため、対応ブラウザについてもjQuery UIに依存します。 プログラム実行時
リアルタイムWebを構築しやすくする「Socket.IO」とは
本連載では、このTech-Sketchから「コレは！」というテーマをピックアップし、加筆修正して皆様にお届けいたします。 リアルタイムWebとSocket.IO 栄えある連載第1回は、リアルタイムWebとSocket.IOについてお届けいたします。Tech-Sketchに掲載した元ネタはこちらです。 JavaScriptとDynamic HTMLによる「動的に表示内容が更新されるWebサイト」は、JavaScript内から非同期にサーバへ接続しデータを取得する技術、いわゆるAjaxが利用できるようになったことを皮切りに、爆発的に広がりました。Google Mapsなどがその代表例です。 このGoogle Mapsは、表示する場所や縮尺を変更するといった「利用者の操作」を契機として新しいデータをサーバへ取りに行く仕組みになっています。そのためサーバ側でデータが変更されたとしても、次にデータを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アドビ、Web制作やツールの使い方を基礎から学べる新サイト「Adobe Pinch In」を公開
サイバーエージェント、自社のスマホ向けアプリ開発ツール「beez」「adbkit」をOSSで公開
CSS拡張メタ言語「Sass」の概要と導入手順
ランサーズ、フリーランスを支援する総合サービス「フリーランストータルサポート」を開始
本当に!? Winアプリの開発手法でWebアプリ開発 「Visual WebGui」を緊急チェック
データベース設計の煩雑な作業を自動化する「ERMaster」