綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」:phpspot開発日誌
jsTree Examples 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 次のようなWindowsのツリービューっぽいUIが実装できます。JSONやXMLデータをツリーとして表示することが可能です。 アプリケーションで使い慣れた機能をWEBでも簡単に使えるのはいいですね クリックでアイテムの選択も可能です。 実装は最低限次のコードで実現できます $("#demo1").tree(); 関連エントリ WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」
HTML5のclient-side form validationで書かれたattributeからvalidation rulesを抽出し、client/serverでルールを共通化するモジュールを書いた - Kentaro Kuribayashi's blog
Validation Ruleの記述ってけっこう面倒で、うまい方法を思いつけないのでいたのですが、今日、なんとなくHTML5にclient-side form validation specなんてものがあるんだから、それを使ったらいいんじゃないかと思って、ちょっと実装してみました。 http://prepan.org/module/3Yz7PYrBGs https://github.com/kentaro/HTML-ValidationRules 以下のようなメリットがあるのではないかと思っています。 client-side form validationを使いつつ、server-sideでも同じルールを別の形式で書くのは無駄感。 HTML5が、validation rulesをHTMLというフォーマットによって定めているとみなせば、client-side/server-side両方でそれ
ハイパーテキストの停滞 - yanok.net
ウェブは進化している。そう思っている人が、たぶん多いのでしょう。確かに、15年前の素朴なウェブページと今のものとはいろいろ違って見えます。 しかし、ウェブの根本的な考えである「ハイパーテキスト」という機能の面から見ると、ウェブの登場以来、あまりというかほとんど進化していないように思えます。 ハイパーテキストを提唱して有名なのはテッド・ネルソンです。著書『リテラリーマシン』は日本語にも翻訳されています。ウェブの開発にもネルソンのアイディアが影響していると何かで読んだことがあります。しかし、ネルソンが構想していたものに比べると、ウェブで実現されているハイパーテキスト機能は貧弱なものです。 例えば、ウェブで他の文書を引用するときには他のページからコピー・アンド・ペーストするという原始的な方法をとります。一方ネルソンの唱えるハイパーテキストでは、高度なリンク機能を使って、コピーではなくオリジナルの
素のPHPをテンプレートエンジンとして使うときのコーディング規約
プログラムとしてPHPを書くときのコーディング規約は、PEARやZendなど代表的なものがたくさんありますが、テンプレートエンジンとしてPHPを使う場合にはそのまま適用しにくいものです。 テンプレートエンジンのコーディング規約って、検索してもあまり見つからなかったので、個人的に採用しているものを晒してみます。あんまり語る人を見たことがないので、「俺はこうしてるよ」とか「ここキモくね？」とかご意見いただけるとうれしいです。 目指すところ 複雑なロジックをテンプレートに書かない / 書けないように規約で縛る 少しでも読みやすさを追求する できあがりのHTMLの美しさも追及する <%= $this->doctype() %> <html> <head> <%= $this->headMeta() %> <%= $this->headLink() %> <%= $this->headTitle()
デザイナーの作るHTMLを壊したくないWeb開発者のために
フレームワークは数あれどデザイナーの作るHTMLにコードを埋めるテンプレートフレームワークは失格だよね。Strruts,JSP,XSL、Velocity、みんな使えない。 どれもこれも開発工程を考えてないし、手戻りのことが考えられていない。HTML→XSLなんかに変換してしまった日には、デザイン修正があったらどうすんの？大規模修正があったら、これ一つに1人日費やすのは選択ミス以外の何物でもない。とにかく、for eachとif文をデザインコードに埋め込むコードは最悪ね。とにかく、こういうのはHTMLタグに重きをおかないエンジニアonlyの発想でしかない。 また、変換入れると、マスターデザインのデータが２つになることを意味しているわけ。ここで修正ミス、デザインの不一致が起きうる。XSL使ってみたら、実際起きてるし。 そもそもモノ作りとは、何かの状態遷移をもたらすことで発生するビジネスであるな
ist-jo.in - ist jo リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」:phpspot開発日誌
ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 2011年02月16日- jQuery plugin: jQuery.FixedTable - Nova download ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」。 テーブルは便利ですが、左から2番目のカラムは何を意味するんだっけ？という時に下の方にスクロールしていると上まで戻らないといけなかったりしますね。 そこでテーブルヘッダを固定位置にして分かりやすくできるというもの。 テーブルの最左部を固定にしてテーブルを横長にすることも出来ます。 テーブルのヘッダを固定にして通常のテーブルっぽくすることも出来ます。 デモページ 実装も基本的に $(element).fixedTable( options ) で簡単実装
HTML5で進化したフォーム機能 ここが違う！サンプルで見るHTML5（5）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい
divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追
カッコいい管理画面のHTMLテンプレート総まとめ:phpspot開発日誌
カッコいい管理画面のHTMLテンプレート総まとめ。 これまで紹介したエントリや、新しく発見したエントリで紹介されているものを全てマージしてみました。 有償のものも混じってますが、カッコいい管理画面を作りたいといった際にカタログ的に使ってみてもいいかも。 独断ですが、クオリティ順に並べ替えてます。 Simpla Admin Boxie Admin Complete Liquid Admin InAdmin Admin (FREE) Adminizio Lite – Admin Template Admin Templates - Professional XHTML Back-end Template Spring Time – Simple Admin Template Internet Dreams Admin Skin Visual Admin ThePixelDeveloper Ad
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のソースビューに合わせてみました。 こんな感じになります。
HTML触る機会があるユーは、『Html Validator』使っちゃいなよ！
Webの人だったり、Webアプリケーションに関わるプログラマだったり、HTML触る機会がある人は、 Firefoxのアドオンの『Html Validator』を使うべきです。 Firefoxのアドオンのページには、Html Validator :: Add-ons for Firefox 「MacOSⅩでは利用できません。」みたいに書いてあるけども、開発者のページには各OS用が用意されている。 Html Validator for Firefox and Mozilla HTMLの細かい部分はどうでもいいんだけど、（本当はそこに拘っているんですがw） だれかみたいについうっかり閉じタグ忘れてたり、id重複してたりの致命的なヤツはダメでしょ。 Validな例（先日公開した Backlog｜お仕事うまくいきまスター☆） ウインドウ右下が緑丸になる ダメな例（ここのブログw やっぱBlogger
いろいろな言語のコーディング規約，スタイルガイドのリスト — TRIVIAL TECHNOLOGIES 2.0
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー プログラミング言語(C#，VB，PHP，C/C++，Python，Java，Ruby，JavaScript，Objective-C)やHTMLのコーディングスタンダードを集めたリストを発見しました。日本語訳があるものはできるかぎり探し出して，括弧のなかに併記して補ってあります。微妙に古いのが混じってるかな。Rubyは日本発のコーディング規約がある気がする(まつもとさんの日記を見つけた)。 元記事にPerlのスタイルガイドがなかったんだけど，モダンなPerlスタイルガイドがあったら教えて欲しいです:-)。 PythonにはPEP8というコーディングスタイルガイドがあってよく読まれることは
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
HTML の label タグに必ずつけたい CSS
CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
HTMLだけで実現できるクールなオンラインプレゼン 【@maskin】 | TechWave（テックウェーブ）
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 via metamix.com 外出先でのプレゼンとなると、ファイルを転送しなければならなかったり、プレゼン会場のマシンのフォントが違って崩れたり、アプリがインストールされてなかったり面倒なことが山程ある。 結局、自分のノートパソコンを持ってきたのはいいけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
HTML+CSS templating