2015年2月5日 Web業界なんでも勉強会(第2回)にてプレゼンさせていただいた、「Webデザイナーが使うバージョン管理ツール」セッションの内容です。
こちらの記事を参考にJavascriptでサブドメインの異なるサイト間でクッキーの恭有してみました。http://d.hatena.ne.jp/dirablue/20090506/1241607961http://www1.example.com/setCookie.htmlsetCookie.html html> head> script type="text/javascript"> function setCookie(id, pass) { var s=setCookieSub("id",id); document.cookie = s; var t=setCookieSub("pass",pass); document.cookie = t; alert(s+"\n"+t); } function setCookieSub(key,val){ var str = escape(k
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
第43夜、第45夜の続き。 前回でJAX-RSからサーブレットAPIは消えた。 しかしテンプレートがJSPではサーブレットAPIが残ったままだ。 43回でチラッとだけ書いた(「今回は」JSP)が、テンプレートを自由に設定できるのがJersey(JAX-RS参照実装)の強みだ。 ためしにVelocityを使ってみよう。 テンプレート。index.vmという名前にしてある。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1>${it.a} + ${it.b} = ${it.c}</h1> </body> </html> JAX-RSのソースは一切変更なし。 @Path("calc") public class C
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセット ベスト5! CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ
The Web engineer's online toolboxというまとめ記事が便利そうだったので、実際に試しつつ抄訳してみました。(一部のコメントと体裁は変えています。) 目次 一覧 RequestBin httpリクエストを保存するエンドポイントを作ってくれる。 Create a RequestBin のボタンをクリックするとURLが表示されるので、そこをHTTPクライアントからたたくとRequestBin側にリクエスト内容が記録される。 ソースも公開されてるのでローカルで立ちあげることもできる。 githubのwebhookのhelpも参考にどうぞ。 Hurl httpリクエストを実行してくれる。パーマリンクも作ってくれるので、POSTリクエストもコピペで他の人と共有できる。 類似サービス: REST test test , Apigee console httpbin HTTP
某イベントのためのコードを書くのにHTMLのスクレイピングをやりたいなー、nodeで書くかなー、去年は jsdom で書いたけど今はどうなんだろね、とか調べてたら、どうもこういうあたりのがあるらしい。 jsdom たぶん一番有名で高機能、だけど重い。 node-jquery jQuery読むだけならコレ!みたいな感じ、だけどあんまりアップデートされてないかも。使いかたはいちばんシンプル。 依存関係がちゃんと書かれてなくて、追加で手で xmlhttprequest をインストールしておかないと動かなかった。 cheerio お前ら重い! 俺がjQuery記法を再実装してやる! という男らしいライブラリ。 zombie ブラウザの挙動をシミュレートする的なライブラリ、Mechanizeみたいなやつかな。いまの用途では前段でHTTPレイヤをいじる必要があるので今回は用途に合わない。 sqrape
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
HTML5を使ったスマホアプリ開発に興味があったので、カメラやGPSなどスマートフォンの機能がどこまで使えるのか試してみました。 Webアプリケーションなのでブラウザに依存しますが、以下のサイトにモバイルブラウザ別対応状況が書かれています。 http://mobilehtml5.org 試したのは以下の機能です。端末はGalaxy NexusとiPod Touch 4世代を使いました。 Androidのバージョンは4.0.4でブラウザはChromeと一部Firefoxです。iOSは5.0.1、Safariで試しました。 スマートフォンで確認できるようにサンプルを作ったので試してみて下さい。 タッチイベント(Touch Events) マルチメディア(Multimedia) 位置情報の取得(Geolocation API) 加速度センサー(Motion Sensors) ファイルアクセス(F
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ! 見よ、この格好いいドロップダウン!テキストに加えて画像が表示できるようになっています! ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん! もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応! デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね!ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)! 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました!このテ
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く