wysihtml5 - A better approach to rich text editing
<h1>WYSIHTML5 - A better approach to rich text editing</h1> <p>wysihtml5 is an <span class="wysiwyg-color-green"><a href="https://github.com/xing/wysihtml5">open source</a></span> rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inlin
JavaScriptを高速化する6つのテクニック
Thomas Fuchs, author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. Thomas Fuchs氏が6 easy things you can do to improve your JavaScript runtime performanceにおいてJavaScriptの実行パフォーマンスを改善するための6つのテクニックを紹介している。Thomas Fuchs氏はscript.aculo.usの開発者であるとともにPrototypeコアチームのメンバーも務めている。またRuby on Railsでコアチームで開発を担当していたこともある。 JavaScriptエンジン
イマドキのIDE事情(131) Adobe製のオープンソースHTMLエディタ「Brackets」を試してみよう
Bracketsとは? Bracketsは、PhotoshopなどのグラフィックツールやDreamweaver、Flashといったオーサリングツールでお馴染みのAdobeがオープンソースで開発しているWeb開発用のエディタで、HTML、JavaScript、CSSで実装されている。 まだ開発が始まったばかりのプロダクトではあるが、今後の可能性を探るという意味も込めて、今回はこのBracketsを取り上げてみたい。 Bracketsをインストールしてみよう まず、Bracketsのダウンロードページから最新のアーカイブをダウンロードし、適当なディレクトリに展開しよう。binディレクトリ内にWindows用、Mac用の起動用バイナリが格納されており、Windowsの場合は「bin/win/Brackets.exe」をダブルクリックすることで、Bracketsが起動する。 Bracketsの画面
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ
オープンソースの負荷テストツール (Jakarta JMeter)
Jakarta のプロジェクトに JMeter という負荷テスト用のツールがあります。 世の中、負荷テストのツールなんかはたいへん高価なことが多いので、オープンソースでこういうものがあると非常に助かりますね!! ちょっと使い方を見ていきましょう。 導入 導入はサイトからダウンロードして適当なディレクトリに解凍するだけです。 起動 解凍した先のディレクトリの bin サブディレクトリから jmeter と実行すると以下のような画面が出てきます。 ロケールの設定を見て日本語が出ます。 テストの定義/設定 スレッドグループ 「テストプラン」を選択して、右クリックメニューで「追加」-「スレッドグループ」をクリックしてください。 この「スレッドグループ」で、アクセスするリクエスト = クライアントをシミュレートします。 「スレッド数」がクライアントの数ですね。 「Ramp-Up 期間」は、その指定し
スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」:phpspot開発日誌
natrixnatrix89/promptumenu @ GitHub スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 iPhoneのホーム画面でフリックによってメニューがスライドできるというようなものをブラウザ上で実現できます。 当然、PCだけでなく、スマホでもフリック可能で、動きがなめらかなのもいいです。スマホのメニューを作るなら使えそうです フリック可能 実装も超簡単です。ulにメニューを並べて初期化するだけ 自分で作ると大変そうなところをやってくれるのはありがたいですね。 関連エントリ デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」 時間の入力を楽にすることが出来るjQueryプラグイン アニメーションする
WebSocketによるクライアント＝サーバー通信(1/7):JavaScriptによるHTML5プログラミング入門 - libro
HTML5では、クライアント＝サーバー間の通信に関する技術も追加されています。それが「WebSocket」と呼ばれるものです。これにより、Webブラウザからサーバーに、JavaScriptで通信することが可能になります。 ……なんて説明すると、「えっ、今までもAjaxとかでできたはずじゃ？」と思うかも知れません。確かにAjaxを利用すれば、JavaScriptを利用してクライアント（Webブラウザ）からサーバーに通信をすることができます。しかし、Ajaxによる通信は、それほど高度なものではないのです。 Ajax通信は、単に「クライアントからサーバーにアクセスし、結果を受け取って終わり」ということしかできません。どういうことかというと、「通信を維持し続けることができない」ということなのです。中には、Cometと呼ばれる技術などのように、Ajaxを巧みに利用して通信し続けるようなものも登場して
HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた － Publickey
HTML5にはオフラインアプリケーション機能があり、オフラインに対応したWebサイトを作ることができます。Webブラウザでいちど表示させれば、あとはネットワークとの接続が切れてもそのままエラーを起こさずに利用し続けられるWebサイトです。 iPod TouchやiPhoneに搭載されているWebブラウザの「Safari」はHTML5のオフラインアプリケーション機能に対応しているそうなので、HTML5を使っていつでも参照できる超簡単なアプリを作れるのではないか、そう思ってお正月休みに試してみることにしました。 単に路線図を表示するだけのアプリ iPod Touchを僕は利用しているのですが、いつでも参照できる地下鉄の路線図があるといいなと思っていました。iPod TouchはWifi機能しかないため、外出中はずっとオフラインでの利用なのです。 そこで、起動すると路線図の画像を表示するだけの超
Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade
A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade Overview Features Examples Documentation Download @LeafletJS GitHub Repo Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API. It is built fro
大手ブログが軒並み採用する鉄板の広告位置について考える - FutureInsight.info
Geekなページの以下のエントリーにメルマガとブログの広告の位置についての言及がありました。 有料メルマガを廃刊しました:Geekなぺーじ メルマガ開始とともに広告収入が増えたのも大きな変化でした。 最大の要因は広告の配置を変更したことなのですが、それによって広告収入が倍近くになりました。 前々から広告を目立つ位置に変更すれば収入が増えるのはわかっていたのですが、「目立つ場所は人によっては邪魔な位置だ」と私が考えていたので、その変更を行うところまで数年間踏み切れませんでした。 しかし、メルマガを開始するような方向性を含めて、そろそろ何とか生活を成り立たせようと本気で模索する必要があるという意味では、そういった個人的な美学が本当に正しいのかということを含めて、位置変更をしてみようと思ってやってみました。 結果、広告配置に関しての苦情もいまのところはなく、広告収入は増えました。 （増えたといっ
月額980円のさくらVPSを個人用に使い倒す - ゆーすけべー日記
Webサービスの運営用にVPSと呼ばれるバーチャル・プライベート・サーバを借りることは昨今よくあることだと思います。 VPSのサーバを借りればroot権限を持てることになるので、自由度が高いサーバ環境を構築することができます。 また、スペックによって価格が違っていて、低いスペックなものだと月額かなり低価格なものが存在します。 僕はその中でも月額980円のさくらVPSを借りていて、それを個人用に限って使っています。 これから紹介するような用途であれば980円でもかなりいけます。 ちなみに980円コースのスペックは2012年3月現在で以下のようなものです。 メモリ: 512MB HDD: 20GB CPU: 2Core(仮想) gitリモートレポジトリ 僕が現行で行っているWebサービスでもiPhoneアプリ開発でもバージョン管理は必要になってきて、 そのためのプライベートなレポジトリが欲しく
30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記
Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモ
『【保存版】SEO対策のチェックをするときに必須のサイト7選』
◆SEOチェキ! SEOに役立つさまざまな情報を、調査できるSEOツール。 title・meta description・meta keywords・h1タグ 発リンク数（内部リンク・外部リンク） 最終更新日時・ファイルサイズ・読込時間 Googleページランク・Alexaランキング Google・Yahoo!の被リンク数・インデックス数 Yahoo!カテゴリ等、各ディレクトリの登録状況 Twitterのツイート数 Facebookの「いいね！」の数 ソーシャルブックマーク登録数 などの総合的な情報を1クリックでチェックできます。 http://seocheki.net/ ◆検索数予測チェックツール 検索順位ごとのアクセス数を予測するツール。 検索数予測チェックツールは、検索順位別に検索数を調べることができる、キーワード検索数調査・予測ツールです。キーワードを入力してクリックするだけで、Y
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT
JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Good night, Posterous
https://jp.techcrunch.com/2012/01/11/20120110google-fuses-google-into-search-and-there-are-bigger-changes-afoot/
