IEでloadイベントが動作せず画像が読み込まれない例 上記のサンプルをIE8で見ていただくと、プログレスバーが途中で止まってloadイベントが動作しなくなるはずです。 IE9に関してはリロードするとloadイベントが動作してプログレスバーが100％までちゃんとアニメーションしたり、1枚だけ読み込んでそれ以上は止まってしまったりムラがあるように感じました。 ソースコードを見ていただくと分かるのですが、単純に画像オブジェクトを取得してロードイベントを設定しているだけです。 htmlのソースコード ローディング時のプログレスバーのdivと画像を並べてるだけです。必要なコードだけ載せておきます。 jQueryのソースコード loadイベントに関してはone()で処理していますが、bindで指定してもloadで直接処理しても構いません。 var all_img = jQuery("img"); /

皆さんは、作業する時に雑音は気になるほうですか？多少雑音があったほうが集中力が増すとも言われています。 ただここちのよい雑音と騒音はまた別だったりします。 まさに最近、そのような状況に多々合うのです。その際の対応としては音楽を聴いたり、ネットですとカフェの雑音や自然の音を流すWEBサービスもあるのでそちらを利用してもいいんですが、ふと耳栓を買ってみようと思って購入したところ今まで耳栓を馬鹿にしていましたがこれほどまで遮音性があるとは！！と驚いたので作業に集中したい時・騒音に悩んでいる方などもいらっしゃると思いますので、ここで個人的に最強の耳栓をご紹介したいと思います。 遮音性とは 遮音性能は、NRR(Noise Reduction Rating)という単語で騒音減衰評価値を表す基準です。単位はデシベル(dB)で表示され例えば「NRR値30」といった表記になり数値が大きいものほど遮音性が高い

ラジオボタンによる国コードの設定 今回は、インドとシンガポールとタイの3国のツアーを取得したいのでvalueの値にそれぞれの国コードを設定しておきます。もちろんラジオボタンなので一つしかチェックできません。 フォームの送信先は同じファイルなのでapi_test.phpをactionに指定します。methodはPOSTです。 APIからデータを取得してCSV作成までのPHPの処理 まずはAPIを利用してデータを取得してCSVを作成して書き込むまでの処理を記載します。PHPでプログラムを書く場所はDOCTYPEより上に書きました。作成したCSVを一覧表示するPHPの処理は後述します。 リクエストURLやCSVファイルを変数に入れておく まず変数を見てください。 $base_url='http://webservice.recruit.co.jp/ab-road/tour/v1/?key=自分の

皆さんアクセス解析を利用する時はGoogleアナリティクスを利用する方が多いと思います。もちろんGoogleアナリティクスを見るのも大事ですが、GoogleのSearchConsole（旧 ウェブマスターツール）を利用されていますか？ 自分もあまり普段は見てなかったのですが、SearchConsoleの項目の「検索アナリティクス」が便利だったのでメモしておこうかと思っています。 GoogleアナリティクスをSearchConsoleの違いって？ そもそもGoogleアナリティクスをSearchConsoleの違いって何？って方もいると思います。まぁ詳しい説明は他のブログなどを参考にしてもらうとして。 Googleアナリティクス 主にサイトの訪問者の情報を提供してくれるツール。何人訪問したのか？どのくらいサイトに滞在したのか？どういった経路でこのサイトに来たのかなどの情報を確認できる。 Se

phpでCSVをダウンロードする時って割と見ると思うんですが、そういえばphpでCSVをダウンロードする方法を割りと知らなかったりするのでメモ。 今回、試したのがあるサイトのAPIを利用してjsonファイルからCSVファイルを作成してそれをダウンロードするという流れです。 この方法に関しては、まぁ割と一般的というは誰が書いても同じだと思うので詳しい説明は省いて書いておきます。 CSVをダウンロードするphpファイル CSVファイルをダウンロードするプログラムのコードを載せます。 下記のような記述をする事で、プログラムで開くかダウンロードして保存するかのダイアログが標示させる仕組みとなる。＊ただしGoogle Chromeだとそのままダウンロードされてしまう。 $fileName = "sample.csv";　//例としてsampleという名前です header('Content-Type

