PHPこんばんは、martinです。紹介しましたが、実はHTML5だけで出来るのになぁ、と思っていました。現時点で、IE8を除く主要なブラウザでは軒並み、HTML5のINPUT要素に対するmultiple属性に対応しているので、それによる実装をppBlogに施してみました。複数ファイルを選択可能にするには、input要素にmultipleを指定するだけです。画像を複数枚一度にアップロードした)。UIをどうするかで試行錯誤しましたが、プロトタイプにしてはまぁまぁかなと思っています。このように一度に複数画像の選択が可能です。複数の(画像)ファイルがアップロード出来るようになると、アップロードする枚数に応じて、サーバーにデータを渡す間、じっと待たされるようになります。アップロードの進捗状況を示すプログレスバーが欲しくなります。この手のスクリプトはウェブ上にいろいろありますが、どれもFlashを用いたり、Perl(+JavaScript)を用いたりしたものです。出来ればPHP(+JavaScript)のみで完結させたい。調べてみると、PHPとJavaScriptのみでは、ファイルアップロードに伴なうプログレスバーのギミックを提供するのは無理という記述ばかりです。いうのもPHPには、ファイルアップロードの途中経過を知らせる仕組みが備わっていないからです。APCエクステンションをインストールする必要があり、これはレンタルザーバー等では敷居が高いでしょう。(Perlはあまり好きになれないという理由もあり)PHPとJavaScriptのみによる実装を考えてみました。メソッドによるファイルアップロード時の挙動を知る必要があります。マニュアルによれば、基本的に以下の手順を踏みます。サーバー上に転送される(画像)データは、最初は一時的なディレクトリ(テンポラリディレクトリ)にアップロードされます。この一時的なディレクトリは、だいたい/tmpディレクトリのことが多いです。php.iniで指定可。画像データの転送が無事に終わると、move_uploaded_file関数を用いて指定したディレクトリに画像データを移動させます。PHPでのネックは、この1番目の進捗状況を知るメソッドが備わっていないことです(なのでこの部分だけはPerlで処理するスクリプトがある)。サーバーサイドで提供しないのであれば、こちらからゲットしに行きましょう。アップロード中のデータは、テンポラリディレクトリに溜まっていくので、そのディレクトリのサイズは徐々に大きくなるはずです。そのディレクトリのサイズを定期的に監視すればOKということになります。この「定期的に監視」という部分にJavaScriptのAjaxを使えば良いわけです。ディレクトリのサイズは、以下の記述で取得可能です。ディレクトリの合計サイズを得るなお、上の例では、テンポラリディレクトリは/tmpですが、これを取得したい場合は、ファイルアップロード時に現れる変数の$_FILES['src']['tmp_name']を利用して、dirname($_FILES['src']['tmp_name']);で取得可能です。あとは、AjaxとPHPで、このディレクトリサイズを返すような記述をして、それをJavaScript側に渡し、プログレスバーっぽく見せればOKとなります。うまく行けば、転送中のブラウザ画面は下のようなスクリーンショットになります。Chromeの最新版で動くと思います。プログレスバーが表示され、進行状況が一目瞭然。開発日誌リスト表示のときは、Ajax経由で記事を読み込んで表示させるという感じにしてみました。細かいところの詰めなどあると思いますが、雰囲気は味わえると思います。Ajaxを使うと記事のデータだけをダウンロードするので、ページ全体を読み込むのに比べて表示が速いですね。このギミックについて何かアイデアなり、希望などがあればコメントお願いします。開発日誌フォーラムで,一旦投稿した後に,引き続き編集作業を継続できないかという問い合わせがありました。ppBlogでは,公開される通常の投稿であれ非公開のドラフト投稿であれ,ポストした後は一旦トップページを表示するような流れになっている訳ですが,確かに,そんなのもありだなぁと思った次第。編集画面から投稿後のトップページへの切り替えはJavaScriptを使っていて,とりあえずは,この行き先を変更すれば,投稿後に編集画面に戻ることが出来ます。解決法をフォーラムの方に書いてくれてます。→http://forum.p2b.jp/index.php?mode=box&UID=2870&display=allで,ppBlogはAJAXWの技術をコメント表示などに用いており,またログイン認証ではAJAXでポストということもしています。記事の投稿もAJAX経由でいけば,編集画面から離れることなく,バックグラウンドでのドラフト投稿が出来そうだと思い,スクリプトを書いてみました。AJAX経由でポストするので,そのための準備をします。これをppBlogに組み込まれているAjax.post()メソッドを使ってPOST送信すれば良いです。これは以下のような感じになります(細かな条件振りなどは省略して書いています)。});}これをバックグラウンドで,自動的に一定時間ごとに行いたいので,setTimeoutを用いて,この関数を繰り返し呼び出せばOKです。次にサーバーサイドですが,こちらはPHPでの処理となります。日本語をJavaScriptでエンコードすると,もとの文字コードが何であれ,必ずUTF-8化して送出してくれます。ppBlogで扱う文字コードがUTF-8以外の場合は(例えばデフォルトでのEUC-JP),その文字コードに変換してからログに記録するようにします。新規作成画面での初期状態。オートポスト起動中はアイコンが変わっています。このオートポスト機能を追加したppBlogでの記事作成画面のスクリーンショットを載せておきます。図にあるように,自動ポスト開始ボタンがあって,それをクリックすることによって,一定時間毎でのオートポストが開始されます。始動中は,ボタンが「一時停止」のボタンに変化していて,もう一度ボタンを押すと,オートポストを中断します。ボタンの隣のテキストボックスには,最後に自動ポストした時刻が表示されます。ボタンで自動投稿オンオフの切り替えが可能です。この機能を取り入れることの利点は,バックアップも兼ねる点でしょうか。記事をシコシコ書いて,いざ送信!って送信するとサーバーのレスポンスが悪かったりして,折角したためた記事がパーになってしまった経験が,自分は少なくとも3回あります。この自動ポストを使って,初めのうちからドラフト投稿しておけば,こういう痛い状況は極力減ると思います。),この容量ではとても長文には耐えられませんし,そもそもクッキーの用途とはずれている気もしますし,ここはppBlogで比較的簡単に実装できるAjaxを使うアプローチを取ってみました。細かいところまでチェックしたわけではないんですが,試しに使ってみたいという方はどうぞ。簡単な説明文も一緒にZIPしておきます。ちなみに,editor.jsのお尻の方に今回のスクリプトを追記していますが,そこにでてくる60000という数字が,自動投稿の間隔を表しています。この場合は,60000ミリ秒すなはち1分おきにオートポストするということです。最新10件のコメントmimimimifaghasegawahiroshimartinsarutarosスーパーコピースーパーコピーウブロスーパーコピー時計のブランド時計コピー通販です。弊店のウブロコピー時計等のブランドコピー時計は送料手数料無料で、業界NO.1品質2年無料保証です。全サイト15%OFFキャンペーン実施中です。