データ入力画面のある案件で、名前とフリガナを入力するときに2回同じワードをタイプするのは面倒だよな～と思って、フリガナ自動入力機能をつけてみました。 これを利用することで、漢字変換前の入力段階から自動的にフリガナを入力させることができます。 試しに設置してみたサンプルがこちら フリガナ自動入力ライブラリ autoKana.js のサンプル 参考記事 Rubricks Project - autoRuby.jsをDISってみる CakePHP環境での設置手順 1. prototype.js, autoRuby.js を /app/webroot/js に設置 （autoRuby.js はPHPの出力文字コードで保存する） 2. view にhtmlヘッダにjsを読み込ませるためのコードを追加する 3. new AutoKana('name_id', 'kana_id', [opt
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
デジタルカメラやカメラ付携帯電話で撮った写真をブログや写真共有サイトにアップしている人も多いだろう。ブラウジングしていると様々な画像に出会うが、画像を閲覧したり保存するには、Webブラウザだけでは不十分なこともある。Firefoxのアドオンには、Webページ上の画像を扱う際に役立つものも数多い。 入れておきたいFirefoxアドオン - ジャンル別リスト 「マウスジェスチャー編」 入れておきたいFirefoxアドオン - ジャンル別リスト 「検索編」 入れておきたいFirefoxアドオン - ジャンル別リスト 「Webスクラップ編」 入れておきたいFirefoxアドオン - ジャンル別リスト「タブ拡張編」 入れておきたいFirefoxアドオン - ジャンル別リスト「Gmail編」 入れておきたいFirefoxアドオン - ジャンル別リスト「ブックマーク編」 入れておきたいFir
ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある（画像クリックでサンプルページを表示します） ロールオーバーの基本的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像（img要素）の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白（すき間）を防ぐためです。コメントを
25 Comments Should have compiled all of the actions into one downloadable file..But still, great addition! 🙂 thank you for the great actions. Really interesting collection – thank you. wish some of these had tutorials with explanations. The actions need to be tweaked to work better with different pictures. Great list! I have some of these but the ones are I don’t have will be a wonderful addition
pbtweet は、とても便利なのだが、最終版となってしまった。 よって、今後のアップデートはない（なにやらリリースされるらしいが）わけで、いろんなスクリプトを試しています。 Reply をサイドバーに表示 Twitter Sidebar Replies for Greasemonkey Reply をインライン表示 Nested Twitter Replies for Greasemonkey ショートカットを追加 Twitter Shortcut Lite for Greasemonkey 公式 Retweet を見やすくする Retweet Avatars for Greasemonkey 次のページを読み込む／Reply の補完 などなど Endless Tweets for Greasemonkey 新着通知を自動で開く gist: 237141 - [GM Script]Twi
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 第10回今すぐできる！ユーザビリティを向上させるフォーム操作実践（2）：プラグインを使わずにバリデーションを実装 バリデーションをプラグインを使わずに実装する フォームは主にコンバージョンに直結する場合が多いと思いますので、ユーザビリティを向上させる、つまりユーザーに最後まで入力してもらえるようなフォーム作りはとても重要です。 どのような機能を持って使いやすくするのか、にはそのサイト自体のターゲットユーザー層を認識した上で盛り込む必要がありますが、どんな方法で使いやすくできるのかは知っておいて損はありません。 前回は、ラベル要素を利用して、直感的に分かりやすくする方法を紹介しましたが、今回・次回にかけては少し突っ込んでJavaScriptで行うバリデーション（※1）を実装してみたいと思います。 入力された文字列をチェックす
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
高速ウェブアプリのためのCSSパフォーマンス - CSS Performance for Fast Web Applications | warikiru
2009-12-04 高速ウェブアプリのためのCSSパフォーマンス - CSS Performance for Fast Web Applications ラベル: report Web Directions East 2009 カンファレンス 11月13日 15:00–16:00 Nicole Sullivan（ニコール・サリバン）3000以上にも昇る大規模サイトの最適化に携わって来た Nicole Sullivan は、現在 Yahoo! のパフォーマンスエンジニアと最適化のエバンジェリストとして国内外のセミナーで講演。Webサイトに関する研究だけでなく、プロジェクト管理もこなすマルチタスクなリーダーシップを発揮。フロントエンドエンジニアとしての高いスキルを持つ。 ContactsStubbornella - BlogNicole Sullivan (stubbornella) on
登録や申し込みページの入力フォームにおいて、郵便番号を入力すると住所欄が自動入力される機能は、ユーザの入力負荷を軽減する便利な機能です。実はこの機能、正しく郵便番号を入力してもある条件下ではエラーとなってしまうことがあることをご存知でしょうか。今回は入力フォームでの「郵便番号」の意外な盲点についてご紹介します。 ただ、「会社」で用いられている郵便番号は一般的な郵便番号と異なる場合があります。 郵便番号は、特定の企業（１日の配達量が一定量を超えるような事業所）に対して「大口事業所個別番号」という事業者向けの郵便番号を割り当てており、該当する企業はこの割り当てられた郵便番号を使用しています。 しかし、郵便番号から「住所を自動入力する機能」が参照している郵便番号は必ずしもこの「大口事業所個別番号」に対応しているわけではありません。入力された郵便番号が対応していない「大口事業所個別番号」であった場
いよいよ師走に突入しました。 この季節になると良く耳にするのが、「流行語大賞」や「2009年●×大賞」といった1年を振り返る話題ですよね。 Web界隈で言うと、今年話題になったもののひとつとして「Twitter」は外せないのではないでしょうか。 そのTwitterですが、最近ではプログラムによって自動でツイートされるTwitter botも増えてきて、天気予報やニュースを配信する便利系から、お笑い芸人のパロディなどのエンタメ系まで様々です。 プログラマが個人で制作されているケースも多く、Googleで検索すると制作の参考になるサイトが結構引っかかります。 今回は、それらのサイトを参考に個人的にTwitter botを制作したときのメモをまとめたいと思います。 もしよろしければご参考ください。 まずは、Twitter botの核となるプログラム 今回はPHPで組みました。 「なぜ、PHPなの
In a world filled with constant activity and distractions, maintaining a tidy and organized living space can be a source of tranquility and harmony. Decluttering and organization are not just about aesthetics; they also contribute to mental well-being and productivity. This article offers practical tips to help you achieve a more serene and orderly living space, enhancing your quality of life. 1.
Home > UI（インターフェース） > ユーザーインターフェースの検証データを公開している「ABtests.com」は、ウェブマスター必見事例の宝庫 Older ウェブの位置づけが上がるにつれ、数値的な検証がどんどん進んでいます。 ただ、その割りにどんな方法で数字が上がった、という具体的な事例がまだまだ世の中に出回っていないのも事実。 そんな中、A/Bテストの特化してインターフェースの検証事例を公開しているサイトがABtests.com」です。 インターフェースの比較検証結果が数値でわかる http://www.abtests.com/ ABtests.comの中身は、はまさに読んでそのまんまの内容。 トップページから事例が豊富に掲載されています。 例えば・・・ このフォーム、左と右でどちらが通過率が良いと思いますか？ 答えはこちらのページにて。 なかなかここまで数字で結果を出してくれ
WordPressを使ったサイトのサイドバー などに良く表示されているカテゴリーや ページへのリンクに簡単にアイコンを 付けられるプラグイン・Category and page iconsをご紹介します。 ネーミングそのままですね。正直cssで設定するのは面倒な作業だったのでこれは結構需要の高そうなプラグインかも。冒頭のようにカテゴリーやページへのリンクを表示させている方も多いと思いますが、そのリンクの頭にアイコンを加えることが出来ます。 リンクの頭にアイコンを付ける事で可視性が高まり、ユーザビリティを向上させることが可能です。導入も手軽ですが、テーマによっては多少cssに変更を加える必要があるかもしれません。 Category and page iconsインストール Category and page iconsをダウンロードし解凍 wp-content/plugins/内にフォルダご
mineoを契約する時の初期費用、けっこうかかりますよね…。 ①契約事務手数料・・・3300円 ②SIMカード発行料・・・440円 ①＋②で合計3740円となりますが、申し込み時にエントリーパッケージ（エントリーコード）を使えば、①の契約事...
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
10月20日に、公開されたグーグルアナリティクスAPIを使ったExcelライブラリ。 そのライブラリを使ったサンプルExcelファイルが公開されました。 GA4Excel サンプル – 個人事業主のつぶやき 使い慣れたExcelで、グーグルアナリティクスを分析できる という凄いサンプルになっています。 １．ダウンロード 上記リンクをクリックしアクセスしましたら、「サンプル」というリンクを右クリックして 名前を付けて保存。 ２．ファイルの有効化 ダウンロードしたGAAPI_sample.xlsを開きますと、メッセージが表示されますので、 「マクロを有効にする」にします。 ３．アカウント情報を入力 メールアドレスとパスワードを入力し、ツール＞マクロ＞マクロ、とし [実行]をクリックします。 ４．プロファイルIDをコピー 実行後、Google Analytics のプロファイルID一覧が表示され
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説見出しやテキストを画像に置換するjQueryプラグイン。 画像の拡張子を除くファイル名部分を要素のID名に指定すると、ページを読込時に、ID名に指定した画像をその要素内にimg要素として挿入し、テキスト部分は画像の代替テキストになります。 要素内にリンクを含む場合も問題なく置換されます。 オプションで画像フォルダへのパスも指定できます。 ▼ソース <h1 id='heading1' class='jqir'>見出し1</h1> <h2 class='jqir {src:heading2.png}'>見出し2</h2> <h3 id='heading3' class='jqir'><a href='http://jquery.com'
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説無料レンタルサーバーを使ってるけど、本格的にサイト運営しようかな･･･ と思っているなら安くてサポートが充実している「ロリポップ！」がおすすめ★ 月額263円で容量1GB！ もうちょっと容量ほしいならプラス105円の370円で容量2GBにできちゃいます。 ロリポップなら「MovableType」や「Wordpress」も設置できます。 しかも超わかりやすい設置マニュアルがあるので、プログラムとか全然わからなくてOKです。 ブログを自分好みにカスタマイズして、いじりたおしてみたい人にもぴったり♪ ロリポップのいいところはサポート体制がしっかりしているところ！ オンラインマニュアルが充実しているのでほとんどのの疑問はここで解決
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説カスタマイズ性抜群の上級者向けタブブラウザ「Lunascape」 動作の重いFirefoxや、セキュリティホールの多いIEから乗り換えるなら・・・ 高機能かつ拡張性に富んだ『Lunascape』（ルナスケープ）がオススメです。 このブラウザは、驚くほど “ 動作が軽い ” のが魅力！ Firefoxみたいにメモリを食いません（笑） IEのツールバープラグイン、Firefox、Netscapeの一部のプラグインに対応しているので、今まで使っていたプラグインごと乗り換えられます。 IEのお気に入りもブラウザのサイドバーに簡単に組み込めます。 また、RSSリーダー付ブラウザなので、RSSリーダーを使わずにブラウザ上でRSSの購読や管理ができます。 F
新米と秋刀魚のわた焼き お刺身用の秋刀魚を買いました。1尾250円です 3枚におろして、秋刀魚のわたに酒、味醂、醤油で調味して1時間ほど漬け込み、グリルで焼きました 秋刀魚のわた焼き わたの、苦味が程よくマイルドに調味され、クセになる味わいです 艶やかな新米と一緒に 自家製お漬物 土…
Movie MasherはFlash製のオープンソース・ソフトウェア。Webブラウザ上であってもローカルアプリケーションのように操作ができるようになっていることは分かるが、まさかここまでという意識はあった。だができてしまう。それもかなり高性能だ。 Webブラウザベースで動作する動画編集ソフトウェア Movie MasherはFlashを使い、Webブラウザ上で動画の編集ができる。現状では保存機能がないようだが、動画共有サイトに挙げる前にちょっとした加工を行うといった程度であれば十分な可能性を感じさせる。ダウンロードしてすぐに動かせるので試してみることをお勧めしたい。 まず素材は音楽、画像、動画さらにイフェクトをまとめたテーマを選ぶことができる。そしてタイトルを追加したり、キャプションで自由に文字が追加できる。なお日本語は利用できないのでご注意いただきたい。そして画像や動画に対してイフェクト
gaAddonsはJavaScript製のオープンソース・ソフトウェア。自社または個人のWebサイトの解析にGoogle Analyticsを使っている人は多いだろう。標準のままでもWebサイトを運営するのに十分なデータが収集できるので、より良いサイトを目指すのに便利なツールだ。 埋め込むコード しかしAnalyticsのコードが埋め込めないような場所に対しては解析が難しいのが事実だ。例えばダウンロードサイトで、Zipファイルがどれくらいダウンロードされたかなどという測定は難しい。そこで使ってみたいのがgaAddonsだ。 gaAddonsは主に二つの機能をGoogle Analyticsに追加する。一つは外部流出の際にどのリンクへ行ったかが検知できるようになる。各外部リンクに対してoutboundというイベントが追加される。そして二番目にダウンロードの検出だ。デフォルトでオフィス系ファイ
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」 2009年12月04日- PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」が便利です。 PHPを使っていて、JavaScript もかいているときに、PHPのあの関数をJavaScript で実装したいんだけどなぁ、という場合に索引から牽けて参考になります。 例えば、functions ページには使える関数がまとまっているのですが、array系、ソート系、入力チェック系やオブジェクト指向系、日付、ファイルシステム系、Math系、ハッシュなど実に多数のJavaScript用php関数が掲載されています。 例えば、addslashes だと次のような感じでJSのソースが見れます。 function addslashes (str) { return (str+'').repla
これで無料か、と思わせるほど結構 凄いフリーのWordPressのテーマ Magnoliaをご紹介。Magnoliaはか なりカスタマイズされたWordPress のテーマで無料で使うことが可能です。 Magnoliaはファイルをアップロードし、外観で有効化。設定ページも追加されます。以下の7デザインを選択可能です。 スタイルとロゴを設定画面で変更できる ロゴもブラウザ上で変更可能です。設定画面のLogo Image Pathに画像のアドレスを入れれば変更されます。 人気記事、TwitterのPostなどを表示 ウィジェットで色々と管理できます。人気記事、コメント、TwitterのPostを表示するウィジェットの追加も可能になります。お好みで良いと思いますが、Twitterのウィジェットは3にした方が良さそうです。Twitterはウィジェットで編集、アカウント名と表示Post数を設定します
亚洲欧洲自拍拍偷午夜色,国产极品24P,国产乱理伦片在线观看,,日日噜噜夜夜狠狠视频无码,欧美A级毛欧美1级A大片式放,99久久婷婷国产综合精品青草,秋霞午夜理论理论福利无码,单亲和子的性关系A片,亚洲综合另类小说色区色噜噜
モバイルの新規事業担当になった渡邉雄介です。最近は社内や外部でプレゼンさせていただく機会が増え、色々と学びました。 自分がプレゼンする立場になったとき、"うまく説明しなければならない" という漠然としたプレッシャーから、プレゼン自体をネガティブに捉えてしまうことはないでしょうか。今回は、プレゼンを通すために欠かせない、最も重要な4点についてお話しします。 その1: スライドに全てを書かないこと プロジェクターから映し出されるスライドに書いてある文章を、そのまま読みながらプレゼンする人がいますが、私はそういうプレゼンを見ると心の中でこう突っ込みを入れてしまいます。「いちいち読んでくれなくても、そう書いてある！」 スライドはあなたの言葉を視覚的にサポートするものであって、カンペではありません。言うべき言葉でスライドの余白を埋めて、"ちゃんと調べた感" を出そうとするよりも、本当に伝えたいメッセ
なんて呼べばよいのかわからないんですが、「Apple風デザインのアコーディオン型ナビゲーション」と紹介されているものをピュアCSSで作ってみたので公開してみます。 Create an apple style menu and improve it via jQueryで紹介されているKwicks Menu with jQueryみたいなナビゲーションです。 webkit（Safari/Chrome）でしか動きを確認していないので、SafariかChromeで見てください。 Create an apple style menu and improve it via jQuery Kwicks Menu with jQuery ピュアCSSでApple風デザインのアコーディオン型ナビゲーション（デモ） HTMLソース <ol>タグを使用しています。 <ol> <li class="home
はてブ 企業ウェブ担当者必見!? SEOで成果を上げる為の10カ条 delicious livedoor クリップ Tumblr Instapaper メールで送信 IT・Web 2009.10.23 0 「SEO」という言葉を聞いたことがあるでしょうか。 これはIT関連の用語で、「Search engine optimization」の略、つまり「検索エンジン最適化」を意味しています。 もっと簡単にいうと、「ＧoogleやYahoo!で検索された際に、自分のウェブサイトがなるべく上位に表示されるようウェブサイトのソースコードなどを工夫して最適化する」ことで、企業ならともかく個人でブログをやる分にはほとんど考えなくていい要素です。 とはいえ、検索時に上位表示されれば、多くの人を集めることができるのも事実。もっとブログや自サイトに人を集めたい......と考えている人にとって参考になりそうな
ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」 Tweet 2009/10/30 金曜日 matsui Posted in デザイン, 記事紹介・リンク | 1 Comment » 良エントリーがありましたのでご紹介します。 ケータイデザインで出来ること出来ないことがキレイにまとめられた「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」というエントリーです。 → これからゆっくり考L 携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 [sakaki0214.com] ケータイサイトでは、どうしても実現しづらいデザインというものがあります。 このエントリーでは、ケータイで表現できないようなデザイン案をもらわないように、デザインファイルをもらった時にバーッと見てチェックすべき
DESIGNM.AGで、ロゴデザインをする時に参考になるサイトが紹介されています。 4つのカテゴリーに分かれてたくさんありますね。いくつかご紹介します。 ロゴデザインのインスピレーションが得られるサイト » Logo Faves » LogoGala » Logo of the Day ロゴをテーマにしたブログ » Logo Design Love » David Airey » Logo Designer Blog ロゴデザインチュートリアル » Zeeのロゴをillustratorで作る方法 » オバマ大統領のOのロゴの作り方 » レインボーカラーのロゴを作るチュートリアル ロゴに関する記事やケーススタディー » Henri Ehrhartのブランドデザイン » Miskeetoのブランドデザイン » Butterfield Photographyのロゴデザインプロセス よくまとまって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