まぁスマートフォンとPC用だと画像の切り替えに迷う。 基本的に画像をスマートフォンに対応させるには下記のようなCSSが多い気がする。 とりあえず現状では、下記の用にcssを指定するのはデフォルトのよう。 img{ width:100%; max-width:100%; height:auto; } 幅はIE用に「width:100%」にしておいて、後は「max-width:100%」にしておく。高さは自動的に変わるように「height:auto」にしておく。これで、PCやスマートフォンでのデバイスの幅、もしくは画像を包んでいる要素に合わせて画像は100%で表示される。 一つの画像による要領の問題 上記の方法だとスマートフォンでも画像がデバイスに合わせて縮小されるがもともとのファイルサイズが変わらないので、使いまわすのが難しいところ。 そこでjqueryとnoscript要素を利用した切り替

丁度、jQueryで自動的にスライドさせて画像が切り替わり、ボタンをクリックすると次の画像・前の画像にスライドするイメージスライダーを自作してたんですが、ちょっと変な挙動が発生しました。 その挙動というのが、ボタンがフェードアウトとフェードインが繰り返されている感じです。これは自動的にスライドさせて最後の画像が標示された時は「NEXT」というボタンを非表示にして最初の画像の時は「PREV」ボタンを非表示にするアニメーションをチェックする関数を作って自動的にチェックしていました。もちろん自動的なアニメーションはJavaScriptのsetIntervalで実行しています。 で、それがどういう時に発生しているかというと、setintervalが実行されているときに、そのページを開いたまま、ほかのタブをしばらく見ていて、再度setintervalを使用しているタブに戻った時に発生している様です！

safariのブックマークを使った方法 さっそく結論から言ってしまうとですね、iphoneの標準ブラウザであるsafariでブックマークをするとブックマーク名とそのURLが登録されるんですが、ブックマークの編集画面でそのURLの部分にソースコードを表示させるjavascriptに変更します。で、ソースコードが見たいページでそのブックマークを選択するとjavascriptが実行されて見たいページのソースコードが表示されるようになります。 とりあえず後ほど、画像付きで説明します。 ソースコードを表示するJavaScript とりあえずは、ソースコードをiphoneで表示させるJavaScriptが必要なので、下記に載せておくのでコピーしてください。 javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getEle

で、今度は親ウィンドウから子ウィンドウを開いて、子ウィンドウから親ウィンドウの要素を操作、子ウィンドウから親ウィンドウの要素を操作してみるという事をやってみたいと思います。 今回は、親ウィンドウから子ウィンドウを開いて、divで作ったボックスをクリックしたら拡大・縮小するアニメーションをお互いのウィンドウから操作する仕組みを説明します。 今回は、お互いのウィンドウからクリックしたらボックスが拡大するデモを作りました。＊いつものjs do itとかjs fiddleでは再現できないので、自分のサーバーで試します。 親ウィンドウのソース 主要な部分はJavaScriptなので、そこを載せておきます。 var sub_win; var flag=true; // サブウィンドウを開く処理 $("#btn").click(function(){ sub_win=window.open($(this

ただ、せっかくならプログレスバーで画像がどのくらい読み込まれてるか分かったほうがいいかなぁと思いましてjavascriptで複数の画像を読み込む際のプログレスバーのアニメーションを作ってみようかと思ったのでメモ。 DOM要素の取得やフェードアウトの処理などはjQueryを使いますが、プログレスバーの処理は基本的は、JavaScriptの処理だけでライブラリは使わないでいきたいと思ってます。 CSSの初期設定 読み込むイメージ画像 読み込むイメージ画像は、すべて読み込んでプログレスバーが100％になった後に表示させたいので、初期の段階では、displayプロパティで非表示にしておきます。 img { width:50px; display:none; } プログレスバーの設定 プログレスバーは、下地になるグレーのプログレスバーの上に、実際に読み込んでアニメーションするプログレスバーの設定をし

