[B! javascript] hayakawatomoakiのブックマーク

HTML、CSS、JS等のUIコンポーネントライブラリが検索できるUIBox！ | バンクーバーのうぇぶ屋

UI関連のアイデアや表現、もしくはコンポーネントライブラリをとにかく色々見てみたい時ってないですか？ナビゲーションからフォーム、カラーピッカーやプルダウンメニュー等、UIの表現を考える時ちょっと探したいってシチュエーションは結構あると思います！僕であれば、レスポンシブ対応のナビゲーションなんかは結構どういう形が理想か、まだまだ暗中模索状態って感じですので、色んなサイトを参考にしたい所です！そんなこと考えている時に直ぐ検索してみることが出来るサイトが今日ご紹介させて頂くUIBoxです！ UIの参考となるヒントがもしかしたら見つかるかもしれませんので、是非一度除いてみてください〜！ UIBox – Curated HTML, CSS, JS UI Component Library 検索フォームからのUI検索が可能ですねー。例えばナビゲーションに関するUIのコンポーネントが見たかったら、

hayakawatomoaki 2013/09/12

リンク

jQuery プラグインの定義パターンについて調べてみた - Cyokodog :: Diary

jQuery のプラグインの定義手法については、いろいろな記述の仕方が考えられるかと思います。今回、実際に公開されているソースを参照して、どのような定義パターンがあるのかを調べてみました。 jQuery 標準 API の定義構造のおさらいまず、jQuery が標準で提供している各種 API が、どうのような構造で定義されてるかおさらいしてみます。 $ や jQuery はグローバル変数、つまり window オブジェクトのプロパティ名であり、その実体は関数オブジェクトです。 window.$ = window.jQuery = function(){ ... } jQuery が提供する API には関数 API とメソッド API があり、関数 API は jQuery 関数オブジェクト（以降 jQuery セレクタと記述します）が持つ、関数オブジェクトのことを指します。 jQue

hayakawatomoaki 2012/03/27

めちゃ参考になるぜよ

リンク

アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate - かちびと.net

使いどころもありそうだったので備忘録。文字をアニメーションしながら少しずつ表示させていく様なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。以下動作サンプルです。 Sample コード <script type='text/javascript' src='http://ajax.google apis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" sr

hayakawatomoaki 2012/03/23

リンク

webRTCで顔認識(face.js)を試してみた。 - Alumican on workbench

face.jsって、なんか、顔認識できるらしいぞ。凄い！そんなわけで、試してみる。 ccv.jsとface.jsを使うと実現できるぽい。 ccv.jsは、コンピュータビジョンのライブラリ。 face.jsは、顔認識するためのパターンデータみたい。２つのソースは、以下から取得してきた。（どこがオリジナルかわからず。。。） https://github.com/wesbos/HTML5-Face-Detection 顔を認識っていったら、誰もが一度はやってみたいと思ったはず。顔を笑い男に上書きするやつを書いてみた。ソース(sample02.html) <html> <head> <title>sample02</title> <script type="text/javascript" src="./js/ccv.js"></script> <script type="text/jav

hayakawatomoaki 2012/03/23

javascript

リンク

HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup

Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。

hayakawatomoaki 2012/03/22

javascript

リンク

[JS]表示サイズにあわせて最適なレイアウトを提供する高性能なスライドショーのスクリプト -Camera

