Works

現在位置取得&表示アプリ

Google Maps APIの逆ジオコーディングとHTML5のGeolocation APIを使った現在位置取得&表示アプリ 検索機能付き ジオコーディングサービス https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja#ReverseGeocoding Geolocation API http://www.htmq.com/geolocation/ ブログでの解説 ↓ Google Maps JS APIを使って「住所から緯度経度を取得し地図を検索する」機能を実装する方法 http://mae.chab.in/archives/2351

  • 5530
  • 0

CSS Filter Effectsで画像にエフェクトをかけるデモ

CSS Filter Effectsを使って画像にエフェクトをかけるデモ。 実際に画像をアップしてフィルターの効果を試せます。 (エフェクトをかけた画像は、残念ながら保存はできません…) CSSのプロパティの値の確認用としても使えます。 Webkit系ブラウザのみ動作。 CSS Filter Effectsについての詳細は以下 http://mae.chab.in/archives/2361

  • 4059
  • 1

HTML5 Audio Player ver.2.0

HTML5 Audio Player http://jsdo.it/maechabin/qYyB 上記に以下対応 ・ボリューム機能追加 ・ボタン機能改良 ・デザイン改良 ・コード整理 コードについての解説は以下 http://mae.chab.in/archives/2307

  • 4281
  • 0

jQueryプラグイン版 指定した要素の高さを自動的に揃えるスクリプト(レスポンシブ対応)

同じ行の要素を自動で検出して高さを揃えるスクリプト。 レスポンシブ対応 jQuery Plugin版 動作サンプル http://jsrun.it/maechabin/aJT5

  • 1416
  • 0

指定した要素の高さを自動的に揃えるスクリプト(レスポンシブ対応)

同じ行の要素を自動で検出して高さを揃えるスクリプト。 レスポンシブ対応 サンプル http://jsrun.it/maechabin/6n1IS

  • 1922
  • 0

chmod アクセス権の8進数変換機能

こんな感じに変換します。 「rwxrwxrwx」と入力 → 777 「777」と入力 → rwxrwxrwx ※suid、sgid、sticky bitなどは未対応

  • 2409
  • 0

cssで千鳥格子

CSSのみで千鳥格子を作ってみました。 解説は以下をどうぞ↓ http://mae.chab.in/archives/2310

  • 3508
  • 0

SNSのシェア数を非同期で取得し表示させるJavaScriptプラグイン

<概要> 任意のサイトのSNSでのシェア数を表示するためのJavaScript(jQuery)プラグイン。キャッシュ機能付き。 <使用方法> jQueryと当プラグインをサイトに読み込み以下を指定。 ↓ $(セレクタ).cbShareCount(); <表示部の設定方法> 1. セレクタに指定しているtitle属性にシェア数を取得したいurlを設定 2. セレクタの子要素にそれぞれ以下のクラス属性を指定する。 class="cb-hb" → はてなブックマーク用 class="cb-tw" → ツイッター用 class="cb-fb" → Facebook用 class="cb-pk" → Pocket用 上記を指定した属性の子要素spanにシェア数が表示される。 jQueryプラグインのダウンロードは以下より[GitHub] https://github.com/maechabin/cb-sharecount.js より詳しい情報は自分のブログに書いています http://mae.chab.in/archives/2453

  • 2689
  • 1

非同期で「FBいいね数」「ツイート数」「はてブ数」取得

jQueryのDeferredを使用して、ツイート数、FBいいね数、はてブ数を非同期で取得。 フォームに調べたいページのURLを入力して、「取得」ボタンを押すと、 それぞれ値が表示されます。

  • 2173
  • 0

コナミコマンド jQueryプラグイン版

KONAMIコマンドのjQueryプラグイン Webサイト上でコナミコマンドを入力させて、何か任意の処理を実行させる機能を実装するためのプラグイン。 コナミコマンド: [↑↑↓↓← → ← → B A(上上下下左右左右BA)] jsdo.it自体にコナミコマンドが仕込まれているので、試す場合は以下にて。 http://jsrun.it/maechabin/6DxD jQueryプラグインのダウンロードは以下より https://github.com/maechabin/jquery.cb-konami.js ブログでも解説しています http://mae.chab.in/archives/2448

  • 2254
  • 0

コナミコマンド(Konami Command)をJavaScriptで実装

