サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
mori-coding.blog.jp
8月26 javascriptをつかってブラウザで録音するWEBサイトが作れるのか調べてみた カテゴリ:javascriptHTML5 Tweet 仕事で調べる必要があって。 HTML5でいろいろできるようになってるっていうし、ブラウザでその場で録音するWEBサイトって作れるのかな? ■つくれる。 こんなデモがあった。 https://webaudiodemos.appspot.com/AudioRecorder/index.html 録音して再生したり音声データをダウンロードしたりできる。 できるね。 ■Web Audio API というものらしい。 音をいろいろするAPI http://www.html5rocks.com/ja/tutorials/webaudio/intro/ ■javascriptライブラリもあった。 recorder.js https://github.com/
2月3 スマホでメニューを開いた時に後ろはスクロールしないようにする カテゴリ:jQueryiphone/ipadサイト Tweet 地味にはまってしまった。 スマホサイトのメニューって大体ハンバーガーメニューだよね。最近は。 (ハンバーガーメニューというやつ) これをタップすると、ズルーっとグローバルメニューがかぶさるようにおりてくる、というのが一般的。 さて、そのメニュー内をスワイプしていると、後ろ側の ページが動いてしまうという現象に悩まされた。 タップでスクロールを禁止させるというのも見つけたが、 メニュー内はスクロールできるようにしたいため、背景だけスクロールを不可にしたい。 んで、しらべてみたら、htmlとbodyに対して、height:100%とoverflow:hiddenを割り当てればよいということがわかった。 実際に書くとこんな感じ。 閉じるときは解除も忘れずに。 $(
8月31 bxsliderでレスポンシブ利用時に表示エリアが1枚になったときにガクンとずれるバグの対策 カテゴリ:javascriptiphone/ipadサイト Tweet スライダーライブラリのbxsliderをつかって複数画像のスライダーを作っていた。 こういうやつ 設定はこんな感じだ $('#bnrSlider').bxSlider({ mode: 'horizontal', pager:true, auto: true, slideWidth: 300, speed:1000, pause:5000, moveSlides:1, minSlides: 1, maxSlides: 3, slideMargin: 40}); 3枚のバナーをみせて、スライドするときは1枚ずつスライドさせるっていう設定だね。 bxsliderはレスポンシブに対応していて、画面サイズが短くなると表示枚数を
11月18 jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする カテゴリ:jQueryjavascript Tweet フォームを作ってると必ず出てくるのが「必須」ってやつ。 必須項目を入力しなかったらエラーになるってやつね。 そこで便利なのが、jquery.validate.jsだ。 落としてくるにはこちら 使い方はいろいろ検索して探してもらうとして、問題はチェックボックス。 チェックボックスを複数並べて、「少なくとも1つはチェックをいれてね」っていうパターンのアンケート式のフォームを作りたいことはよくあると思う。 其の用途では、jquery.validate.jsでは直感的に、そのままでは使えないので、そのやり方を書くよ。 ①チェックボックスのnameは配列にするんだよ チェックボックスが複数並ぶ場合、nameの中身を
8月28 google maps api で地図を作った時にスマホでみるとスワイプ時のスクロールがmapに取られちゃうのを解決する カテゴリ:javascriptiphone/ipadサイト Tweet googlemapをiphoneやandroid用のスマホページに設置したときに、 でかい地図をおくと、サイトをスクロールしたいのにマップ内がスクロールしちゃって困るみたいなことあるじゃないですか。 google maps apiで指で動かしても動かないようにする設定ないの? ぐぐっても出て来ないよ! で、調べてみたらあった。 draggableという設定。 マウスで地図をドラッグして移動する昨日を有効にするか無効にするか、というのを選べる。 無効にすると、スマホでみたときに、スワイプでのスクロールがmapにとられちゃうことがない。 書き方は以下の感じ var opts = { zoom:
10月30 プルダウンで、選択した瞬間にリンクに飛んでいくjavascript カテゴリ:javascript Tweet プルダウンでメニューを選ぶと、ボタンをおさなくても、勝手にページ遷移する、というやつ。 むかーし、そういうサイトがあったけど、そんなメニュー不便だよねってことで 最近見なかった。 しかし。 スマートフォンの台頭によって、再び、この動線はよく出てくるようになったと思う。 すんごいシンプルなので、メモしておきます。 <select name="select" onChange="location.href=value;"> <option>メニュー</option> <option value="hokkaido.html">北海道</option> <option value="tohoku.html">東北</option> <option value="kanto.
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
9月8 colorboxでのinlineがうまく表示されないエラーでスムーススクロールが原因説 カテゴリ:jQueryjavascript Tweet colorboxありますよね。 モーダルウィンドウを組込むのに汎用性が高いので、lightbox系ではよく使います。 んで、ページ内のhtmlをモーダル内に表示させたい時、 inlineを使うのですが、なんかうまくいくときとうまく行かない時がある。 何が原因なんだーと思ってずーっと調べてたらスムーススクロールjsとバッティングしてるってことがわかりました。 jquery.smoothScroll.js ってやつね。 これとcolorboxのinlineを同時に使うと、モーダルが開かない。 解決策は簡単だった。 <a href="#inline_box" class="inline" data-tor-smoothScroll="noSmoo
7月14 [jQuery]appendなどで追加した要素にはclickやhoverがきかないのを解決する カテゴリ:jQuery Tweet appendなどで動的に要素を追加したとき。 追加された要素にclick()を指示しても動かない。 これは.on()を使うことで解決する。 ■clickの場合 動かないやつ $('#btn').click(function(){ console.log("成功!");}); 動くやつ $(document).on('click','#btn',function(){ console.log("成功!");}); ■hoverの場合 動かないやつ $('#btn').hover(function(){ console.log("マウスのったー!");},function(){ console.log("お、おりたー!");}); 動くやつ $(docu
10月18 FacebookのLikebox(いいねボックス)のレスポンシブ対応 カテゴリ:cssFACEBOOK Tweet FacebookのLikeboxを設置してほしいっていう依頼、たまにあります。 こういうやつ↓ これ、Facebook developerページで作成するんですが、 作成するときに、widthとheightを入れますよね。 だから当然、横幅と縦幅が固定になりますよね。 すると、レスポンシブサイト制作で、スマホでみたときには、崩れる(はみでる)ことになります。 例えば横幅700pxでlikeboxを作ったときに、 スマホで見ても700pxなので、横がぶちぬかれて飛び出してしまいます。 それを解消するcssがこちらのサイトで紹介されてました。 http://mbdb.jp/hacks/facebook/likebox-responsive-customize-css.
12月10 スマホで閲覧時にのみ電話番号画像をタップで電話がかけられるようにするjavascript(jQuery) カテゴリ:jQueryiphone/ipadサイト Tweet クライアントのサイトでは、大抵の場合、ヘッダーやフッターなどに電話番号画像がついたりします。 そして、こんな要望がでます 「スマホで見た時は電話番号をタップしたら電話がかかるようにしてよ」 これを実装はjqueryが便利です。 まずソースはこんな風になってるとします。 <header> <img src="img/tel.png" alt="0120111111" class="tel"> </header> jqueryから処理するためにclass="tel"をつけときます。 js側はこんな感じ。 $(".tel").wrap('<a href="tel:0120111111"></a>'); .wrapとい
8月28 画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript カテゴリ:javascriptjQuery Tweet 画像がいっぱい並んでるページなんかは、データが重くなるので、ページの表示に時間がかかる。 そんなときは、まっしろいまま待たせるんじゃなくて、 せめて、 「今ローディング中ですよー」 という、このグルグルまわるアニメーションを出してあげると、 少しはイライラが軽減される。 (ほんの少しだけ) それを、javascript & jQueryでシンプルに実装するのを説明します。 サンプルをつくったのでまずは確認。 あぁ、ネコかわいいよ、、ねこ・・。 1.まずはローディング画像を用意 あのグルグルまわってる画像 はGIFアニメで作られてる。 適当に「loading画像」 で検索してきてもいいし、 こういうジェネレータサイトみたいなのもある。 htt
4月19 androidでbox-sizingがうまくいかないバグ カテゴリ:androidcss Tweet スマホではとっても楽になる css3のbox-sizingプロパティ。 box-sizing:border-box とすると、paddingとborderをwidthやheightの中に含めてくれます。 心置きなく width:100%; padding:10px; とかできます。 でも、androidだと、box-sizingがそのままではうまくいかない。 (バグではないですけど) androidの場合はwebkitのベンダープレフィクスをつければOK box-sizing:border-box; -webkit-box-sizing:border-box; 他にもこの手のcss3 の解決法はありそう。 困ったらとりあえずベンダープレフィックスをつけてみるというのもひとつですね
4月11 【photoshop】テキストボックスのサイズを変更する カテゴリ:Photoshop Tweet テキストツールを選択して、テキストボックスを作成したのち、 文章を書き込む。 その後で、テキストボックスのサイズを変更しようとすると、 中味の文字まで変形されてゆがんでしまいます。 文字を変形したいのじゃなくて、テキストが表示されるエリアの大きさを変えたいだけなのに! (Fireworksでは簡単なのに!) ということで、詳しい人に教えてもらいました。 テキストツール を選択した後、カンバスに1回だけクリックしてテキストを書き始めると、 ボックスのサイズの変更はもうできなくなります。 そうではなくて、 テキストツールを選択後、カンバスで、クリック&ドラッグして、範囲を決めてから 文字を打ち込んでいくと、 あとから、ボックスのサイズの変更ができます。 ボックスのサイズの変更方法は、移
12月7 cookieで訪問者によってdivを表示したり消したりする条件分岐。jqueryが便利。 カテゴリ:javascriptjQuery Tweet お仕事で、 「クッキーを使って、一度でもログインしたことのあるユーザーには、トップページに特定の画像を見せたい」 という依頼があった。 cookieの操作は、やったことがなかったのだけど、まぁなんとかなるだろ、と引き受けて、なんとかなりました。最低限cookieでdivを見せたり非表示にしたりするためのことを書いておくね。 ■cookieの構造 cookieは、最低限では ・箱の名前 ・箱の中身 ・有効期限 でできている。 aiueo という箱の中身に 1111を入れておく、有効期限がくるまで。みたいな感じね。 ■cookieの保存 クッキーを食べさせるとも言うね(ほんとに?) javascriptで一文でOK <script> doc
5月8 androidでoverflow:scrollがきかないのをjavascript(jQuery)で解決する カテゴリ:jQueryandroid Tweet ※一部ソースが間違えていたので修正しました[20131028] サイトをつくっていて、特定の領域だけスクロールさせたいとき、 要素をdivでかこんで overflow:scroll; などとします。 スマホ用サイトでも、使うことはちょくちょくあるのですが、なんとandroidでは、overflow:scrollがきかずに、強制的にoverflow:hidden;になってしまうというバグが。 それを解決するライブラリも半日探したけれど見つからず、、 しょうがないのでjavascriptを自分で書いて解決してみたら、 思いの外簡単だったので、共有しときます。 基本的にはコピペでいけると思います。 javascript部分(というか
5月7 iPhone(Android)サイトで縦向き横向きを判定する2つの方法(javascript) カテゴリ:javascriptiphone/ipadサイト Tweet スマホサイトを作っていて、縦向きのときにしか見れないようにしたい、ということがあり、縦横を判定するjavascriptを探していたら2つの方法がありました。 ①window.orientationを使う方法 以下のようにします。 var isLandscape = function(){ if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf(
2月27 人気ソーシャルボタン(facebookいいね・tweetボタン・はてぶ・googleプラス)を1ソースで設置する カテゴリ:FACEBOOKjavascript Tweet 備忘録的なこのブログでも、ソーシャルボタンを貼っつけました。 今の日本で人気どころの以下4つ ーーーーーーーーーーーーーーーーーーーーーーーー ・facebookいいねボタン ・tweetボタン ・はてぶボタン ・googleプラスボタン ーーーーーーーーーーーーーーーーーーーーーーーー それぞれのボタン作成のリンク先はこちら ■facebookいいねボタンを作成 facebook developer ■tweetボタンを作成 Twitter ツイートボタン作成 ■はてぶボタン はてばブックマークボタンの作成・設置について ■googleプラスボタン +1button facebookボタンとはてぶボタンを賢
1月16 iphoneのブラウザからカメラを起動させる。WEBアプリに。 カテゴリ:HTML5iphone/ipadサイト Tweet iPhoneのカメラを起動させて撮影させるアプリをつくるには、ローカルアプリを作るしかないのかな?WEBアプリでできないのかな? と調べてみたら、iOS6からはiPhoneのsafariでできるようになったみたいですね。 HTML5の関連仕様である、HTML Media Captureにsafariが対応したようです。 HTML Media Captureとは、HTMLのフォームから、デバイスのカメラや動画や音声を取り込む機能にアクセスするためのもの。 カメラにアクセスするには以下のように書く。 <input type="file" accept="image/*"> 実際に画面から「ファイルを選択」をタップすると以下のようになる。 ここで、「写真を撮る」
9月7 javascriptでaタグにonclickつけるときにreturn falseもつける カテゴリ:javascript Tweet 最近ajaxだったり、リッチな動きをさせるためだったりで、 <a>タグにonclick属性とつけるときがちょくちょくあります。 すると、以下のような記述になる。 <a href="#" onclick="hogehoge">いでよ!</a> そうすると、hogehogeが実行されると同時に#に飛んじゃいますね。 #だけにしとくと、ページの一番上にアンカーリンクで飛んじゃいます。 なので、onclickは機能させつつ、href="#" は機能させたくない。 そんなときに便利なのがreturn false です。 <a href="#" onclick="alert('出た!');return false;">いでよ!</a> これをつけとくと、aler
9月18 jqueryでスクロールの途中で横からメッセージがズドーンと出てくる カテゴリ:jQueryjavascript Tweet LPでたまに見るんですが、こういうやつです。ズドーーン!↑ひらいたら下の方にスクロールしていってください。 前回の記事でスクロールの途中からグローバルメニューがついてくる というのを書きましたが、基本的にはそれと同じです。 あらたに使うのは .animate({'ホニャ','ワンワン'}); だけ $(function(){ $(window).scroll(function () { if($(window).scrollTop() > 100) { $('#move1').animate({'right':'0px'}); } });}); scrollまわりは前回と同じです。 条件としては scrollTop() > 100 上からスクロールが100
9月13 jqueryでスクロールすると途中からついてくるメニューを作る カテゴリ:jQueryjavascript Tweet 最初に開いたときは、ページの中頃にグローバルメニューがあるのに、ページを下にスクロールしていくと、途中からメニューがついてくるサイトありますね。 (ちょっとキャプチャをつくるのが面倒なので、ひとまず割愛) 最初から位置を固定させるプロパティがcssにはあって、 position:fixed;left:20px;top:20px; などでやりますが、スクロールすると途中からついてくるという動きもjqueryを使うと、簡単にできます。 jqueryの記述はこちら <script> $(function(){ offset = $('#gmenu').offset(); $(window).scroll(function () { if($(window).scrol
9月8 HTML5でコーディングするならとりあえずie9.jsとhtml5shiv.jsを入れる カテゴリ:javascriptHTML5 Tweet 最近のマークアップ界隈を観察してみると、 HTML5でマークアップするときは2つのjsを読み込ませるのが多いみたいです。 ie9.js とhtml5shiv.js ■ ie9.js これは、internetexplore6,7,8をie9に近づけるためのライブラリ。 ・position:fixed; ・max-heightやmin-heightなどの最大サイズ設定 ・aタグ以外での:hover ・margin:0 autoで中央寄せ ・透過PNG ・opacityで透明度 などなどを対応させるという。 これまでIE6やIE7のハックをしてきたコーダーの方々にとっては、 「そうそう、IE6と7に対応させるときは大体ソレだよね」 なやつらですね
3月9 jqueryでtoggleを使ってクリックするたびに画像を切り替える カテゴリ:jQueryjavascript Tweet ボタンを押すと、ボックスが開閉して、 しかもボタンの画像が変わるっていうのを作りたくて、jqueryで以下のように作りました。 js $(".hogehoge").toggle( function() { $(this).attr('src', 'images/bbb.png'); $(".hogehoge2").css("display","block"); }, function() { $(this).attr('src', 'images/aaa.png'); $(".hogehoge2").css("display","none"); }); html <img src="images/aaa.png" class="hogehoge"><di
1月12 いいね!しないと見れないfacebookページを作る カテゴリ:FACEBOOKphp Tweet FACEBOOKページで、いいねをしないと具体的なコンテンツが 見れないような ページがよく見られる。 例えばこんなページみたいに。 http://es-es.facebook.com/tokyootakumode いいねを集めるのに良さそうですね。 これのやり方をメモしときます。 phpを使います。 facebookページの作り方については、こちらのページなどを参考にするといいと思います。 facebookページの作り方 ①iframeで呼び出すページを置くサーバーに php5.2以上が入っていることを確認する。 サーバーの管理ページなどにログインすると、どこかでphpのバージョンが 見れると思います。 phpのバージョンが5.2以上じゃないと使えないみたいです。 ②そこにifr
7月30 jQueryでドロップダウンメニューを手作りするを理解する入門。 カテゴリ:jQuery Tweet 今日ちょっとつまったので調べながら解決した。 まずこちらをの記事をご覧あれ。 「jQueryで作る多階層ドロップダウンメニュー」 http://ascii.jp/elem/000/000/475/475908/ cssまわりは、はしょります。 jquery部分の記述を見ると、こうなっている $(function(){ $("ul.sub").hide(); $("ul.menu li").hover(function(){ $("ul:not(:animated)",this).slideDown("fast") }, function(){ $("ul",this).slideUp("fast"
このページを最初にブックマークしてみませんか?
『mori-coding.blog.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く