ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
Fathom.jsはJavaScriptによるHTMLプレゼンテーションライブラリ。 Fathom.jsはJavaScript製のオープンソース・ソフトウェア。プレゼンテーションの資料はその場限りの代物ではなく、サービスや商品を知ってもらうのにキーになるものだ。それだけにバイナリで作成しておくのは勿体ない。Googleで検索できたとしてもPowerPointやPDFを開きたいと思うだろうか。 スライドの例 HTMLで作成しておけば、検索で使ったり再利用性も高くなる。特にプログラマーであればテキストエディタで作成できる方が効率的だろう。作成した内容はFathom.jsでスライドにできる。 Fathom.jsはHTMLファイルをスライドにして表示するライブラリだ。矢印キーで移動するだけのシンプルなライブラリだが、最低限の動きはする。基本はdiv.slideという単位でスライド表示を行う。画像や
昨日に引き続いて、今日も作成中の Google App Engine アプリ用のUI部品の作成。HTMLの一部に記述された（もしくは別途JSONで取得した）ワード・リストの入力を autocomplete を使って簡単にしようという試み（Google Suggestのようにダイナミックにリストを取得する必要はない）。 そこで、まずは既存のライブラリ・プラグインの調査から。必要とする人も多いようで、少し調べただけで２０個ぐらい見つかる。デモを見て５つに絞ってからそれぞれのソースコードを解析。例によってどうしようもない品質のコードもあるので、結局のところたどり着いたのは、比較的コードがきれいなこの二つ。 jQuery Autocomplete Mod JQuery Plugins by Dylan Verheul - autocomplete どちらかをそのまま使っても良かったのだが、どちらも
Webシステムを開発する際に問題になりやすいのが帳票やレポートの扱いだ。そのレイアウトを含めて柔軟に変更できる必要があり、それでいて開発工数を低くする必要がある。PDFはHTMLとは異なるので、柔軟なレイアウト設計を可能にするライブラリはとても貴重だ。 元HTMLファイル そう、レイアウトがHTMLと異なるのが問題なのだ。それを一緒にできれば、どれだけ幸せになれるだろう。 今回紹介するオープンソース・ソフトウェアはmPDF、HTMLからPDFを生成するソフトウェアだ。 mPDFは現状では日本語には対応していないが、UTF-8に対応しているのでフォントや設定を行えば問題なく表示できると思われる。実際アラビア語も表示できている。HTMLをテンプレートとしてPDFを生成するのが特徴だ。 PDF化されたファイル 画像や外部リンク、CSSによるレイアウト設計をある程度PDFとして実現してくれる。テー
CSSやJavaScriptが多用されるようになり、一般的なオーサリングツールでは求めるデザインが容易にはうまくいかなくなっている。そのため技術者の場合は手打ちでHTMLを描く人も多いはずだ。だが、面倒なのは確かだ。 各種エディタで利用可能 もっとシンプルにタグ入力を行いたい、そう考える方に使ってみて欲しいのがZen-codingだ。 今回紹介するオープンソース・ソフトウェアはZen-coding、各種エディタと連携するHTML/CSS補完ライブラリだ。 Zen-codingは単なる入力補完ではない。その書き方が変わっていて、div#headerと書けば、<div id="header"></div>に展開される。もちろんクラスの場合はドットでつなげば良い。複数のクラス指定も可能になっている。詳しくは下記のチュートリアル動画を参考にされたい。なおTextMateで試したところ、一部うまくい
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
ブログや開発者向けのWebサービスなどで、ソースコードのハイライトを行うケースはよくある。言語があらかじめ決まっている場合は良いが、言語がよくわからない場合や、JavaScriptとHTMLのように埋め込みで複数の言語が重なる場合もある。 各種言語に対応したハイライター そのような、特定の言語に依らずにソースコードをハイライト化したい場合に便利なのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGoogle Code Prettify、JavaScriptによるソースコードハイライターだ。 Google Code Prettifyの使い方は簡単だ。prettify.jsとprettify.cssを読み込んで、<pre class="prettyprint">または<code class="prettyprint">タグの中にコードを書き込めば良い。後はprettyPrint
Top 10 Tools to Get Blogging Done | Lifehacker 同じような話題が続きますが、私はブログを書くのには Ecto よりも MarsEdit派です。WYSIWYG よりも、HTML が見える方が好きで、それでいて WYSIWYG エディタと同じショートカットでタグを入れられるのが好みなのです。 ただちょっと面倒なのが、ブログの記事の表題などのような「リンク付きのテキスト」をコピーしてくるときに、「まずテキストをコピーして、次に URL をコピーして…」と二度手間になってしまうところです。Wordpress のビジュアルモードのエディタだと（たしか TypePad も）スタイルとリンクもコピーできますが、h1 や h2 のタグをいちいち外すのも面倒です。 そんな、たいしたことないけれども難解も繰り返す作業を一度の右クリックで実現してくれる CoLT (
What is it? Ok, here's the deal. Put your XHTML code below, we will grab it and send over to one of our scientists. He will do his voodoo and in return you will get a corresponding CSS frame. And yup, it's free. More information This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure - each selector and all of its properties and values in one line.
WYSIWYGで編集できるエディタは、一般ユーザをはじめ、HTMLに不慣れな人でも簡単に文字装飾が施せるので便利だ。単なるテキストでは分かりづらい情報でも、装飾や文字の配置を工夫することでコンテンツを分かりやすくすることができる。 様々なWYSIWYGエディタが存在するが、Webブラウザ向けに高機能なものを探しているならこちらをどうぞ。 今回紹介するオープンソース・ソフトウェアはTinyMCE、Webベースの高機能WYSIWYGエディタだ。 TinyMCEはMOStlyCEという名称でMambo CMSのコンテンツ編集機能として利用されている。十分に多機能なCMSでも使えるレベルということだろう。ツールバーの項目が数多く、相当な機能が実装されているのが分かるはずだ。 単純な文字装飾はもちろん、ファイル管理、画像の簡易編集と管理、XHTML対応、MS Wordの貼付け対応、プラグイン機能など
テキストエディターの感覚で手軽に利用できるHTMLエディター「Crescent Eve」v0.7が、1月27日に公開された。Windows 98/Me/NT 4.0/2000/XPに対応するフリーソフトで、編集部にてWindows Vistaでの動作も確認した。現在、作者のホームページからダウンロードできる。 「Crescent Eve」は、テキストエディターほどの軽快さと編集機能を備えたSDI形式のHTMLエディター。縦に3分割された画面構成で、上がHTMLタグを編集するエディター、中央が文法チェック画面、下が編集中HTMLファイルのリアルタイムプレビュー画面となっている。既存のHTMLファイルを更新する場合など、手軽にHTMLエディターを利用したい場合に適したソフトのため、インストール時の設定でエクスプローラの［送る］メニューに登録しておくと便利だ。 テキスト編集では、選択範囲の各種変
Just type or paste an URL in the form above, and click on "check it" to see the magic. If you want to fine tune your validation, click on the "advanced" link. That's it! An Idea: The Social Media Algebra I used to be very good at maths. I really was. Then I started studying computer science stuff (which is normal for a computer scientist) and as time goes by, I forgot many of the coolest stuff I l
Your Andy's account is now active and you're logged in. All available coupons will be applied automatically in your shopping cart! Your Andy's account is now active and you're logged in. All available coupons will be applied automatically in your shopping cart! Every once in a while, we at Andy's peer outside the industry and share a glimpse of things we find interesting. That's what you'll find b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く