Twitterに隠しコマンドとして実装されていたということで話題になっていたKONAMIコマンド。 JavaScriptで試しに実装してみました。 ↑↑↓↓←→←→BA jsdo.it自体にも実装されているみたいで、そちらが発動してしまうので以下でお試しを… http://jsrun.it/maechabin/5bVlQ コナミコマンド以外のコマンドも設定できるようにしてあります。

  • 2414
  • 1

KONAMIコマンドをTypeScriptで実装

Twitterに隠しコマンドとして実装されていたということで話題になっていたKONAMIコマンド。 JavaScriptで実装してみたものをTypteScriptで書き直し。 ↑↑↓↓←→←→BA jsdo.it自体にも実装されているみたいで、そちらが発動してしまうので以下でお試しを… http://jsrun.it/maechabin/cYLB コナミコマンド以外のコマンドも設定できるようにしてあります。

  • 1226
  • 0

forked: Google Maps Apiを使って地図を表示させるjQueryプラグイン ver.1.2

Google Maps Apiを使って地図を表示させるjQueryプラグイン http://jsdo.it/maechabin/hDnN 上記のプラグインの改良版 <改良点> ・同一ページ内で複数の別要素に対してプラグインを実行できるようになりました。 ・これによりそれぞれの要素にオプションを指定することができるようになりました。 <使用方法> ブログ記事またはGitHubをご参照ください。 http://mae.chab.in/archives/2457 https://github.com/maechabin/jquery.cb-getmaps.js

  • 1943
  • 0

「バルス」と唱えると画面が崩壊するJavaScriptコード

KONAMIコマンドを実装したスクリプトを使って、 『天空の城ラピュタ』の呪文「BALS」を入力したら画面が崩壊するスクリプト書きました。 ※バルスの正式な綴りが不明でした… 以前、Yahoo! Japanもやっていたやつです。 画面を崩壊させる処理は、Meltdown3.jsを使っています。 http://d.hatena.ne.jp/KAZUMiX/20090421/meltdown3 KONAMIコマンド https://github.com/maechabin/cb-konami-js https://github.com/maechabin/jquery.cb-konami.js(jQueryプラグイン版) 実装方法など詳細はブログに記載しています。 ↓ 天空の城ラピュタ「バルス祭り」に向けて『BALS』の入力でサイトを崩壊させる機能を実装してみよう http://mae.chab.in/archives/2827

  • 4749
  • 0

複数の要素の高さを揃える方法

私のブログで詳しく解説しています。参考にしてみてください。 ↓ 複数の要素の高さを行ごとに揃えるJavaScript(jQuery)関数の実装方法 http://mae.chab.in/archives/2421

  • 1630
  • 0

複数の画像ファイルをドラッグ&ドロップで画面に表示

画像をドラッグ&ドロップで画面に表示する機能。 ついでにファイル名と容量も取得して表示。 (画像は画面サイズに合わせて伸縮する) 参考にしたページ ↓ JavaScriptでファイル操作!? File APIを使いこなそう http://www.atmarkit.co.jp/ait/articles/1112/16/news135.html JavaScript で File API を使用してファイルを読み取る http://www.html5rocks.com/ja/tutorials/file/dndfiles/ File API入門 https://app.codegrid.net/entry/file-api-filereader-api jQueryでdrag & drop http://blog.webcreativepark.net/2013/12/08-172957.html

  • 3722
  • 2

背景画像をアニメーションを使って切り替えるJSコード

  • 715
  • 0

iframeのレスポンシブ対応方法

自作のjQueryプラグインでiframeをレスポンシブ対応させるデモ http://jsrun.it/maechabin/ryzq ウィンドウ(コンテンツ)のサイズに合わせて、iframeの幅と高さが自動変更されます。 jQueryプラグインについてや実装方法などは以下をご参照ください。 ↓ https://github.com/maechabin/jquery.cb-iframe-size.js 私のブログでもiframeのスマホ対応について書いています。併せてご確認ください。 ↓ http://mae.chab.in/archives/2527

  • 4806
  • 0

スマホに特化した広告表示を実装するjQueryプラグイン

