サーバサイドHTMLテンプレートからの脱却のススメ
PHPのSmartyやフレームワークが提供しているHTMLのViewエンジン（LaravelのBladeなど）、RubyのERBのようなHTMLテンプレートを使ったWebシステムでは、こんな問題に遭遇します。「HTMLのデザインや文言をちょっと変えるくらいすぐにできないものか」「デザインやUIをリッチにしたいが、PHPやRubyなどサーバ側の言語が分からないから直せない」。また、このような課題から、想定より時間がかかり、スケジュールが遅れたり、作業する担当者には、どのようなスキルをもった人（エンジニアなのかデザイナなのか）をアサインするかで困ったりするケースがあるようです。そこで、今回は、筆者の経験をもとに、このような問題がどうして発生するのか？ さらに、改善方法として、クライアントサイドでのHTMLテンプレートの利用について紹介します。 対象読者 サーバサイド開発者や、フロントエンド開発
Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt
はじめに HTML／JavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の本質にあまり関係のない定形作業が発生します。これらの定形作業を自動化できれば、プログラマは処理内容の検討やコーディングなどの本質的な作業に集中でき、作業効率のアップが期待できます。また定形作業を手動で行うことによるケアレスミスの低減も期待できます。 プログラムのビルドに使われるMakeやJava環境で利用されるAntのように、定形作業を自動化するツールは様々な開発言語や環境で提供されています。本記事ではタスクをJavaScriptで記述するタスク実行環境Gruntを紹介します。Gruntを使うとHTML／JavaScript開発で必要となる、以下のような定形作業を自動化できます。 ファイル操作（移動、コピー、削除、名称変更、結合） ネットワーク通信（FTP、SSH
Chefで3分クッキング！ Webサーバ構築のレシピをRubyで書いてみよう
本連載は、SI業界に入ったばかりの新米業務アプリケーション開発者や、SI業界を目指す学生さんを対象とした、インフラ構成管理ツールを使ってコードでインフラを構築するための講座です。また、インフラエンジニア／システムオペレータで、物理環境でのインフラ構築／運用管理は経験があるけど、プログラミングが苦手という方にも読み進めていただけるように、文法などの解説を入れながら説明します。今回は、Chefというツールのご紹介と、Chefを使ってWebサーバを構築する方法について説明します。 はじめに 前回は、コードでインフラ構成を行う第一歩としてVagrantを使ってローカルPCに仮想環境を構築する手順をご紹介しました。 今回は、Chefというツールのご紹介と、Chefを使ってWebアプリケーションの開発環境にWebサーバであるApache httpdやPHPの実行環境などをインストールする方法について説
Webアプリをあっという間にカッコよく！ BootstrapによるレスポンシブWebレイアウト
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
Webサイト高速化対策の現状
はじめに はじめまして、こんにちは。クラスメソッド株式会社でWebを担当している野中です。 この度、「これから身につけるWebサイト高速化テクニック」と題して記事を連載させていただくこととなりました。 本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて高速化に関する手法や技術について調べ、身につけたテクニックを細かな解説を加えて紹介していきます。中には少し難しいテクニックも含まれますが、できる限り分かりやすく、すぐに実践できるよう紹介していきたいと思います。とても長い連載ですが、よろしくお願いいたします。 なお、本連載はクラスメソッド開発ブログで連載されている「身につけておきたいWebサイト高速化テクニック」の増補改訂版です。 本連載の流れ 本連載はできるだけ多くの方に興味を持っていただけるように、最初に高速化対策の全体像と必要な知識を紹介します。その後、具体的な高速化対策と
3DCGツール「MikuMikuDance」のエフェクトを拡張する 「MikuMikuEffect」の概要と導入方法
本連載で紹介するMikuMikuEffect（以降MME）は、そんなMMDを拡張し、エフェクトファイルと呼ばれる、HLSLで記述されたシェーダプログラムをMMD上で実行できるようにするための拡張ツールです。 本連載では、このMMEで動作するエフェクトファイルの使用方法と、エフェクトを構成するHLSLコードについて、6回に渡り解説していきます。 第1回目となる今回は、MMEの紹介と導入方法を解説します。 対象読者 MMDを使っていて、エフェクトファイルの中身に興味のある方 HLSLのコーディングに興味のある方 MMEの紹介 MMEとは MME（MikuMikuEffect）は、筆者が開発した、MMDでエフェクトファイルを読み込めるようにするための拡張ツールです。 ただし、MMDは一般的なプラグイン形式の拡張機能を持っていないため、MMEでは、API Hookという手法を使用して、MMDの描画
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）（1/4）：CodeZine
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
Perlコミュニティ活動で宮川達彦氏が日本人で初めて「白駱駝賞」受賞：CodeZine
オープンソースのプログラミング言語であるPerlは、多くのボランティアの努力によって支えられている。白駱駝賞（The White Camel Awards）は、そうしたコミュニティ活動における貢献者を称えるため、1999年のPerlカンファレンスではじまった。現在ではPerlファウンデーションが毎年OSCONで発表する形となっており、昨年はティム・オライリー（Tim O'Reilly）氏も受賞している。 今年の白駱駝賞は、7月21日から25日まで開催されているOSCON 2008の2日目夜のイベント「Tuesday Evening Extravaganza（火曜の夜は大騒ぎ）」で発表された。受賞者は、宮川氏のほか、オーストラリアのPerlコミュニティからヤシンタ・リチャードソン（Jacinta Richardson）氏と、イスラエルでYAPC::Israelなどを主催するガボール・ザボ（
ActionScriptによるWebの3Dグラフィックス再入門：CodeZine
Flashで3D？ 数年前まで、Flashと言えばデザイナが絵やアニメーションを作り、そこにちょっとしたインタラクティビティを持たせるためのツールという見方が一般的でした。しかし、昨年あたりから急激に「えっ！？こんなことがFlashでできるの？」というようなコンテンツが増えてきています。このようなコンテンツが現れはじめた原因は、言語仕様が一新されたActionScript 3による高いパフォーマンスにあります。 本連載では、ActionScript 3のパフォーマンスを活かした一例として、Web上での3D表現を取り上げます。Webで3Dというと、VRMLやJava3Dなどの方法が存在はしたものの、なかなか広まることがありませんでした。これは実行環境の普及率が原因していると言えるのではないでしょうか。その点について、Flashは恵まれた環境にあると言えます。Adobeの資料によれば、日本国内
H.264やばい、マジやばい。Adobeサイトで動画を見られるから今すぐ見て！：CodeZine
Flash Player 9 update 3ではH.264エンコードをサポートし、HD画質の動画が見られるようになりました。HD画質の美しさはびっくりするぐらい奇麗なので、ぜひとも視聴することをおすすめします！ 「HD画質の動画なんて、どこで見られるんだ？」という人のために、Adobeのサイトでは映画のトレーラーなどが多数公開されています。ここでは動画を見るまでの手順を紹介します。 1．Flash Player 9 Update 3にアップデートする まずはFlash Playerをアップデートする必要があります。まだしていない方は以下のURLよりアップデートしてください。 Adobe Flash Playerダウンロードセンター 2．Adobe Flash onにアクセス それでは動画を公開しているサイト「Adobe Flash on」にアクセスしましょう。ここでは直接HD
Perlで始めるFacebookアプリケーション：CodeZine
はじめに Facebookは米国の代表的なソーシャルネットワークサービスで、開発者向けのプラットフォームも用意されています。今回は、Facebook用のアプリケーションの作り方について簡単に解説します。 FacebookからはPHPで書かれたサンプルアプリケーションが提供されていますが、今回はPerlを利用したいと思います。対象読者 Webアプリケーションに興味のある方。必要な環境 Perl 5.8以上が動作する環境を推奨します。主なPerlモジュールには、以下を使用しました。WWW::Facebook::APIJSON::Any Facebook用アプリケーション作成の基礎Facebook Developers Facebook Developersという、Facebookの開発者向けページがあります。ここでは主に3つの技術が提供されています。Interface (API)Query (
CodeZine：HAVING句の力（HAVING（集計）, HAVING句, 関係除算, HAVING, SQL）
はじめに SQLというのは変わった言語です。こういう印象は人によって差があると思いますが、おそらく最初に手続き型言語を学んだ正統派のプログラマやSEほど強くそう感じると思います。 SQLに違和感を感じる理由は、いくつか考えられます。第一に、SQLが「集合指向」という発想に基づいて設計された言語で、この設計方針を持つ言語が少ないことです。そして第二に、それに劣らず大きいのが、最初に学んだ言語のスキーマ（概念の枠組み）が心理的モデルとして固定され、それを通して世界を見るようになるため、異なるスキーマを持つ言語の理解が妨げられることです。 本稿では、HAVING句のさまざまな応用方法を紹介していきますが、その際、手続き型言語とSQLの考え方を比較します。それによって、私たちが手続き型言語で身に付けた無意識の心理的モデルを自覚し、集合指向という発想に感じる違和感を軽減したいと考えています。 今回は
Perlを使って脆弱性を検証する：CodeZine
はじめに 今回はXSSの脆弱性をチェックするPerlスクリプトを作成したいと思います。すべてのXSSによる脆弱性が回避できるわけではありませんが、テストコード作成のヒントになれば幸いです。 対象読者 Webアプリケーション開発者で、XSSのテストケースを作成したい方。 必要な環境 Perl 5.8以上が動作する環境。基本動作の確認はMac OS Xを利用しました。次のPerlモジュールを利用するので、あらかじめインストールしておいてください。 Template::Toolkit Web::Scraper Test::Base またCGIを使用するので、ApacheなどのCGIが実行できるWebサーバを用意してください。 解説内容 ソースコード解説 まず最初にソースコードの解説をします。 xss.pl
SQLによる数独の高速解法：CodeZine
CALCULATE_GS_V3は控えめに言っても「遅すぎる」ので、これに比べて「高速」であっても、「数独」の解法として特別高速なわけではありません（数独をコンピュータで解いた経験のある人なら、標準的なサイズ9×9の数独を、今日の計算機は数秒で解くことはご存じでしょう）。しかしながら、本稿で紹介するSQLの書き方は、さまざまな場面で応用できるはずです。ここで紹介する方法よりも劇的に速い方法を第3部で紹介しているので併せてお読みください（1秒程度で解けます）。対象読者計算機でパズルを解くことに興味のある方数独を知っている方（数独自体についての説明はしません）ストアド・プロシージャについて学びたい（ストアド・プロシージャ自体については説明しませんが、雰囲気は分かると思います）データベース管理システムで「データの管理」を超えたことをしてみたい方 必要な環境 本文のコードをそのまま実行するにはMyS
Pythonを始めよう：CodeZine
はじめに こんにちわ、hirataraです。 本稿では、オブジェクト指向のスクリプト言語であるPythonの紹介をしたいと思います。と言っても、実は私がPythonを勉強し始めたのは数ヶ月前のことで、まだPythonに関してさほど詳しいとは言えません。それでもこの記事を書こうと思い立ったのは、ある言語が他の言語に比べて面白い部分と言うのは、その言語にどっぷり漬かってその言語を使うことが当たり前になっている人間よりも、その言語を好きになり始めたくらいの人間の方が見つけやすいのではないかという思いからです。 そのような事情で、もしかすると本当のPythonistaからお叱りを受けるような内容も含まれるかもしれませんが、その点はTBやコメントでご教授頂けると幸いです。この記事で、少しでもPythonに興味を持ってくれる方が増えることを願っています。対象読者他言語でのプログラミング経験者Pytho
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebアプリにSNSアカウントでのログインを実装する
言語別フレームワークの比較 ～Perl/Ruby/PHPユーザーのためのMVCフレームワーク入門～ (1/6)：CodeZine（コードジン）
find／grep／xargsコマンドを使いこなす 業務で楽するためのUNIXテクニック集「検索」編
業務で楽するためのUNIXテクニック集 まずはおさらい、シェル制御構造と正規表現の基礎：CodeZine