こちらのブログの更新が久しぶりになりました。「日本全国花粉飛散マップ」というコンテンツをa24さんと作ってみました。 日本全国花粉飛散マップ Pollen Map in Japan | ICS HTML5 CanvasをFlashのように扱えるフレームワーク「CreateJS」と、型指定などを使って効率良くJavaScript開発ができる「TypeScript」を使って開発しています。 CreateJS関連の技術について会社のブログにいくつか記事を投稿していますので、よければご覧くださいませ。 HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 CreateJS勉強会(第2回)発表資料「効率的なCreateJSコンテンツ開発 〜TypeScript/Haxeを使ったActionScriptライクな開発環境〜」 CreateJS
(ε・◇・)з o O ( SIMPLE_OPTIMIZATIONS の基本的な使い方だよ。 // ClosureCompiler.js: JavaScript source code minifier // // Closure Compiler Service API Reference: // https://developers.google.com/closure/compiler/docs/gettingstarted_api?hl=ja // https://developers.google.com/closure/compiler/docs/api-ref // // Closure Compiler Service // http://closure-compiler.appspot.com/home // (function(global) { // --- head
この記事のURL http://www.dango-itimi.com/blog/archives/2013/001172.html Flash CS から Haxe用 extern クラスを出力する JSFL を公開しました。 github https://github.com/siratama/Flash-To-Haxe-Converter ファイル一式ダウンロードページ https://github.com/siratama/Flash-To-Haxe-Converter/tags なんだか似たようなことばかり行なっていますが、少しずつ機能改善を行なっています。先日公開した「swf から CreateJS-Haxe用 extern クラスを生成するアプリ」は少々問題があったため開発を中止しました。以後は、同等の機能を持つ 当JSFL をご利用ください。 以下は前回から少々変わった遷移
Google ChromeでCSSがSassの何行目に記述されているか確認する方法 Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。 このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。 これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。 sass_options = { :debug_info => true } output_style = :expanded #output_style = :compressed 次にGoogle Chromeのインスペクタの
◯秒後に処理を行いたい 最近ひさびさにAndroidにさわり、タイトルのような処理を行う必要があったので備忘録。 Alarmmanagerを使えば指定した時間に処理を行うこともできますが、そういう大げさなものでなく、 「1秒後に画像を切り替えたい」とか、そういう要件に使用します。 こういうときはHandlerクラスのpostDelayedを呼べば実現可能です。 postDelayedは次のように使用します。 new Handler().postDelayed( <Runnableオブジェクト>, <処理を呼び出すまでの時間(ミリ秒)>); 実行されるRunnableオブジェクトは次のように定義します。 private final Runnable func= new Runnable() { @Override public void run() { //ここに実行したい処理を記述 } }
Candy ? a JavaScript-based multi-user chat client JavaScriptベースのIRCっぽいチャットプログラム「Candy」 複数ルームの作成、ログイン、emoticon等、基本的なチャット機能がブラウザ上から使えます。 デモチャットもあるので実際に試して見ることが可能です。 チャットサービスや社内チャットなんかに活用できそうです 関連エントリ 今風のWEBベースチャットを作れるオープンソースソフト「kandan」 node.jsで超カッコいいリアルタイムチャット「Balloons.IO」 スマホ・PCでオンラインライブチャットによる顧客サポートを簡単提供「GrooveHQ」
Bolt - content management (1.0.2) - The Bolt website. レスポンシブでクールなCMS「Bolt」。 CMSは昔からありますが、レスポンシブでBootstrapベースのクールなCMSがオープンソースソフトウェアとして入手できます。 PHPとRDBによって書かれており、PHPな方にとってはカスタマイズなんかも簡単に出来そうです。設置やカスタマイズも簡単らしいです。 Bootstrapベースのクールなデザインとレスポンシブ対応が最初からなされているという所がポイントですね。 1つの選択肢の1つとして検証してみるのもよさそう 関連エントリ ZendFrameworkベースのCMS兼フレームワーク「Centurion」 ポートフォリオサイト構築専用のPHP&MySQLなCMS「The Secretary」 ZendFrameworkとExtJSを使
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応! Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード(矢印キー)での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
1. 手書きで文字を書く 2. 書き終わったら end を押す 3. replay を押すと覚えた筆跡をなぞってくれるよ 文字ごとに記録しておいて、アニメーションで文章が出るようにしたら楽しそう。 なんかjsdo.itのスマホビューだと動かないなあ @iphone4s DropBoxの公開リンクだと動く。 https://dl.dropbox.com/u/47257760/moji/moji.html //============================================ // canvasコンストラクタ var Canvas = function () { this.initialize.apply(this, arguments); }; // プロパティを設定 // 引数はオブジェクトで必要箇所のみ指定 Canvas.prototype.initialize =
2013年03月18日18:30 カテゴリAnnouncementLightweight Languages javascript - es2pi はじめました JavaScript: The Definitive Guide (Kindle ed.) David Flanagan [邦訳:JavaScript 第6版] es2piというライブラリーをこつこつと書き続け始めました。 dankogai/js-es2pi ・ GitHub What? ES6のpolyfillと、それでも足りないと私が日頃感じていた機能を実装したJavaScript Libraryです。 2πという名前に、ES6に対する割り切れない想いを託しました。 Demo とりあえずES5でPolyfillできるES6の機能までは実装ずみです。Polyfill以外でも関数よりもメソッドの方の方がふさわしいと思われる機能も一
これは便利!レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
ちょっと前から気になっていた WebRTC を簡単に試してみました。 WebRTC WebRTC は Web RealTimeCommunication の略で、ユーザーのWebカメラやマイクから動画や音声のデータをリアルタイムで取り込んだり、端末間でP2Pを行えるようにするための仕様で、現在 W3C によって標準化が進められています。これまではWebブラウザからWebカメラにアクセスするためには Flash を利用する必要がありましたが、これらを利用することで JavaScript から同様のことができるようになります。 ※以降のデモは全てWebカメラが必要です。 Webカメラの映像を video要素 に表示する まずは一番簡単なサンプルを作ってみました。 DEMO 2013年3月時点で、Chrome27.0にて動作確認(Androidでも動くかも...) まずは一番オーソドックスに、W
角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました! デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg
ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。(ブレイクポイントを480px、768px、980pxとした場合の例です) 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト:980px以上用(PC用)の記述 */ @media screen and (max-width: 979px
Edge AnimateでCSSフィルタが扱えるようになった HTML/CSS/JavaScriptを使ってアニメーションやインタラクティブコンテンツを作成することができる『Adobe Edge Animate』がバージョン1.5にアップデートされ、CSSフィルタが使えるようになっています。 基本的なタイムラインアニメーションをベースに、CSSフィルタを使った簡単なアニメーションを作成してみます。 Adobe Edge Animateについて Adobe Edge Animate ドキュメント Adobe Edge Animateは現在無料で提供されています。 タイムラインやステージ、アクションエディタを用いたオーサリングを行うことができ、シンボルの扱い、FlashライクなGUIなどFlashの経験者であれば学習コストは抑えられると思われます。 jQueryとAdobe製のライブラリが使用
実機のSQLiteにアクセス 先日、Androidアプリの動作確認を実機(Galaxy Nexus)で行いました。 昔は問題なくadb shellで中にはいってsqlite3コマンドで確認できた気がしてたんですが、 DBファイルがある場所へ移動してファイルを確認しようとしたらpermission deniedだし、 そもそもsqlite3コマンド自体が使えないという状況でした。 rootとってsqliteを移植してる人もいましたが、今回はデータベースファイルの中身を確認するのが目的だったので、 データベースをPCにもってくる方法についての備忘録的tipsです。 もっとちゃんとした回避策があるような気がしなくもないですが。誰か知ってたら教えてください。 環境 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 実機 : Galaxy Nexus Android
AlertDialog.Builder#setItemsはリスト形式のダイアログを表示してくれますが、どうしても項目の管理がやっかいでした。 色々試して項目管理を楽できるようにしてみました。 問題点 AlertDialog.Builder#setItemsは第一引数に配列リソースIDのとString配列の2つのメソッドがあります。 これ自体は特に問題ないのですが、問題は第二引数のDialogInterface.OnClickListenerほうです。 DialogInterface.OnClickListener#onClickは第二引数に選択されたリストのindexが渡されてきます。 このindexはAlertDialog.Builder#setItemsの第一引数の配列に依存します。 ということは配列の順番を変えたらonClickのindexでの判定も変更しなければいけません。 第一引
●tvdpiを試す 下記の設定値をもつエミュレータでのAVDを作成することでtvdpiの動作を確認できます。 Skin Resolution:1280x800 or 600x960(Nexus7) Abstract LCD:213 手元の環境だとSkinをWXGAとしても213dpiになりませんでした。 なので、手打ち(Resolution)で解像度を指定します。 ●tvdpiのリソース修飾子選択基準 xxx-hdpi と xxx-tvdpi それぞれのリソースを持つアプリを下記の環境で動作させた場合どうなるのかを検証します。 ・240dpiの端末で実行 結果:hdpiが参照される。もしhdpiリソースを持っていない場合はtvdpiが参照される。 ・213dpiの端末で実行 結果:tvdpiが参照される。もしtvdpiリソースを持っていない場合はhdpiが参照される。 後者については、よ
Androidにおけるテストに関して~端末をどう選択するか~2013s 2012/10~2012/2までの人気機種などRead less
Genericons - a free, GPL, flexible icon font for blogs! 汎用で使えそうなフリーのアイコンフォント「Genericons」 ソーシャルアイコンや矢印などの記号アイコン等汎用的な物がセットになったアイコンフォントです。 シンプルすっきりなデザインのアイコン集が格納されてます 関連エントリ フリーのアイコンフォント10まとめ ブラウザ上でアイコンを選んでアイコンフォントが作れる「IcoMoon」 Webフォントとして使えるピクトグラムアイコンセット「MFG Labs icon set」 アイコンフォントをコマンドラインで生成できる「Font Custom」 ピクトグラムが美しいシンプルなフォントアイコン「CONDENSE」
checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますのでカスタマイズの参考にもなりますね。 コード <script src="jquery.js"></script> <script src="jquery.icheck.js"></script> コアとプラグインを読み込みます。 $('input').icheck(); 初期化します。 $('input').icheck({ handle: '', // 'checkbox'か'radio'とすればどちらかに限定できる
わずか2行追加するだけで郵便番号から住所を出すことの出来るスクリプト(jsonp) ajaxzip3の紹介です。 ウェブの仕事をしているとフォームを作成することって結構ありますよね。 郵便番号を入力させるって入れれば、地域がある程度出すことが可能なので、 入れてもらったら簡単に入力出来るようにしてあげるのは、ユーザに取って嬉しいですよね。 ヘッダには、これを入れる。 <scriptsrc="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"charset="UTF-8"></script> bodyにこれを入れる。 郵便番号:<inputtype="text"name="zip21"size="4"maxlength="3"> − <inputtype="text"name="zip22"size="5"maxlen
↑の画像のみたいなGrowlぽい通知UIを作るときに、一筋縄ではいかなそうなところと言えば右上から下へ順に流れていってウィンドウに収まりきらなくなったら、列が変わって左へ流れていくようなレイアウトを作るところでしょうか。言葉が下手すぎたので図を見てください・・・ こういうやつ。 CSS力がめっきり減ってきてるので、確かこういうやつCSSで出来たと思うんやけどなーぐらいの感じだったんですけど、これこそFlexible Boxですね。 Flexibile Boxの詳細はわざわざ説明するのもアレなので以下の仕様書とかサイトを見て把握すればいいと思います。 CSS Flexible Box Layout Module CSS Flexbox Please! Using CSS flexible boxes HTML <div class="mod-notifications"> <div clas
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」=「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
DeepTissue.jsはスマートフォン/デスクトップ双方でタップ、移動、スワイプのイベントが取れるようになるJavaScriptライブラリです。 スマートフォンではマウスなどのクリックではなく、ディスプレイのタッチによってイベントを実行します。その差異を吸収してくれるjQueryのような存在もありますが、今回は特にイベントに特化したDeepTissue.jsを紹介します。 タップ系。シングルタップ、ダブルタップそしてタップホールドがサポートされています。 移動系。タップしたままオブジェクトを移動させられます。さらに垂直、水平移動が可能です。 スワイプ。動かすとその動いた分のピクセル数が表示されます。 DeepTissue.jsを使うとスマートフォンでよくあるような操作イベントがデスクトップのブラウザでも使えるようになります。透過的に扱えれば、レスポンシブWebデザインを適用している際に
twitter facebook hatena google pocket MACでプレゼンをしている人を見ているとその動きに思わず自分もMACを欲しくなる人いませんか。 ちょっと待って、購入ボタンを押す前に、Windowsでもかっこ良く全画面をスライドさせられるJavaScript「hakimel/kontext」を試してみませんか。 スライド間の切り替えをかっこよく3Dぽくしてくれます。 sponsors 使用方法 hakimel/kontextからファイル一式をダウンロードし、JavaScriptとCSSを下記のように記述します。 <link rel="stylesheet" href="kontext.css"> <link rel="stylesheet" href="demo.css"> <script type="text/javascript" src="kontext.j
【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) 3月 13, 2013 admin 読了: 約 24 分 フロントの技術について英語の記事をシェアされていて、気になったので理解を深めるために翻訳してみました。 英語の記事では、28から始まるのですがややこしいので、1はHTMLからはじめていきたいと思います。 DANGER!!!WARNING!!!はじめに 元記事はこちら ※間違った意図や誤訳をしている箇所が多々あると思いますが、その点ご了承くださいませ…。 初めてということでしょっぱい訳で、すみません…。 1. avoid inline code / インラインコードを避ける 1. <style></style> や <script></script> をHTMLに直接書く 2. <link rel="stylesheet" href="" />
[for English user] This article is a simple introduction about my project for Japanese developer. You do not have to read this, reading this project directly would be enough. RequireJSの応用方法について調べた内容をGitHubでまとめています。実装詳細はGitHubをご覧いただくとして、このエントリではそれぞれの応用について簡単な紹介をしたいと思います。 キャッシュ防止 JavaScriptファイルがブラウザにキャッシュされてしまうために、スーパーリロードなりキャッシュのクリアなりをしないと変更後のファイルが試せないことがあります。 キャッシュを防ぐ方法としてクエリパラメータの利用が知られていますが、Requ
2013年3月19日公開 独立行政法人情報処理推進機構 技術本部 ソフトウェア・エンジニアリング・センター 概要 インターネット販売サイトやSNS(ソーシャルネットワークサービス)等のシステムでは、その構築において要件のすべてが明確にならなくても開発に着手し、要件の明確化や変更には開発と並行して対応します。それは、いかに早くサービスを提供するかに、ビジネスの命運がかかっているからです。 こうした要件の変化に柔軟に対応できる開発手法として、「アジャイル型開発」があります。これは、ビジネス上の優先度が高い順に、短いサイクルで機能単位の開発を繰り返す手法です。 このアジャイル型開発手法は自社開発(内製)が中心の米国で発展したものであり、要件を決めて外部に開発を委託することが多い等、受発注環境が異なる日本でアジャイル型開発を適用するのは難しいと考えられています(*1)。 「アジャイル型開発」には、
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く