スマホに特化した広告表示を実装するjQueryプラグイン 以下の広告表示に対応 1. インタースティシャル 2. オーバーレイ 3. レスポンシブ 4. Retina 5. トリミング 6. ランダム 詳細はGitHubで https://github.com/maechabin/jquery.cb-mobileadstyle.js 上記の表示を適用させたいバナーの画像に対して、class="cb-adstyle"を設定。 親要素をjQueryのセレクターにして、以下のメソッドを実行。 1. インタースティシャル → cbInterstitial() 2. オーバーレイ → cbOverlay() 3. レスポンシブ → cbResponsive() 4. Retina → cbRetina() 5. トリミング → cbTriming() 6. ランダム   cbRandom({    ad: [     {url: 広告の飛び先, image: 広告バナーのパス},     {url: 広告の飛び先, image: 広告バナーのパス}    ]   }) <例> $(".interst").cbInterstitial().cbRetina().cbResponsive(); $(".overlay").cbOverlay().cbResponsive(); ※こちらのサンプル画像にはスマホ広告に特化したアフィリエイトサービスMoba8.netの広告を使っています。 今後の実装予定 ・ローテーション ・バックグラウンド ・シェイク

  • 3399
  • 0

Google Maps JS API V3を使ってブログなどに地図を表示させる

ブログなどの記事内の任意の要素の属性に入力した住所や緯度経度から位置情報を取得して地図を表示させる方法

  • 1693
  • 0

配列を先頭から足して合計が任意の数字になる組み合わせとなるようにソート

以下の配列を先頭から足して、合計が任意の数字(ここでは「6」)となるように並び替え [1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 2, 1, 1, 2, 2, 1, 2] ↓ [1, 2, 2, 1, 2, 2, 2, 2, 2, 2, 1, 2, 1, 1, 1, 2, 2, 2]

  • 1161
  • 0

React Validation Form Sample

React.jsで作った簡単なValidation Formのサンプルです。 ソースはGitHubでご確認ください。 https://github.com/maechabin/react-validation-form

  • 1091
  • 0

フォームのテキストの値を変更した時だけ送信ボタンを押せるようにするスクリプト

form要素内の複数のテキストのどれかを変更した場合のみボタンのdisabled属性を解除します。 まったく変更がない状態の場合は、disabled属性が付与されボタンは押せません。

  • 2173
  • 1

フォームチェック validation used by Bootstrap

フォームのリアルタイムValidation(入力チェック機能)をBootstrapのデザインを使って実装

  • 2919
  • 0

画面のリサイズイベントを取得して、PC/スマホ用に変化するメニュー

実際にブラウザの幅を変えてみてください。 画面サイズが640px以下になると、アコーディオンメニューになります。 ↓ http://jsrun.it/maechabin/8czt 今回の実装では、.off()の使い方がポイント!

  • 5765
  • 0

URLを取得してメニューのスタイルを変更させるJavaScriptコードサンプル

クリックしたテキストの色が変化します。 ※URLのパラメーターの値を取得して色を変更する要素を判別させています。(ページ遷移ありを想定)

  • 1212
  • 1

CanvasとFile APIを使って画像を取得、表示、出力させる処理

[HTML5] Canvasの表示内容にフィルターをかける(グレースケース、ネガポジ反転) http://www.yoheim.net/blog.php?q=20120907 画像処理におけるアルゴリズム http://homepage2.nifty.com/tsugu/sotuken/ronbun/sec3-2.html

  • 2373
  • 0

Filter by ReactJS

Reactでリストの絞り込みとソート機能を実装してみました。 コードなどは以下で確認できます。 https://github.com/maechabin/filter-by-reactjs

  • 935
  • 0

cb-typewriter-jsデモ

テキストをタイプライターで打っているかのように、 1文字ずつ表示させるJSライブラリのデモです。改行にも対応。 ライブラリの詳細は以下です。 https://github.com/maechabin/cb-typewriter-js 全画面で確認する場合は以下よりどうぞ。 http://jsrun.it/maechabin/UrTN

  • 1016
  • 0

画面リサイズ時にアスペクト比を維持したまま画像サイズを変更させる方法

サンプル http://jsrun.it/maechabin/fvK1 リサイズ処理の参考 https://w3g.jp/blog/tools/intermittent_event_load_reduce 長々とJSで書いてみたが、実際はCSSオンリーで実現可能。 以下でOK! ↓ .banner {   max-width: 100%;   height: auto; } 「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 http://kadoppe.com/archives/2012/09/max-width-100-img-aspect.html --- それからtable要素の中で使う場合は、table要素にtable-layout: fixed;を指定する必要あり。 IE11でimg要素にmax-width: 100%;が効かない場合の対処法 http://blog.e-riverstyle.com/2014/04/ie11imgmaxwidth-100.html cssリファレンス: table-layout http://www.htmq.com/style/table-layout.shtml

  • 5754
  • 0