皆さんは、アクセス解析してますか？一応自分もブログのデータは毎日見ています。Webサイト見たいに細かくはあまり見ないですが、やはりGoogleアナリティクスは設置していますが、大まかなデータは「WordPress.com Stats」というプラグインを使ってみています。で、アクセスを確認する時って、GoogleアナリティクスにしてもWordPressにしてもまずログインしなきゃならないんですよ！！ まぁログインなんて大した作業ではないんですが、ざっとアクセスどのくらいあったんかなぁと軽く確認したいだけなのにログインとかなにげに めんどくさい！！！ って思うこともしばしば（笑） そしたらですね、天下のGoogle様から、さくっとアクセスが確認できるツールが出ていたのでご紹介。

CSSで回転するローディングを作りたいのでCSS3なども使用して「C」のように丸が欠けたような要素を作っていきます。 #loader{ margin:auto; width:30px; height:30px; border-radius:30px; border:8px solid #17cddd; border-right-color:transparent; animation:spin 1s infinite linear; } CSS3を使って輪っかを作る ポイントとしては、まず輪を作る為に、widthで設定した幅と同じ大きさをborder-radiusプロパティで設定してあげると円になります。＊特に背景色とか設定していないので実際にはこの設定だけで円に見える訳ではありません。 次に輪っかにしたいのでborderプロパティで上記のように設定してあげてから、border-right

実際のコード とりあえずhtml・CSS・JavaScriptの必要最低限のコードを載せていきます。 htmlのコード htmlのコードは読みこんだ枚数を表示するためのpタグと画像の読み込みが完了のpタグ。後は画像を80枚ちょっと並べてるだけです。 すべての画像を読み込みが完了しました。 CSSのコード CSSでは、最初は画像と、画像がすべて読み込まれたら表示させる文字を最初は非表示にしておきます。 img{ display:none; } p#res{ display:none; } JavaScriptとjQueryのコード JavascriptとjQueryのコードを記載。DOMオブジェクトの取得とアニメーション操作はjQueryを使用。 //必要なデータを変数に入れる var all_img=$("img"); var img_len=allimage.length; var lo

Placehold.jp こちらは、ベーシックな機能として、欲しい画像サイズを記入して「画像を生成する」ボタンをクリックすれば、ダミー画像とそのURLが生成されるので、そのURLへのリンクを張れば良い。 また、プリセットとして、「よく使う正方形」「バナーによくあるサイズ」「Web制作でよく使うサイズ」とよく使われているサイズがすでに用意されているので使い方も簡単である。 もうすこし、自由な設定をしたいのであれば、「Advanced」というタブがあるので、文字サイズ／フォーマット／背景色／文字のサイズ／文字の色なども細かく決められますし、スタイルシートを利用するにチェックを入れれば、CSSでグラデーションの設定や角丸のダミー画像なども作れます。使い方もちゃんと説明されているので、簡単に使えます。 PLACEHOLD.IT PLACEHOLD.IT こちらの場合は、すべて英語なので分かり図らい

もはやWindows XPというは化石としか思えないOSなんですがいまだに使ってます（笑） とっくにサポートなんて終わっているからそろそろWindows7とかWindows8にバージョンアップしないといけないんですが、だったらパソコン自体を買い換えたい・・けど正直ネットサーフィン程度なのでサブ機として一台欲しいなぁと思っていたので。なるべく安いパソコンを探してみた。 とりあえず欲しいパソコンの条件 よく考えてみたら、現状クリエイティブ系のソフトってPhotoshopしか使ってないんですよね（笑） 別にhtmlとかcssとかjavascriptとかも書く機会がそもそもなくなってきてるし、コードまわりのエディターとかはすべてフリーソフトでまかなえてしまう時代ですし！！ なので、自分が使いたいなーと思ってるパソコンのスペックは 持ち運びが楽チン。 ブログがかけてネットサーフィンができる。 エクセ