モバイル向けシングルページアプリに最適！ 軽量JSフレームワーク【Mithril】 - 基礎編
<!DOCTYPE html> <html dir="ltr" prefix="fb: http://www.facebook.com/2008/fbml"> <head> <meta charset="UTF-8"> <script src="mithril.js"></script> </head> <body> <div id="contents"></div> <script> /* * Modelを定義 * ページ内の文言データを管理 */ var PageModel = function() { this.data = m.prop({}); this.fetch = function(){ var that = this; m.request({method: "GET", url: "page.json"}).then(function(resp){ that.data(r
インフラ構築をコードで自動化できる「Docker」の魅力――主婦と先生と作家をコンテナ仮想化で両立する阿佐志保さんの生き方
翔泳社では11月19日に『プログラマのためのDocker教科書 インフラの基礎知識＆コードによる環境構築の自動化』を刊行しました。今回、Dockerが大好きだという著者の阿佐志保さんに、本書の紹介だけでなくDockerに関わる人生観についてもお話をうかがいました（インタビュー内容は10月21日時点のものです）。 家事、育児、講師、執筆の両立 ――よろしくお願いします。最初に、阿佐さんの自己紹介をお願いできますでしょうか。 阿佐：結婚・出産前は、システムの基盤を構築・運用するエンジニアなどをしていました。インフラの設計構築だけでなく、アプリケーション開発標準化や運用設計など、障害やトラブル以外では表に出ることのない地味な仕事です。毎日、朝早くから終電まで働いていました。仕事が好きだったし、非常に優秀なメンバーに囲まれていたのであまり苦ではありませんでした。 分かりやすくいうと「社畜」です。社
お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編）
はじめに Vue.jsは、シンプル・軽量・高速という特徴を持つデータバインディングライブラリとして最近注目を集めています。LINE社でもアプリ内WebViewの実装技術の選択肢の一つとしてVue.jsを採用しています。2014年11月27日にリリースされたLINEスケジュールは、Vue.jsを使って実装しているSPA（Single Page Application）の代表例です。 本稿は日本語記事がまだ少ないVue.jsの基本機能の紹介を目的とした「基礎編」として、公式ドキュメントの内容を元に解説します（執筆時点のバージョンであるv0.11の内容です）。 Vue.jsとは Vue.jsは、双方向バインディングによるModelとViewをつなぐ仕組み「ViewModelレイヤー（MVVMパターン）」を提供するJavaScriptのライブラリです。 Vue.jsの基本概念は以下のようになってい
誰でも手軽にNTTドコモのサービスのような機能を持つアプリが作れる ～「docomo Developer support」の概要とAPIコンソール
はじめに 第1回目の本稿は、「docomo Developer support」の概要と、手軽に機能が試せるAPIコンソールの使い方を解説しましょう（本稿は、2014年11月19日時点の最新情報に基づいております）。 対象読者 JavaとEclipseを用いたAndroidアプリの開発で、基本的な知識がある方を対象とします。 「docomo Developer support」とは 「docomo Developer support」は、NTTドコモが開発者向けに情報を提供しているサイトで、2013年11月11日に開設されています。このサイトでは、ハッカソンなどのイベント情報も提供されていますが、メインとなるのは、さまざまな開発に活用できるAPIやツールの情報です。 APIとは「Application Programming Interface」の略で、あるプログラムの機能を外部のアプリケ
Webアプリをあっという間にカッコよく！ BootstrapによるレスポンシブWebレイアウト
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
CSSフレームワーク「Compass」の基礎
Compassのメリット CSSスプライトが簡単に作成できる Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。 独自のmixinが利用できる グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。 独自の関数が利用できる 画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。 mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。 上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。 読みやすい 変数や繰り返し処理が使える 成果物の品質を統一できる 高速
HTTPリクエスト数削減テクニック2： CSS Sprite編
はじめに こんにちは、クラスメソッド株式会社の野中です。 HTTPリクエスト削減テクニックの紹介に入り、前回の『リクエスト数削減テクニック1：インラインイメージ編』では、インラインイメージについて紹介しました。本記事では「CSS Sprite」の基本的な知識と使い方、使いどころについて解説します。すでに定番のテクニックとなっていますが、何となく使っていることが多いと思います。初学者の方にも理解していただけるよう詳しく解説します。 対象者 対象者は主にコーダー、フロントエンドエンジニアです。 デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 CSS Spriteとは Webサイトではアイコンやナビゲーションなどに多くの画像が使われ、サイトによっては20個30個とたくさんのアイコンが使わ
Webサイト高速化対策の現状
はじめに はじめまして、こんにちは。クラスメソッド株式会社でWebを担当している野中です。 この度、「これから身につけるWebサイト高速化テクニック」と題して記事を連載させていただくこととなりました。 本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて高速化に関する手法や技術について調べ、身につけたテクニックを細かな解説を加えて紹介していきます。中には少し難しいテクニックも含まれますが、できる限り分かりやすく、すぐに実践できるよう紹介していきたいと思います。とても長い連載ですが、よろしくお願いいたします。 なお、本連載はクラスメソッド開発ブログで連載されている「身につけておきたいWebサイト高速化テクニック」の増補改訂版です。 本連載の流れ 本連載はできるだけ多くの方に興味を持っていただけるように、最初に高速化対策の全体像と必要な知識を紹介します。その後、具体的な高速化対策と
「jQuery Mobile」を活用したスマートフォンサイト作成（前編）
はじめに 今回は、簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobileを紹介します。jQuery MobileはjQueryと同時に読み込んで使用するもので、スマートフォン向けサイトでよく使われるスライダースイッチなどのフォームを簡単に呼び出すなど、スマートフォン向けUIサイトが簡単に作成できます。今回はjQuery Mobileとは何かを解説し、ごく簡単なスマートフォン向けサイトを作成してみます。 対象読者 jQuery mobile、スマートフォンに興味があり、使ってみたい方 必要な環境と準備 今回使用したjQuery Mobile1.2.0がサポートしているjQueryのバージョンは1.7.x、1.8.xで、1.6.x以前のバージョンと1.9.xはサポート外となっています。このため、今回のサンプルスクリプトで使用しているjQueryのバージョンは1.8.
Facebookモバイルアプリの企画方法
はじめに 連載「Facebookモバイルアプリ開発チュートリアル」では、広告・マーケティング業界で、iPhone・Androidといったネイティブアプリの次にくるデジタルトレンドとして注目を集める分野「Facebookモバイルアプリ」について紹介していきます。第2回の本記事ではFacebookモバイルアプリの企画方法について解説します。 対象読者 Facebookモバイルアプリの開発に興味のある方。 HTML＋JavaScriptによるWebアプリ開発を経験したことがある方。 開発に必要な環境 Google Chrome推奨 JavaScript、HTMLを編集するテキストエディタ エンジニア視点でのアプリ企画方法 先日、Facebookはアプリストア「Facebook App Center」を発表しました。App CenterはFacebook上もしくはFacebookと連携して動くアプ
Googleが発表した新しいプログラミング言語「Dart」を使ってみよう！
はじめに 10日にデンマークで開催されたgoto;カンファレンスにて、Googleの社員であるLars BakとGilad Brachaによって新しいプログラミング言語Dartの発表が行われました。 公式サイトによると、Dartは構造化されたWebアプリケーションを作成するための新たなクラスベースのプログラミング言語と書かれています。さらに、シンプルさ、効率性、スケーラビリティを目標に開発されたとのことです。この新しく、挑戦的なプログラミング言語をぜひ一緒に試してみましょう！ 対象読者 Webサービス開発に興味があるプログラマー 新しいプログラミング言語に興味がある方 必要な環境 SnowLeopad以降のMac XcodeとSubversionクライアントがインストールされていること Dartとは？ Dartとは、10日にGoogleが発表したWebアプリケーションのための新しいプログラ
クラウドアプリケーション開発をJavaScriptだけで！
対象ユーザ GoogleのPaaS型クラウド「Google App Engine」に興味はあるが経験のない方。JavaScriptやActionScriptによるプログラミング、およびjQueryでの簡単なプログラミング経験のある方。JavaやPythonの開発経験は不要です。 必要な環境 コマンドライン動作環境 Java SE5またはJava SE 6 Eclipse（オプショナルですが強く推奨） 1 クラウド移行の意義 1.1 災害発生時に実証されるクラウドの威力 5年ほど前から米国で構築され始めたクラウドコンピューティングは、日本でも急速にその価値が認識され存在感を高めつつあります。クラウドは東日本大震災への対応と復興/復旧においても、公共Webサイトの複製を構築したり業務システムを復旧させたりするときに、拡張性・可用性・迅速性などがいかんなく発揮されています。もちろん平時での利用で
Flex 4.5 SDKとFlash Builder 4.5を使用したモバイルアプリケーション開発
今回のAdobe Flex 4.5 SDKおよびFlash Builder 4.5のリリースに伴い、Flex SDKとFlash Builderは、タッチスクリーン式のスマートフォンやタブレット向けの開発にも対応します。Adobe AIRランタイムを利用しながら、デスクトップ向けの開発と同じ手軽さで、モバイル向けのActionScriptアプリケーションとFlexアプリケーションをGoogle Android、Apple iOS、BlackBerry Tablet OS向けに開発でき、同様の品質も維持します。 Flash Builder 4.5を使用すると、Google Androidプラットフォームに対応したモバイル向けのFlexアプリケーションを構築できます。また、AndroidとApple iOSの両方に対応したモバイル向けのActionScriptアプリケーションを構築することもで
Google Apps ScriptでGoogleドキュメントのスプレッドシートを操作する
はじめに 「Google Apps Script」は、Googleドキュメントのスプレッドシートに搭載されているスクリプト機能です。これは発表当初、Google Appsの有料版（プレミア版）のみで利用可能であったため、「無償版のユーザーは使えない」と思っていた人も多いのではないでしょうが。が、現在では、無料で利用できるGoogleドキュメントでもスクリプトが使えるようになっています。これを利用し、Googleドキュメントのスプレッドシートを操作することができます。いわば、Excelなどの「マクロ」と同じ機能を提供してくれるのです。 最近では、クラウド・アプリケーションとしてオフィスソフトが提供されるようになってきました。Googleの「Googleドキュメント」だけでなく、マイクロソフトが「Microsoft Office Web Apps」を公開するなど、本格的にWebへの移行が進めら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「HTTP/2」がついに登場！ 開発者が知っておきたい通信の仕組み・新機能・導入方法
クラウド上でマルチデバイス対応のモバイルアプリをビルドできる「PhoneGap Build」の使い方
「Google Chrome Deveoper Tools」はこう使う！ 基本機能チュートリアル & GDD 2011 セッション概要
【Adobe MAX 2011】Flashは死んでしまうのか？
【Adobe MAX 2011】基調講演2日目 「Flash」「HTML5」で最高のユーザー体験を追及し続ける
Androidアプリにおけるユーザインタフェースの基本処理