サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
アメリカ大統領選
the-zombis.sakura.ne.jp
ラジオボタンによる国コードの設定 今回は、インドとシンガポールとタイの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=自分の
phpでフォームとか作ってデータを送信できた!!!って喜んでるのもつかの間(笑い)、送信ボタンを押した後、リロードすると「フォームデータ再送信」メッセージが出て二重にデータが投稿される事があります。 まー昔からある内容なんですが、ちょっとPHPを弄ってないんで練習がてらひとこと掲示板的なものを作ってのでPHPのリロード対策をして二重投稿を防止しようってことでメモっておこうかと。 原因と対策 なぜリロードによる二重投稿が起こるのか? ブラウザ更新ボタンをクリックすると直前の動作を再実行するので、直前にデータを投稿していればPOSTメソッドでパラメータが送信されているため、再度POSTが再送されることになり二重投稿なります。 リロードによる二重投稿防止するには、ページ遷移による対策一般的?な気がしますが、今回もその方法です。(笑) 今回は、ひとこと掲示板のようなものを作りたかったので「keij
以前、SQLのNOT IN(~以外)-IN(含んでいる)という記事をメモ程度に書いたんですが、たまたまSQLについて調べてみたら以外にNOT IN(~以外)とIN(含んでいる)ってどうやらパフォーマンスが悪いようです。 *以下 (NOT)INはNOT IN と INの両方を指す。 SQLの(NOT)INの遅い理由 (NOT)INがなぜ遅いかというとデータベースに登録されている対象のテーブルの全レコードを先頭から順番に読み込みしなければならないからです。 SELECT * FROM TEST WHERE id NOT IN(20,30); SELECT * FROM TEST WHERE id IN(20,30); 例えば、上記のようなSQLがあった場合に、idが20、.30以外のデータを取得するのに最初から最後のレコードまでidをチェックするようです。 まぁこれが100件とかならまだしも数
wordpressで関連記事を出力するのって、プラグイン探せば出てくるんですが、まぁそれは置いといてプラグイン使わないで、やってみようかなと。 まぁタグやカテゴリーを軸にした記事の取得する方法は必ずといっていいほどやることになるだろうと思われるので検索すればたくさん記事が出てくるかと。 何がしたいのか よくブログでみる「関連記事」とかの一覧があったりするので、カテゴリーごととか記事のタグごとの一覧をサムネイルとタイトルをつけて表示させるようにしたいと思っていますこのブログでもそうですが下記のようなイメージです。 特定のタグの一覧を呼び出す場合 どのタグの一覧を呼び出すのか分かっているようであれば管理画面のタグでタグIDが分かるので下記のように【WP_Query】を仕様してタグIDを指定すればよいと思います。 have_posts()) : $my_query->the_post(); ?>
先日、ファイルの読み込みをやりましたが、今度はローカルからファイルを読み込む方法をメモ。 前回と同じ、ドラッグ&ドロップのデフォルト動作のキャンセルやdragoverのイベントの動作のキャンセルに関しての説明は省く。 // JavaScript Document window.addEventListener("load",function(){ // var drop=document.getElementById("dropArea"); drop.addEventListener("drop",function(event){ //デフォルト動作をキャンセル event.preventDefault(); //①filesでドロップしたファイル数を取得 var filelist=event.dataTransfer.files; // for(var i=0; i"; } // }
phpでCSVをダウンロードする時って割と見ると思うんですが、そういえばphpでCSVをダウンロードする方法を割りと知らなかったりするのでメモ。 今回、試したのがあるサイトのAPIを利用してjsonファイルからCSVファイルを作成してそれをダウンロードするという流れです。 この方法に関しては、まぁ割と一般的というは誰が書いても同じだと思うので詳しい説明は省いて書いておきます。 CSVをダウンロードするphpファイル CSVファイルをダウンロードするプログラムのコードを載せます。 下記のような記述をする事で、プログラムで開くかダウンロードして保存するかのダイアログが標示させる仕組みとなる。*ただしGoogle Chromeだとそのままダウンロードされてしまう。 $fileName = "sample.csv"; //例としてsampleという名前です header('Content-Type
丁度、jQueryで自動的にスライドさせて画像が切り替わり、ボタンをクリックすると次の画像・前の画像にスライドするイメージスライダーを自作してたんですが、ちょっと変な挙動が発生しました。 その挙動というのが、ボタンがフェードアウトとフェードインが繰り返されている感じです。これは自動的にスライドさせて最後の画像が標示された時は「NEXT」というボタンを非表示にして最初の画像の時は「PREV」ボタンを非表示にするアニメーションをチェックする関数を作って自動的にチェックしていました。もちろん自動的なアニメーションはJavaScriptのsetIntervalで実行しています。 で、それがどういう時に発生しているかというと、setintervalが実行されているときに、そのページを開いたまま、ほかのタブをしばらく見ていて、再度setintervalを使用しているタブに戻った時に発生している様です!
で、今度は親ウィンドウから子ウィンドウを開いて、子ウィンドウから親ウィンドウの要素を操作、子ウィンドウから親ウィンドウの要素を操作してみるという事をやってみたいと思います。 今回は、親ウィンドウから子ウィンドウを開いて、divで作ったボックスをクリックしたら拡大・縮小するアニメーションをお互いのウィンドウから操作する仕組みを説明します。 今回は、お互いのウィンドウからクリックしたらボックスが拡大するデモを作りました。*いつものjs do itとかjs fiddleでは再現できないので、自分のサーバーで試します。 親ウィンドウのソース 主要な部分はJavaScriptなので、そこを載せておきます。 var sub_win; var flag=true; // サブウィンドウを開く処理 $("#btn").click(function(){ sub_win=window.open($(this
PHPを利用してCSVを読み込んだり書き込んだりする処理はよくあると思います。ただそれ以上にCSVを読み込むと文字化けするという事もあると思います。 まぁだいたいプログラムとかhtmlを書くときって文字コードがUTF8なんですけど、幸か不幸かCSVファイルを開くのにエクセルがよく利用されると思いますがエクセルでCSV形式で保存するとSJISになってしまうんですよね。もうなんなだこの仕様は(笑) そんな訳で、CSVファイルを読みこんで表示させる時に文字化けしないように処理しましょうっていうのか今回の目的です。
PHPでプログラムをするとやっぱURLって結構いじるときありますよね。 例えば、MVCでURLの一部分を文字列として扱ったり、余計な文字列を削除したり・・・など、URLを解析してURLのドメインやスキーマ、ポート番号、クエリパラメータなどの情報を取得したいと言う場面って結構あると思うんで自分の為にもメモ。 パラメータがついてるURL 単純なURLだったらまだしも、たいていパラメーターがたくさんついたURLだったりしません?URLの末尾(?以降)の文字列のことなんですけど、クエリ文字列っていいます。 まぁこいつを分解(以下 パース)となるともうめんどくさいですよね(笑) //パラメーターがついたURL $str="http://www.sample.jp:8080/test/sample.html?param1=ABC¶m2=abc"; という訳で以下の手順でちょっと分解してみようかと思いま
Web.fla 主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト
でその記事が孫カテゴリーや子カテゴリーのみにいた場合に、一番上の親カテゴリーのメンズ・レディースのどちらかに所属しているかによって別々のアイコンを表示させたい場合にはどうすれば?ってのを調べたのでメモします。 ただwordpressは複数カテゴリー登録できるので親と子の複数カテゴリーに登録すればいいとか、ジャケットだけどメンズとレディースでも着れるなど複数の親カテゴリーを持つ記事の場合などは今回は省いてます。 まぁ前提としてカテゴリーのスラッグ名と画像の名前をそろえるようにしておきます。 スラッグ名:mens/画像ファイル:icon_mens.jpg みたいな感じです。 カテゴリーが子を持たない場合 例えば、メンズ、レディース、キッズカテゴリーなどそれぞれが子カテゴリー持っていない場合は下記のようでいいんじゃないかなーと。 子カテゴリーの記事の場合 だいだいの記事って、メンズ→ジャケット、
display:table-cell を利用するメリットとは? 「table-cell」のほかに「table」というプロパティもありますが、これらは要素をtableのように扱えるようになるので、非常に便利です。 1:要素をtableタグのように扱えるので、横並びも簡単 2:td要素のようにCSSで縦の位置(vertical-align)も使うことができる 3:要素を均等幅で配置できる といった感じでfloatよりも簡単に横並びにできるのはいいかなぁと。 display:table-cellで横並びにする方法 今回は、スマホとかでも使われてそうな可変タイプのナビゲーションを横並びにしてみます。 htmlのソースコード よくある単純なhtmlのコードです。ul要素を使い、a要素で各アイテムを実装。 CSSコード まずは親の要素に display:table を指定して、子要素に display
HTML要素の記述 html要素ですが、html5のvideoタグを使用して動画を配置します。 その際に、videoタグに「autoplay」、「loop」、「muted」、「poster」を指定しておく。 そうすることで自動的に繰り返し再生されるのと音を消しておくことでユーザーに配慮する。 また、動画が見れない環境の場合に表示させるposter属性も指定しておく。 CSS要素の記述 動画を背景に設置するには まず、IE対策として、videoタグに「display:block;」にしておきますw 相変わらずIEってクソですね~ CSSの設定では、「position:fixed;」と「z-index」でマイナスの値を指定してあげると、コンテンツの背景に動画をしくことが出来る video#bg_movie { display:block; position: fixed; left: 0; t
jQueryから独自データ属性の値を取得する方法 jQueryからアクセスする方法として2通りあります。 data()で値を取得する jQueryのdataメソッドを利用する場合は、data()の引数に「data-」以降の文字列を指定し、ハイフンを含む場合はハイフンを取って、次の文字を大文字にします。 // $("div").data("role"); $("div").data("message"); //ハイフンを含んだ場合はキャメルケースで大文字にする $("div").data("presonName"); //1つのdataに複数の値を設定していた場合の取得方法 $("div").data("person").name; $("div").data("person").age; $("div").data("person").sex; attr()で値を取得する jQueryのa
CSSの設定 下記にCSSの設定を書きます。こちらもfacebook風にする為に余計なコードを記載してるのでそういうのは省くようにしています。 body要素の設定 body { height:100%; overflow-x:hidden; } スライドさせるとブラウザのスクロールバーが出てしまうので横方向に出ないようにしたいのでとりあえず、overflow-xで横方向ではみ出した要素は隠れるようにしています。 左右のメニューのCSS /* 左側のナビゲーション */ #left-nav{ position:fixed; z-index:1; width:80%; } /* 右側のナビゲーション */ #right-nav{ position:fixed; right:0; width:80%; z-index:2; } 左右のメニューは常に左右に設置しておきたいのでpositionをfi
jsonファイルの構造 とりあえずjsonファイルは下記のように記述しました。 まぁなんとなく分かると思いますが(笑) captionは、画像の下に表示するキャプションでurlは画像までのパスです。そんでフィルタリングするときに必要なのが、categoryです。 [ { "category": "cate", "caption": "カフェ", "url": "http://jsrun.it/assets/3/o/C/A/3oCAy.jpg" }, { "category": "autum", "caption": "紅葉", "url": "http://jsrun.it/assets/y/c/W/i/ycWii.jpg" }, { "category": "tokyo", "caption": "東京駅", "url": "http://jsrun.it/assets/n/O/V/x/
よく横並びにしたテキストのリストになっているナビゲーションを見ますが、サイトの右寄せにている事が多いと思います。 まぁサブナビゲーションのような扱いだとよく見ますが。 で今回は何がしたいかというと、テキストなど横並び要素をする場合はdisplayでinlineを指定すればインライン要素となり横並びになりますが、この要素全体を右寄せにするにはどうしたら良いのか?という事を今回はメモしたいと思います。 「inline」または「inline-block」を使用した右寄せの方法 まずulに「text-align:right」を指定して右寄せにする。そしてliタグを「display:inline」または「display:inline-block」を指定する。 ただしinline-blockはIE7以下は対応していないので「zoom:1」を設定する必要がある ul{ text-align:right;
iframe内への記述になります。 iframe内から親ウィンドウの要素にアクセスできるか実験のためのボタンを設置 Box1の背景色を変える iframe内にjavascriptを記述して、そこから親ウィンドウの要素を取得できるかどうかのコード。 今回は、直接htmlファイルに記述しましたが外部ファイル化してもいいです。 window.addEventListener("load",function(){ //iframe内のボタン var btn1=document.getElementById("btn"); //親ウィンドウにあるボタン! var btn2=window.parent.document.getElementById("btn2"); //親ウィンドウにあるbox1の要素 var box1=window.parent.document.getElementById("b
Web Messagingとは? コードによるほかのウィンドウ、タブ、フレームへのアクセスは、通常、セキュリティ上の理由から、同一オリジンのドキュメントの間だけに制限されています。 クロスドメインとは、異なるドメイン間をまたがったデータに対してアクセスをすることを言うんですが、調べてみると異なるドメイン間でメッセージ送信が可能のようで、この異なるオリジンの間での通信を安全に行うことを目的としたAPIとして、postMessageとMEssageEventがあるようです。またMessageChannelという2つのポートを利用した送受信もあるようですが、それは追々時間があったときにでも Web Messagingの流れと解説 さて、ここからが本題ですが、メッセージを送信・受信するにはhtml5のjavascript apiを利用します。 windowオブジェクトに用意されている「postMe
html側でボタンを設定 html側では「再生」「一時停止」「再生速度(早)」「再生速度(遅)」「最初から」というボタンと現在再生されている再生位置(秒数)を表示したいと思います。 とりあえずbuttonタグを利用してそれぞれID名を付けました。現在の再生位置に関しては、ichiというIDを付けてます。*IDは任意です。 Video要素をjavascriptから操作するメソッド とりあえずjavascriptでvideoタグおよび各種ボタンを変数に入れておきます。videoタグは変数vに入れています。 各処理の説明は後術します。とりあえう全部の処理をして説明すると長くなるので今回のサンプルで使用したところだけ書いていきます。 var v=document.getElementById("v"); var p_btn=document.getElementById("playbtn"); v
yokohama mid night there are also few ventures that an application will be developed earnestly and, as for it, a game is not an exception, either. CSSの設定 まずは、画像とテキストの下に敷く紙のような表現をするため下記のようなCSSを設定します。 box-shadowで紙のような質感を作る 背景は白にして幅とかmarginとかpaddingはお好みで。positionについてはセロテープを表現する要素を絶対配置にするため、基準となるように設定しています。 .box{ background:#fff; box-shadow:1px 1px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset; p
htmlファイルの準備 youtubeの場合は、動画上で右クリックすると「埋め込みコードをコピー」という項目があるので、コピーします。 貼り付けると分かりますが、youtubeのファイルはiframeで読み込まれるので、そいつを包むための親要素としてdivで括ってidかclass名をつけます。 今回は「video-wrap」というクラスを付けました。動画は取り合えずサッカーが好きなのでメッシのスーパープレイ集を埋め込みました。(笑) CSS側の設定 CSSでは特に新しいプロパティなでは仕様していませんが、どのサイトもほとんどこの記述です。 .video-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 100%; overflow: hidden; } .video-wrap ifra
CSS3のフレックスボックスなんですが、もともとフレックスボックスに対する査定が確定していなかったので変更する事もあるんだろうなと思っていましたが、やはり変わっていました。 それに伴って他のフレックスボックスに関連するプロパティも変更になった模様ですが、基本的に横並びにするフレックスボックスはdisplayでflexを指定するだけになったの簡単になったと思いますので、それに関して今回は記事を書いてみました。
ここ最近はブラウザのバージョンも上がってきたし、IEのシェアも減ってきたので嬉しい限りです!! そのおかげかCSS3の新しいプロパティも利用できるようになってきたので、今回はCSS3を利用して画像を丸く切り抜いたように加工する方法を紹介していこうと思います。 思いのほか・・というかほんとにすぐにできた。 笑 htmlファイルの準備 今回は、画像を直接丸く切り取る方法tと背景画像を丸くする設定の二つ。 背景画像の場合はdivタグにfigureクラスの設定をしています。 /* 画像 */ /* 背景画像 */ まぁここに関しては特に、コメントはありません・・というかしようがない。笑 border-radiusプロパティを利用する さて、ここでCSS3で追加された角丸を作るためのプロパティである「border-radius」を使用して下記のような設定にしました。 img{ width:200px
イベントの種類とデフォルトの動作をキャンセル ドラッグ&ドロップを実現しようにもブラウザにはドロップされたものを表示するというデフォルトの動作があるので、そいつをキャンセルする必要がある。ただしドラッグを開始する「dragstart」は特にキャンセルする必要はない。 とくにhtml5(javascript)でドラッグ&ドロップを実現する場合は、「dragover」のイベントをキャンセルするのは必須のようです。 ドラッグ&ドロップを行うには下記のようなイベントが主にあります。 //ドラッグする要素をドラッグするとき target.addEventListener("dragstart",function(event){ },true); //ドロップ領域にドロップされたとき target.addEventListener("drop",function(event){ event.preve
よくfloatを利用してボックス要素などを横並びにする機会がたくさんあると思うんですが、だいたい横並びにするときは隣り合う要素にマージンを設定しますよね? そうなると最初の要素もしくは最後の要素にももちろんマージンが設定されてしまうので、その最初の要素か最後の要素のマージンだけを無くしたいですよね? こういう時は最初か最後だけclassで「first」とか「last」追加したりしてましたが、どうやら簡単に解除する方法があるようです。 ネガティブマージンを使用するという方法 簡単に言うと親要素に子要素に設定したマージン分をネガティブマージンで差し引けば良いという話。 html CSS ul{ margin-right:-10px; overflow:hidden; } ul li{ width:60px; margin-right:10px; height:60px; float:left;
近年は、html5の台頭によって「html5+css+javascript」によるアプリケーションの開発などの案件もものすごく増えてきたのを感じます。それによってjavascriptが注目を浴びまくったため、javascriptでも高負荷な計算の処理をしたい・・しかしシングルスレッドだと処理が重くなるとクラッシュしてしまう・・じゃあjavascriptでも並列処理が必要だよね!!ってのも自然な流れだと思います。そこで登場したのが、WebWorkersです。 Web Workersとは Web Workersは、JavaScriptでクライアント側とは別にバックグラウンドでのスクリプト実行を可能にする機能です。 通常はプログラムの処理は上から順番に処理されますが、その処理が実行し終えるまで次の処理には行きません。そのためユーザーは処理を待つことになってしまいます。そこでWeb Workers
次のページ
このページを最初にブックマークしてみませんか?
『the-zombis.sakura.ne.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く