D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
AngularJS で Hello World - パンダのメモ帳
AngularJS は Google が中心になって開発が進められている JavaScript MVC フレームワーク の一種です。もちろんオープンソース（MIT License）。 今回はこの AngularJS を使って Hello World するわけですが、 ただ世界にこんにちはするだけじゃおもしろくないので、次のようなカンジでやってみようと思います。 TypeScript で書いてみます。 ビルドツールに Grunt を使います。 Testacular + Jasmine を使って自動テスト（ユニットテスト、受入テスト）環境を構築します。 AngularJS のバージョンは2013年1月現在の最新安定版である 1.0.4 を使用します。 なお、今回のソースコード一式を GitHub で公開しています。 また、こちらで実際に動作を確認することもできます。 View を書く まずは
XHTML テンプレート [WEB ARCHIVES]
XHTML のテンプレートを作成するフォームです。 JavaScript を使用しているため、JavaScript を利用できる環境でご利用ください。 文書宣言
HTML5+WebSocketsで作るリアルタイムWeb
HTML5+WebSocketsアプリケーションの作成 WebSocketsのプログラムは非常にシンプルです。その理由はクライアントとサーバーにそれぞれイベントモデルを提供するプログラムが存在するためです。クライアント側のイベントと、イベントハンドリングに実装する機能は以下の通りです。 初期表示および終了処理ではWebSocketコネクションを生成、明示的な切断が必要になります。 ［リスト 01］初期表示、終了処理 在席状態の変更では、コネクションが開いていることを確認してコネクションに文字列データを送ります。文字列データのみ扱えることに注意してください。 また、プロトコル拡張によって継続的にコネクションを維持するWebSocketsは、途中に介在するプロキシサーバーから見ると、そのコネクションは使われていないと認識される可能性があり、切断されてしまうことがあるため、接続が生きていることを
Emerge Technology: VisitorsでApacheのログ解析
dev (147) diary (105) python (94) 生活 (67) 製品/プロダクト (53) ランチ (48) 学び (41) mac (27) golang (15) linux (14) iphone (13) misc (12) おやつ (11) イベント (11) 仕事術 (11) 分散 (10) スキル (8) html (7) キャリア (7) ワークスタイル (6) 技術動向 (6) 趣味 (6) java (4) websocket (4) アーキテクチャ (4) 就職/転職 (4) グルメ (3) apache (2) js (2) solr (2) ショッピング (2) 料理 (2) IT (1) apple (1) kindle (1) lucene (1) oracle (1) rdbms (1) windows (1) ► 2014 (15) ►
スマホアプリ開発はHTML5／jQuery Mobileとネイティブどっちがいいの？～第2回テックヒルズまとめレポート（1/2） - ＠IT
スマホアプリ開発は HTML5／jQuery Mobileとネイティブ どっちがいいの？ 第2回テックヒルズまとめレポート 柴田克己 2012/4/27 iPhoneやAndroid端末の急速な普及を受け、多くの開発者が近年関心を寄せているのが「HTML5で実現できるWebアプリと、各プラットフォーム向けに特化したネイティブアプリ。開発するならどちらがトク？」というテーマだ。 2012年4月13日に、このテーマについて実際にスマホやWeb向けのアプリ開発を手掛けている技術者たちが意見を戦わせる「第2回テックヒルズ『ネイティブアプリ』vs『Webアプリ』～これからのアプリ開発のトレンド～」と題したディスカッションイベントが、六本木アカデミーヒルズで開催された。 司会進行を務めたのは、同イベントを企画、運営するインターネットサービス企業「CROOZ」の技術統括本部取締役の小俣泰明氏だ。 小俣氏
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
『2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来』に参加してきた #html5semi - Diary of absj31
2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 : ATND 2012/01/20 2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 #html5semi - Togetter (写真：神保町駅改札前) HTML5関連ネタはやろうやろうと思いつつ個人的にはリーチ出来てない分野でして、ちょっくら拝見してきました。ちなみに上記の募集サイト、凄い人気で200人の定員に一時は倍の400人が登録すると言う事態に。HTML5人気は凄いですね〜。 開催開場は株式会社オプト１F大会議室＠神保町。この日は朝から雪が降るなどして天候が崩れていましたが、夕方〜開催の頃には問題無く止んでおりました。しかし外は寒かった！(>_<) 入場時の状況で5分程遅れて本編スタート。以下メモです。 基調
50代でも分かったHTML5の基礎知識
おとそ気分で社内を暇そうにウロウロしていたら「HTML5の常識、わかっていますよね」と怖い怖い一回り年下の編集長から叱られてしまいました。この後、HTML5関係の仕事がくることは間違いがありません。 しかし、ワタクシは50代。困ったことに、この編集長の「わかる」とワタクシの「わかる」とは程度が違います。これは困りました。正月早々、首筋がすーっと寒くなってしまったので、優しいけど仕事に関しては編集長よりも厳しい二回り年下のデスクに相談。 「HTML 4と比較しながらHTML5の違いをまとめて記事にするところから、始めてみてはどうですか」と先手必勝のようなお題を与えてくれました。どこまでこのお題をこなせるのか。65歳定年になれば、あたりまえの日本企業の縮図のなかで、50歳を過ぎての「HTML5の基礎知識」をまとめてみました。 DOCTYPE宣言が超簡単に DOCTYPE宣言が超簡単になったのは
Google I/O 2011で利用されたHTMLプレゼンテーションテンプレート。 MOONGIFT
I/O 2011 SlidesはGoogle製のHTMLプレゼンテーションテンプレート。 I/O 2011 SlidesはHTML5/JavaScript製のオープンソース・ソフトウェア。Googleの開発者会議とも言うべきGoogle I/Oが開催された。今年もまた新しい技術やサービスが次々と紹介され、整理が追いつかないという人も多いのではないだろうか。 スライド表示 そんなGoogle I/O 2011の中で使われたスライドはHTML5製だ。テンプレートがI/O 2011 Slidesとしてオープンソース化されているので誰でも利用できる。 I/O 2011 Slidesは角丸のシンプルなスライドで矢印キーやスペース、マウスクリックでスライドを切り替えることができる。単純に文字を表示する他、CSSでサイズや色を変えたりクリックするたびにリストの項目を表示していくと言ったこともできる。 画
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
HTML5で色々作るチュートリアル＆チートシート:phpspot開発日誌
25 Useful Html5 Cheat Sheets and Tutorials For Web Developer HTML5で色々作るチュートリアル＆チートシート ギャラリーやcanvas、スライドショー、コンタクトフォーム等色々なものを作るチュートリアルとチートシートなどがまとまっています。 HTML5でテトリスを作るチュートリアルなんかもあります 最近HTML5ネタが多くなって来ました。 ネタに事欠かないのはいいことですが実際に追っていくのは大変ですね 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 HTML5ベースのオー
これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集:phpspot開発日誌
Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです 使わずとも一度はかならず見ておきたいボタン集となってます アイコン付きのボタン カーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されます アイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプル アニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね 登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例 ボタンが大きくなり、更に文言を追加する例。色の変更
iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル:phpspot開発日誌
Apple rotator banner effect with jQuery | jQuery Plugins iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル 左にメイン画像、右にサムネイルで３つあるあのiTunesストアのインタフェースをjQueryを使ってサイトで再現できます 解説ページはこちら シンプルなマークアップで実現できています Appleの製品のユーザインタフェースは色々なところに影響を与えていてそういうところもやっぱりさすがだなぁというところですね。 関連エントリ Apple.comの新スライダーエフェクトを実装するjQueryプラグイン Apple関連のフリーのアイコンや素材集２０
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
http://knk-n.com/2012/03/03/textwrangler/
配色決めにも利用できる！色について詳しく調べられるサイト「Color Hexa」 : 二十歳街道まっしぐら
JavaScriptエンジニア向け！スマートフォンで動くブラウザゲームの作り方