JSクリックカウンター v2

  • 5713
  • 1

Away3D.js試し

  • 994
  • 0

Bootstrapのアコーディオン(collapse)の開閉時にアイコンを変更させる

  • 22195
  • 1

フォームのチェックボックス制御 ver.2

  • 1484
  • 0

スクロールすると現れるヘッダーバーをjQueryのanimate()メソッドで実装

ページを下にスクロールするとヘッダーが表示されます。 ブログで実装方法を紹介しています。 http://mae.chab.in/archives/2699

  • 1781
  • 0

スクロールすると現れるヘッダーバーをcssアニメーションで実装

ページを下にスクロールするとヘッダーが表示されます。 必要に応じてベンダープレフィックスをつけてください。 ブログで実装方法を紹介しています。 http://mae.chab.in/archives/2699

  • 2696
  • 0

カーソルの動きに合わせて背景色がついてくるアプリ

四角の上でカーソルを動かすと、カーソルの動きに合わせて背景色が変化します。癒し系アプリ。

  • 1870
  • 1

配列同士の比較を利用した、チェックを付けて色付け機能

各数字のチェックボックスにチェックを付けて「OK」ボタンを押すと数字の背景の色が変わります。

  • 1506
  • 1

CSSで要素のフルスクリーン 縦横中央配置レイアウトを実装

http://jsrun.it/maechabin/okKc

  • 1514
  • 0

cssでboxのhover実装

  • 601
  • 0

クリックすると回転して変形するCSSアニメーション

黒い四角のオブジェクトをクリックすると、 アニメーションの処理が実行され、 もう一度クリックすると元に戻ります。

  • 2814
  • 0

CSS3でアニメーション

  • 866
  • 0

Flux Dispatcher.jsでのReact実装サンプル(かなり簡易版)

Fluxのdispatcher.jsを使ってFluxを実装 フォームに入力したテキストが表示されるだけのものです。 ソースコードはGitHubで確認できます。 https://github.com/maechabin/flux-dipatcherjs-sample Flux – Dispatcher【日本語訳と実装のポイント】 http://mae.chab.in/archives/2738

  • 1175
  • 0

Bootstrap拡張CSSファイル「cb-materialbtn.css」用のセレクター名シミュレーター

Bootstrap拡張CSSファイル「cb-materialbtn.css」用のセレクター名シミュレーターです。(Reactで作ってます) 【詳細は以下を参照】 Bootstrapのボタンを拡張 Material Designの色とボタンタイプを追加するCSSライブラリ「cb-materialbtn.css」 http://mae.chab.in/archives/2810 https://github.com/maechabin/bsbtn-simulator

  • 1093
  • 0

repeating-linear-gradientで作るストライプ

CSSのrepeating-linear-gradientを使うと簡単にストライプを作ることができます。 解説は以下をどうぞ↓ http://mae.chab.in/archives/2348

  • 1518
  • 2

cssのradial-gradientで球体の表現

  • 1683
  • 0

setTimeoutを利用した数字暗記ゲーム

「start」ボタンを押すと、ランダムに数字が表示されます。 5秒後に数字が消え、入力フォームが表示されます。 記憶した数字を入力し、「OK」ボタンを押します。 当たっていれば「◯」、間違っていれば「×」が表示されます。

  • 1125
  • 1

パスワードフォームのチェック

パスワードの「表示/非表示」「入力チェック」「同一チェック」「文字数チェック」「コピー禁止」機能

  • 8463
  • 2

jQueryプラグイン「bxslider」のレスポンシブ化

デモ ↓ http://jsrun.it/maechabin/wX8Y bxsliderについては以下 http://bxslider.com/

  • 1889
  • 0

arguments.calleeを使って階乗の計算

  • 1232
  • 0

URLのパラメータの値を取得するJavaScript関数

  • 1004
  • 0

URLにマッチする正規表現

  • 1651
  • 0

HTML5 Audio Player

自分の曲を使って、オーディオプレイヤーを作ってみました。 コードについての解説は以下 http://mae.chab.in/archives/1975

  • 3460
  • 0

Skills

  • Wordpress
  • Fireworks
  • jQuery
  • HTML5
  • CSS
  • CSS3
  • JavaScript
  • JSX
  • SCSS
  • LESS
  • PHP

Hot tags

Categories

HTML / CSS / JavaScript