iPhoneやiPadでHTMLのソースを見るのつくった - Webtech Walker
i-sourceviewというのをGAE/Pythonでつくってみました。 i-sourceview hokaccha’s i-sourceview at master - GitHub 同じようなことはアプリとかJS(Bookmarklet)でできるんですけど、アプリだと別途立ち上げが必要だったり、JSだとDOCTYPEが取れなかったりシンタックスハイライトがなかったりします。なのでサーバー側からリクエストしてHTML取得してシンタックスハイライトしたり行番号もつけてみたりしました。 それでつくってみたものの、認証がかかってるページがとれなかったり、JSで書き換えた後のソースが見たい場合もあるなあと思って結局JSで取得するのも用意しました。この二つを併用すれば大体ことたりるかなと。 シンタックスとかはchromeのソースビューに合わせてみました。 こんな感じになります。
.htaccessでMIMEタイプの設定を行う
.htaccess活用法（10） .htaccess（拡張子がhtaccessということで、ドットが必要です。ファイル名がないので最初戸惑いますが、こういうものだと思ってください。）が利用可能だと、 アクセス制限（Basic認証）が可能。 特定のホスト（IPアドレス。プロバイダ）からのアクセスを制限することが可能 参照元（Referer）によるアクセス制限が可能（画像の直リンク禁止も可能） 特定のユーザーエージェント（ブラウザ・ロボット）からのアクセス制限が可能 ブラウザ経由でのアクセス（http://～）を拒否することも可能（大切なデータファイルを守る） リダイレクトが可能（ページの移転時などに重宝） 404 File Not Foundページのカスタマイズが可能。 拡張子別に文字コードを設定することが可能。（文字化け対策に必須の場合があります。） index.cgiやindex.php
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] - とっくりばー
2013/1/28 サーバーを引っ越しました。お手数ですがブックマークし直してください。ついでにscriptタグとHTMLコメントを除外できるように機能もアップしてますから！ 必要に駆られてタグの閉じ忘れを簡単にチェックするブックマークレットを作ってみた。 ほんとに開いたタグの閉じ忘れしか検出できなくて、たとえば開いてないのに閉じてるタグとか、閉じタグと開きタグが互い違いになっちゃってるとこの検出とかはなにもやってない。（11/29現在）11/30 New! 出来るようになりました 機能 ブックマークレットを実行すると ・タグの閉じ忘れを検索する ・開きタグがない閉じタグを検索する ・親より先に閉じちゃってる子がないか検索する ・タグ対応エラーの一覧と、ソースコード中のハイライト表示 以上。たったこんだけのことをやるツールが意外と無かった…いや、あるけど。W3Cツールじゃいかんのかと。でも
はねつき » IE7以下だとものすごいページが重かった件
上の画像は、画像が無いとちょっと寂しいかなーと思ったので作ってみました。気が変れば削除してるかもしれませんが・・・。 でまぁ、タイトルの話。前々から気づいてはいたんですが、原因がわからずずっと放置してた、IE7以下の環境で見るとこのサイトがものすごく重いという状態。 いつも使ってるブラウザがOperaな自分なんで、軽く無視してたら、色々な方に重い重いと言われるので別環境を用意して見てみたんです。したら、こりゃ放置していいレベルじゃないな、というわけで1週間ぐらい原因を探してました。 で、ようやく原因がわかって修正しました。でもその原因がちょっと謎で、まだ解んないコトもあるので、自分用メモとして書いておこうかなと。 つわけで内容は以下、って言ってもそんなすごい話じゃないですよ。 とりあえずダイエット 今の状態でも見る人が見ると若干重いと思うんです、このサイト。でも、修正する前はC2DE840
HTML5時代の「運営しやすいアーキテクチャ」の話
増井君と二人でPhotoShareというサービスを立ち上げてもう１５ヶ月になるが、いろいろと学んだことがある。その中でもつくづく思うのは、サービスを作り上げる段階よりも、運営のことを考えた設計が大切なこと。つまり、メンテナンスしやすい、テストしやすい、多少のミスをしても大丈夫、こまめなアップデートがしやすい、作業分担がしやすい、などなどである。 そんななかで強く感じるのは、「AJAXを見た目や使いやすさの面だけに利用するだけでなく、『運営しやすいサービス』を作るのに利用できないか」ということである。 私のイメージするアーキテクチャを図にするとこんな感じになる。 まず一番の特徴は、テンプレート等を利用したHTMLのダイナミックな生成をすべてやめて、データ（JSONもしくはXML)だけをダイナミックに生成するようにし、HTMLはスタティック・ファイルをサーバー側に置いておく（上の図で、CSS,
HTMLとCSSしか書かなかったコーダーは今なにしてる？ - Hato-Style
2009年09月13日 （日） Web雑談 風邪ひいた。頭が痛くて熱が下がらない...しかし悶々として眠れない。いろいろと他にの人に迷惑かけちゃったり、マジごめんなさい。ちょっと寝付けなくなっちゃったので、横になりながら頭の中で思ってたことをiPhoneでメモ書き。 マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記 HTMLは道具 3ping.org マークアップエンジニア云々に関して書いてみる | Blog hamashun.com プログラミング知らないHTMLコーダーがダメな理由 はてな匿名ダイアリー HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね - kwatchの日記 (X)HTML + CSS しか出来ない人はそれなりに危機感を感じたほうがいいと思った今日の昼ご飯でした。 マークアップエンジ
“Misunderstanding Markup” 日本語訳
このコミックは、“Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip”にあるコミックを、著作者の許可を得て日本語に訳したものです。 元になった記事の翻訳も行っています。“Misunderstanding markup”をご覧ください。 先週、W3CはXHTML 2 Working Groupが年内でその活動を終了すると発表したんだ。単刀直入で、歓迎されるべきことだったんだけど、「XHTMLが終わってしまう」と多くの人を混乱させてしまった。Zeldmanのblogポストに寄せられたコメントを読むと、それが分かると思う。 仕方のない部分もある。異なる技術に、同じような名前がついていたことが原因なんだから。しかも、これは今に始まったことじゃあない。 たとえば、JavaScript。Javaになにか関係しそうだけど、そうじゃないよね。書き方がすこ
HTML5 and The Future of the Web — Smashing Magazine
Some have embraced it, some have discarded it as too far in the future, and some have abandoned a misused friend in favor of an old flame in preparation. Whatever side of the debate you’re on, you’ve most likely heard all the blogging chatter surrounding the “new hotness” that is HTML5. It’s everywhere, it’s coming, and you want to know everything you can before it’s old news. Things like jQuery p
アクセシビリティから考える画像のマークアップ
はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第4回目となる今回は、「画像の代替テキスト」について扱います。「画像の代替テキスト」は、Webアクセシビリティの指針である「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」や「JISX-8341-3（JIS X 8341-3:2004 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ）」の中でも扱われている基本的な部分です。「画像の代替テキスト」について、前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。 対象読者 XHTMLと
nobilog2: 「HTML 5 > Web 2.0」の声かけ確認でITガラパゴス化を防ごう！
まだまだWWDCレポート記事を書かなければならない立場ながら、 今、この心の高ぶりを逃すと、このままチャンスを逃してしまいそうだ。 運よく、私をインタビューするはずだった担当者２名からの連絡もないし、 次の記事について相談しようとした編集者がつかまらないので、 20分１本勝負、校正無しで一気にブログを書きあげよう。 私はYouTubeで見たGoogle IOからも、仕事の合間にちょっとだけ覗いてきたWWDCの会場からも、 先日、足を運び、まだ記事化できていないMozillaの次期Firefoxについてのインタビューからも、 まったく同じ５文字のシグナルを受けとった。 「HTML5」 このシグナルを受信すると、 実は4.0=3.5=3.0 = 5という不可解な数式が成り立ってくる。 つまり (Safari) 4.0=HTML 5 (FireFox) 3.5= HTML5 (
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
正しいXHTMLマークアップとは？ | umbrella_process blog
XHTMLのマークアップでどうしても許せないというか、気になるやり方をよく見かける。 企業サイトではトップページに最新ニュースの一覧が表示されていることがよくあるが、その部分がかなりの確率でこのように書かれている。 <dl id="news"> <dt>2009.06.02<dt> <dd><a href="~">ニュースのタイトル</a></dd> <dt>2009.06.01<dt> <dd><a href="~">ニュースのタイトル</a></dd> </dl> 要は定義リストを使っているわけだが、これが「正しいコーディングである」と誰かが提唱しているのだろうか、ほんとによく見るんですが、定義リストの本来の意味からは大きく外れているのが気になるんです。 DTDではdl要素について「definition lists – dt for term, dd for its definitio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル』へのコメント
Wireframe Showcase
THE BAWDIES
第2回microformats リンクを拡張するマイクロフォーマット at sloppy idle blog