2013-06-01から1ヶ月間の記事一覧
サクウェブＴＶはコチラ↓↓↓ jQueryはWordPressで標準装備されています。 しかし、WordPressに装備されているjQueryはWordPressの独自仕様になっているため外部からプラグインを読み込んで使用しようとするときちんと動作しないことがよくあります。 具体的に…
サクウェブＴＶはコチラ↓↓↓ さて、まずはまとめです。 common.php でアップロードしたデータ * ２．アップロード後のファイルにつける名前 * ３．アップロード先のディレクトリ名（最後に/をつける必要なし） * 戻り値：成功した場合はアップロード後のファ…
サクウェブＴＶはコチラ↓↓↓ 最後にindex.phpで読み込んだsome.jsとscript.jsを記述します。 Ajaxから進捗状況を断続的に取り出し、プログレスバーとして表示するための記述です。 では、some.jsに以下を記述します。 some.js (function($){ $.extend({ progr…
サクウェブＴＶはコチラ↓↓↓ 進捗状況をキャッチするPHPファイルを作成 では、アップロード中に$_SESSIONに格納される情報を進捗パーセンテージで書き出すだけのPHPファイルを作成します。 以下をprogress.phpという名で保存してください。 progress.php "; i…
サクウェブＴＶはコチラ↓↓↓ フォームに呪文を追加 index.phpのフォームに以下を追加します。 <input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="任意" /> 全体でこんな感じです。 index.php
サクウェブＴＶはコチラ↓↓↓ では、手順です。 ① アップロードシステムを作る ② フォームに <input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="任意" /> を記述。 ③ 進捗状況をキャッチするPHPファイルを作成 ④ 進捗を取得しプログレスバーを表示するJavaScriptを記述する ⑤ 動作確認 アップロードシ…
サクウェブＴＶはコチラ↓↓↓ PHP5.4より前はプログレスバーの実装はAPCのインストールを必要としました。 しかし、PHP5.4以降は INI オプション session.upload_progress.enabled を有効にすることでアップロードの進捗をPHPから追えるようになりました。 ち…
サクウェブＴＶはコチラ↓↓↓ CSSセレクタで前方一致・後方一致・部分一致は使用頻度が高いと思うので書いておきましょう。 以下説明です。 E：要素 attr：属性 value：値 として、 前方一致 E[attr^=value] 後方一致 E[attr$=value] 部分一致 E[attr*=value] …
サクウェブＴＶはコチラ↓↓↓ 実は・・・ 知らなかったのです・・・ 不思議と使う機会がなかったので・・・ shortcut icon って <link rel="shortcut icon" href="PATH" /> で指定するんですね。 画像の形式は拡張子「.ico」らしいですね。 お恥ずかしい・・・</link>
サクウェブＴＶはコチラ↓↓↓ 検索フォームや各種フォームなどで見かける入力前の薄い説明文字。 それをplaceholderと呼びます。 HTML5以前はこれをJavaScriptで実装していましたが、 HTML5にはこれを属性で指定できる機能が備わりました。 使い方は以下です。 <input type="text" placeholder="入力して下さい"/><textarea placeholder="入力して下さい"></textarea>…
サクウェブＴＶはコチラ↓↓↓ role属性はHTML5で役割の明示のために追加された属性です。 「ヘッダー」「フッター」「バナー」「メインコンテンツ」など、role属性を与えると、その要素がどんな役割かを定義することができます。また、ランドマーク（目印）を…
サクウェブＴＶはコチラ↓↓↓ 今更ですが、HTML5で追加になった要素について備忘録しておきます。 HTML5で追加された要素 section nav article aside hgroup header footer figure figcaption time mark ruby rt rp bdi wbr embed video audio source track ca…
サクウェブＴＶはコチラ↓↓↓ RSSは「Rich Site Summary」の略だ。 Webサイトの各ページのタイトル、アドレス、見出し、要約、更新時刻などを構造化したXMLベースのフォーマット。 RSSリーダーを使用すれば、複数のサイトやブログの更新情報などを取得して自分…
サクウェブＴＶはコチラ↓↓↓ WordPressの「設定」→「メディア」には 「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」というチェック項目があるが、よくわからなかったので調べてみました。 ここにチェックした場合、…
サクウェブＴＶはコチラ↓↓↓ WordPress日本語からWordPressをダウンロードすしてください。 解答したwordpressフォルダ内の wp-contentフォルダ wp-config.php（wp-config-sample.php） 以外は基本的に触りません。 次にお使いのサーバのMySQLに適当な名前の…
サクウェブＴＶはコチラ↓↓↓ お絵かきツールなどを作るとき「戻る」ボタンなどを設置して直前の描画状態に戻したいような場合に使用できるのが、 getImageData() putImageData() です。 前者は、現在のcanvasの描画状態をデータとして取得します。 後者は、ge…
サクウェブＴＶはコチラ↓↓↓ さて、DataURLというものがわかったところで canvasの描画を画像化する方法を説明します。 もし、DataURLってそもそもなんだ？って方は 前回の記事を読んでみてください。 では、canvasの描画を画像化してみましょう。 以下はjQue…
サクウェブＴＶはコチラ↓↓↓ canvasでの描画をPNGやJPEGなどの画像に変換する方法を紹介します。 その際、使用するのがtoDataURL()メソッドです。 これを使って画像化していく作業は対して難しくはないのですが、そもそもDataURLってなんだ？ って思う方のた…
サクウェブＴＶはコチラ↓↓↓ プログラミング上でメール本文を生成したり、大量のCSSを一気に書いたり、 からHTMLを生成して一気に document.write()でページを書き出したりと、時には大量の文字列を書きたい場合があると思います。 そのようなときPHPでは $st…
サクウェブＴＶはコチラ↓↓↓ 通常、HTML5のcanvasを扱う場合にはJavaScriptで var canvas = document.getElementById("canvas"); などとしてid="canvas"のようにしたcanvas要素を取得したあとに操作していきます。 しかし、場合によってはcanvasにidを指定し…
サクウェブＴＶはコチラ↓↓↓ JavaScriptの関数ではPHPのように function(val = 10){ //処理 } みたいな感じで初期値を設定することができません。 初期値を設定するためには以下のようにします。 function(val){ val = val || 10; //処理 } または function(v…
サクウェブＴＶはコチラ↓↓↓ さて、実行結果を確認してみます。 読み込んで、$.drawPic($("#box"));と記述するだけで <div id="box"></div> にお絵かきツールが出現します！ Youtubeの動画で貼り付けますのでご覧ください。 はい。こんな感じです。ちょー簡単に実装できたわりには…
サクウェブＴＶはコチラ↓↓↓ 次に、以下のようにHTMLの<head></head>内でjQueryと一緒に読み込みます。 先ほど作ったdraw.jsというプラグインを実際に使用するスクリプトを記述するために、 script.jsをいうファイルも作成して読みこんでおきます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="draw.js"></script> <script type="text/javascript" src="script.js">
サクウェブＴＶはコチラ↓↓↓ HTML5のcanvasを利用してお絵かきツールを作ってみました。 プラグイン化しておいて誰でも使えるように公開しときます！ サイズ変更・色変更・色の数変更・線の太さ変更・画像への変換・操作取消・キャンバスのクリアなどだいたい…
サクウェブＴＶはコチラ↓↓↓ フォームに入力した改行入りの文章をHTMLで表示する際、改行は反映されません。 改行はbrタグに直しておかなければブラウザ上では改行されないからです。 そんなときPHPではnl2br()を使用して\nや\rなどの改行文字をbrタグに変換…