表示サイズに合わせて、スライドショー自体のサイズやサムネイルなどを最適な状態で提供するスライドショーを実装するjQueryのプラグインを紹介します。もうすぐ始まるIEの自動アップデートのIE8にも対応しています。 Camera | a free jQuery slideshow by Pixedelic [ad#ad-2] Cameraのデモ Cameraの使い方 Cameraのデモデモは上記のトップにあるものと、他に3種類のスライドショーがあります。トップのものが一番シンプルで、Cameraの基本性能を楽しめます。画像の切り替えには、美しいアニメーションが採用されています。デモ：Fullscreen フルスクリーンタイプのスライドショー。 Cameraの使い方 Cameraで使用する基本的なHTMLの構造から。 HTML div要素にHTML5の独自属性で「data-src」を

hayakawatomoaki 2012/03/12

javascript

リンク

jQueryのbindメソッドとliveメソッドの簡単な違いや使い方 – bl6.jp

bindとliveの違いがちょっとわかりずらかったのでまとめてみました。bindもliveも基本的な記述の仕方は同じなので、使い方を覚えれば色々応用できそうな感じですね。といってもまだそこまでの知識や技術がさっぱりなので大分時間がかかりそうですけど。 [ads_center] bindメソッドの使い方 bindメソッドを使えば色んなイベントを対応させることができます。なので普通のイベント処理をbindを使って書くこともできます。 bindを使わない場合のやり方まずはbindを使わずに普通にclickイベントの処理を書いてみます。 JavaScript $(function(){ $('#sample').click(function(){ $('p').text('サンプルテキスト'); }); }); HTML <div id="sample"><p></p></div> div#sa

hayakawatomoaki 2012/03/12

リンク

CoffeeScriptをおすすめしたいワケ

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 以下のエントリでも少し書いたけれども、 CoffeeScriptいいかも - Takazudo hamalogそれ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、サンプルこのひとまとめのUIを管理するクラス的な物を作ろうとしたら、例えば以下のようになる。 var Hoge = function(el) { this.content = el.find

hayakawatomoaki 2012/03/12

javascript

リンク

画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」:phpspot開発日誌

Adipoli jQuery Image Hover Effects 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」画像にカーソルを合わせるとアニメーションを画像に重ねて、インタラクティブな効果を持たせることができますただ画像を並べるよりも面白いものが作れそうです $('#image1').adipoli(); 使い方もこんな感じで死ぬほど簡単です勿論多彩なオプションでカスタマイズ可能です関連エントリフリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」

hayakawatomoaki 2012/03/08

リンク

CSS で作るスマートフォン向け片手操作メニュー

ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック（タップ）で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用）で作ってみたので紹介。久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック（タップ）で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用）で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニューサンプル現在最新版の Firefox

hayakawatomoaki 2012/03/05

おお！ネイティブpathアプリみたい！お手元のAndroidだとレイアウト崩れた。。。

リンク

[JS]エレメントの背景画像のサイズを自動的に表示サイズに合わせて最適化するスクリプト -jQuery Anystretch

ページ上のさまざまなブロックレベルの要素の背景に設定した画像のサイズを自動的に、表示サイズに合わせて最適化するjQueryのプラグインを紹介します。デモページ：幅480pxで表示 Anystretchの使い方外部ファイル「jquery.js」と当スクリプトをページの下、</body>の上あたりに記述します。 <script type="text/javascript" src="https://ajax.google apis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/jquery.anystretch.min.js"></script> HTML HTMLの記述は通常通りです。下記はデモページの一番上のコードです。 ※jQueryのセレクタで背景を表

hayakawatomoaki 2012/03/05

リンク

jQuery Mobileを使った国内スマホサイトまとめ (1/3)

jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201

hayakawatomoaki 2012/03/01

リンク

30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記

Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。特定のキーワードでInstagramの最新の写真を検索したい時があります。例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。今回はこのようなちょっとした欲求から考えた「Webサービスのモ

hayakawatomoaki 2012/02/23

リンク

絶対買うんだよ→初心者でも3時間もあればプログラミングできる「enchant.js」のバイブル本発売【増田(@maskin)真樹】 : TechWave

[読了時間:2分] 「アプリやウェブサイトがどんな風にプログラムされているか知りたい」「プログラミングしてみたい」そう思う人がジワジワ増えている。TechWaveでは、そんな初心者の夢を実現するのに最適といえるUEI(ユビキタスエンターテインメント)の「enchant.js」に注目してきたが、そのバイブルとも言える教科書本「HTML5とJavaScriptでスマートフォンゲーム作成！ゼロからはじめるenchant.js入門【公式ガイド】」が遂に発売となった。若干技術用語が入ってくるが、検索しながら、かつ投稿コンテストサイト「9leap」などで公開されている大量のサンプルコードを見ながら進めれば表題の通り3時間あれば誰でもゲームを作れてしまう良書だ。「またまた、マスダさん御冗談を」という人も是非書店で手に取って頂きたい。プログラミングの興奮を全ての人に実際、enchant.jsでは小

hayakawatomoaki 2012/02/22

javascript

リンク

大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012

大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012 7万行規模のJavaScriptプログラムで構築されたユーザーインターフェイス。そのプログラミングで使われたテクニックとはどういうものか。 2月16日、17日の2日間、都内で開催されたイベント「デベロッパーズサミット2012」（デブサミ2012）で、サイボウズ株式会社開発部若原祥正氏、生駒浩隆氏が講演「kintoneの表と裏～大規模JavaScript開発と非構造データベース」を行いました。講演では前半に大規模JavaScriptのテクニック、後半でスキーマレスデータベース構築の仕組みが解説されましたが、この記事では資料が公開された前半のJavaScriptのテクニックについて、ダイジェストで紹介します。 7万行のコード、フレームワークはClosure Library

hayakawatomoaki 2012/02/21

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

hayakawatomoaki 2012/02/15

javascript

リンク

小さな Titanium Mobile の読み物

小さな Titanium Mobile の読み物Titanium Mobile (タイタニウムモバイル) は Appcelerator, Inc. が開発している iOS/Android 向けアプリケーション開発ツールです。 Titanium Mobile はウェブサイト開発で使われる JavaScript を使ってクロスプラットフォームアプリケーションを開発できる特徴があります。こう書くとウェブアプリケーションを単品のアプリケーションとしてパッケージにする「ハイブリッド」なアプリケーションをイメージする人もいると思いますが、実際には各プラットフォーム向けにネイティブなアプリケーションを開発できます。これが Titanium Mobile 最大の特徴といえるでしょう。ただし、 Titanium Mobile は 1 つのコードで iOS/Android 両方に対応するわけではあり

hayakawatomoaki 2012/02/12

[android] [iphone]

javascript

リンク

サービス終了のお知らせ - NAVER まとめ

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

hayakawatomoaki 2012/02/09

javascript

リンク

やっと理解できた！JSオブジェクト指向プログラミング再入門 | ゆっくりと…

既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど！」っていう、頭の中のスイッチがパチンッ！と入るような境地には達していませんでした。かつて私もオブジェクト指向なJavaScriptプログラミングのススメなんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事オブジェクト指向 Java

hayakawatomoaki 2012/02/07