2016年12月29日木曜日

Alfresco Web Quick Start のインストール

Web Quick Start をあとから手動でインストールするには基本的に以下を参照。

Manually installing Web Quick Start | Alfresco Documentation
http://docs.alfresco.com/5.1/tasks/WQS-install-manual.html

手順5は、/opt/alfresco-community/bin ディレクトリに移動して

$ sh apply_amps.sh を実行する。


インストール後、サイトのカスタマイズでWeb Quick Startを追加するのかと勘違いして右往左往しましたが、

ダッシュボードのカスタマイズ→ダッシュレットの追加

でWeb Quick Startを追加するということでした。


2016年12月26日月曜日

Alfresco サイト更新をメール通知する方法

Alfrescoのデフォルトでは
activities.feed.notifier.enable=true
としても、アクティビティは毎日00:00に一括してメール送信されるだけで、不便である。

参考:Alfresco勉強会#35 AlfrescoのアクティビティフィードをSlackに送るカスタマイズ
http://www.slideshare.net/terajun/alfresco35-alfrescoslack

上記をみると、/opt/alfresco-community/tomcat/shared/classes/alfresco-global.propertiesalfresco-global.properties内で

activities.feed.notifier.cronExpression=0/10 * * * * ?

とすれば、10秒毎に、更新内容のメール通知が送られるので、とりあえずこれでOKとしました。

しかし、更新がある度に、ユーザーにメール通知設定するという設定はないのでしょうか?

2016年12月19日月曜日

Alfrescoからメール通知できるようにする



hostを編集(メールのURLに関連するので。)
/opt/alfresco-community/tomcat/shared/classes/alfresco-global.properties

alfresco.context=alfresco
#alfresco.host=127.0.0.1 ← コメントアウト
alfresco.host=[Domain] #← ドメイン記入。なければIP
alfresco.port=443 #← HTTPSにした
alfresco.protocol=https #← HTTPSにした

share.context=share
#share.host=127.0.0.1 #← コメントアウト
share.host=[Domain] #← ドメイン記入。なければIP
share.port=443 #← HTTPSにした
share.protocol=https #← HTTPSにした

--------------------------------

メール設定
/opt/alfresco-community/tomcat/shared/classes/alfresco-global.properties

notification.email.siteinvite=true サイトへ招待メール通知ONにして、末尾に以下を追加した

### E-mail Settings
mail.host=smtp.********.co.jp #←自分の会社の送信メールサーバー
mail.port=587
mail.username=alfresco@********.co.jp #←Alfresco用のメールアドレス
mail.password=******* #←メールのパスワード
mail.encoding=UTF-8
mail.from.default=alfresco@********.co.jp
mail.from.enabled=false
mail.smtp.auth=true
mail.smtp.timeout=30000

###Others
activities.feed.notifier.enabled=true #←フィード更新のメール通知
activities.feed.notifier.cronExpression=0/30 * * * * ? #←30秒ごとにフィードチェックして更新があればメール通知する。




参考:Alfrescoのインストール作業をコマンド単位で丁寧に記載します - Qiita
http://qiita.com/sadayuki-matsuno/items/87fb9793b1d38ab58e18

Git 現在の修正を直前のコミットに結合する

git commit --amend



Gitの直前のコミットと、現在の修正を結合する - 高尾宏治日記 on はてな
http://d.hatena.ne.jp/kouji0625/20130621/p1


Git - 履歴の書き換え | Atlassian Git チュートリアル https://ja.atlassian.com/git/tutorials/rewriting-history/


2016年11月23日水曜日

もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜

もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜

Gitインストール時の注意点

もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜




MasterSeeker MFT内のデータをキャッシュし、ファイル/フォルダを高速に検索できる

MFT内のデータをキャッシュし、ファイル/フォルダを高速に検索できる
http://www.vector.co.jp/soft/winnt/util/se505524.html

大容量ファイルもGitで管理。 Git LFSの使い方

Gitで説明する機会が多かったのでまとめてみた - Qiita

display:table-cell;を安易に使うべきでない理由いろいろ - Qiita

http://qiita.com/sawadays0118/items/4c329fd05cdff14ffebc

レスポンシブ対応のグリッドレイアウトを実現する代替案

レガシーIEでも対応したい

  • floatと高さを揃えるJS(fixHeight.js)がベスト
  • 次点でdisplay:inline-block;と高さを揃えるJSだが、CSSだけでグリッドの並び順を逆にすることが不可能。
  • 高さを揃えるJSを使わずにmin-heightで何とかしようとするのは、テキスト量が増減したときに困る上に、モジュールごとに固有のmin-heightを指定しなければならない、文字サイズ拡大に対応できないなどの弊害があるため現実的ではない。(ちなみに高さを揃えるJSだったら何でも良いわけではなく、文字サイズ拡大やウィンドウのリサイズに対応していて、行ごとに高さを揃える個数を指定しないで済むfixHeight.jsがオススメ)

IE10からの対応でOK

  • display:flexbox;(ベンダープレフィクス必須、IE11以降はdisplay:flex;
  • そして、毎度のことながらIE様のバグには注意

Normalizing Cross-browser Flexbox Bugs — Philip Walton
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

  • 追加でFlexboxのpolyfillがあったので紹介します

IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利! | Webクリエイターボックス
http://www.webcreatorbox.com/tech/ie8-flexbox/

偏見?参考にならないjQueryのページの見分け方 - Qiita

2016年11月21日月曜日

SourceTree(Windows環境)でコミット間の差分ファイルを出力する | Tips Note by TAM

Gitで差分ファイルを出力するバッチファイルは以下がエラーが出ずよかったです。

SourceTree(Windows環境)でコミット間の差分ファイルを出力する | Tips Note by TAM
http://www.tam-tam.co.jp/tipsnote/program/post7435.html

他にも探すとありますが、ファイルが削除されていたりリビジョンが違うとエラーなってしまうものがありました。

追記

英語環境のWindows10で上記バッチファイルを使用したら、フォルダ名・ファイル名がおかしくなってしまいました。少し調べたところ、Windowsの時間設定が米国式になっていたので、日本式に修正したらOKでした。

参考
http://www.atmarkit.co.jp/ait/articles/0405/01/news002.html

Google Data Studioすごすぎ。レポート作成時間を完全にゼロにする無料BIツールが現場を変える - BITA デジマラボ

React.js製の静的サイトジェネレーターGatsbyに移行した - Qiita

jekyll-import ブログ記事を他サービスに移行するためのツール


jekyll-import • Import your old & busted site to Jekyll — jekyll-import • Import your old & busted site to Jekyll
http://import.jekyllrb.com/

高価だったAdobeのアプリも今や無料でダウンロードできる | ライフハッカー[日本版]

高価だったAdobeのアプリも今や無料でダウンロードできる | ライフハッカー[日本版]
http://www.lifehacker.jp/2016/11/161118_adobefree.html

「Photoshop Mix v2.0」(Android、iOS):スマホでレイヤーを扱える

「Photoshop Fix 」(iOS):最高のアプリが無料に

「Spark Suite」(ウェブ、iOS):魅力的な記事やビデオをつくる

「Color」(ウェブ):すぐに良い配色が見つかる

2016年11月18日金曜日

【2016年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選 - PhotoshopVIP

XCOPY フォルダ構造を保ったまま特定のファイルだけコピーする

フォルダ構造を保ったまま特定のファイルだけコピーしたいときがあります。
xcopyを使えば可能です。

Windowsの場合


例1:Folder1フォルダにある拡張子htmlファイルのみ、Folder2にコピーする

>xcopy /e Folder1\*.html Folder2\

こうすると、htmlファイルのない空のフォルダもコピーされてしまうので、以下のようにするとよい。

例2:

>xcopy /s Folder1\*.html Folder2\




Linuxの場合


ディレクトリ1内にあるjpgファイルを、階層構造を保ったままディレクトリ2にコピー

$ find ディレクトリ1 -name "*.jpg" -print0 | xargs -0 cp --parents -t ディレクトリ2


参考
ディレクトリ構造を保ったまま欲しいファイルだけをコピーする方法
http://d.hatena.ne.jp/yokoji/20120228/1330382086





Video: "Douglas Crockford Talks about 'Upgrading the Web'

2016年11月16日水曜日

.htaccessで特定のファイルやディレクトリのみBasic認証を解除する

.htaccessで特定のファイルやディレクトリのみBASIC認証を解除する | ザ サイベースhttp://thesaibase.com/server/htaccess-basic-auth


特定のファイルやディレクトリのみBasic認証を解除する場合

以下のように.htaccess に記述し、Basic認証を解除したいフォルダに設置します。

1
2
3
Satisfy any
order allow,deny
allow from all


特定のファイルのみBasic認証を解除する場合

1
2
3
4
5
<Files "example.html">
Satisfy any
order allow,deny
allow from all
</Files>


特定の拡張子ファイルのみBasic認証を解除する場合

1
<FilesMatch "\.(gif|jpe?g|png)$">

※ファイル名などで正規表現を使う場合には、FilesよりもFilesMatchを使用することが推奨されているようです。


ディレクトリを指定する場合

1
2
3
4
5
<FilesMatch "\/?example">
Satisfy any
order allow,deny
allow from all
</FilesMatch>

※exampleディレクトリ内のBasic認証を解除。

ドキュメントシステムはこれを使え2015年版

2016年11月9日水曜日

2016年11月4日金曜日

SFTPでディレクトリ制限ありなユーザを作成する - chrootなやつ

Linuxにて削除(rm)してしまったファイルを復元する【CentOS】 - Qiita

思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!

思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ! | シェアしたくなる最新のWebサービス・ITニュース情報をチェック! APPGIGA!!(アプギガ)
http://plus.appgiga.jp/masatolan/2016/10/31/57359/

Nativefier: URLを指定するだけでWebサイトをデスクトップアプリにする

Electronで作成するものですが、とても便利です。

GitHub - jiahaog/nativefier: Make any web page a desktop application
https://github.com/jiahaog/nativefier

今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕! | シェアしたくなる最新のWebサービス・ITニュース情報をチェック! APPGIGA!!(アプギガ)

2016年11月3日木曜日

有名な英語の早口言葉8選|発音もネイティブ並みに上達!

英語で接客|海外の旅先でも役立つ!11の場面別フレーズ集

Linux(Ubuntu)で市販のDVDを再生するには

参考 http://qiita.com/SUZUKI_Masaya/items/1f0081c5a4405a2fd0e4

上記を参考にまず、以下を実行

sudo apt-get install ubuntu-restricted-extras libdvdread4 vlc

これで制限のかかっていないDVDは再生可能。しかし、以下を実行しても市販のDVDは再生できなかった。そもそも install-css.sh が見つかりません。となってしまう。
sudo /usr/share/doc/libdvdread4/install-css.sh
そこでhttp://verifiedby.me/adiary/088を参考に、
sudo apt install libdvd-pkg  sudo dpkg-reconfigure libdvd-pkg  
を実行したら再生できました。



参考 http://verifiedby.me/adiary/088

市販dvdの再生を可能にするには、以前は
sudo /usr/share/doc/libdvdread4/install-css.sh  
でしたが、15.10から
sudo apt install libdvd-pkg  sudo dpkg-reconfigure libdvd-pkg  
になりました。

2016年10月26日水曜日

kazmax - Linuxで自宅サーバー

REST APIとは? - API設計のポイント

そこそこセキュアなlinuxサーバーを作る - Qiita

黒魔術(JavaScript)まとめ - Qiita

ExcelからJSONに変換するマクロ

ExcelのテーブルをJSON形式に変換するマクロ | You Look Too Cool
http://stabucky.com/wp/archives/7658

まなBlog | Excel の複数テーブルから JSONデータを作る
http://manamana.ddo.jp/blog/post/Excel-%E3%81%AE%E8%A4%87%E6%95%B0%E3%83%86%E3%83%BC%E3%83%95%E3%83%AB%E3%81%8B%E3%82%89-JSON%E3%83%86%E3%83%BC%E3%82%BF%E3%82%92%E4%BD%9C%E3%82%8B

[node.js]静的コンテンツを表示するWEBサーバー | #GUNMAGISGEEK

http://shimz.me/blog/node-js/2690

2016年10月21日金曜日

WordPressのアップローダープラグインを作る方法

https://www.webprofessional.jp/enabling-ajax-file-uploads-in-your-wordpress-plugin/

WordPressの安全なファイルアップロードをAJAXで実現

2016/08/23

 

Firdaus Zahari

0

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

WordPressで写真などの画像を投稿できるサイトを作るときに必要なのが、アップローダーですよね。コアの機能を上手に利用することで、セキュリティにも考慮しながら使いやすい機能を自作する方法を解説します。

Frontend submission form (Logged In)

プラグインでのアップロード機能の実現は、いつも一筋縄ではいきません。アップロードにおける優れたユーザー体験(UX)の実現が必要な一方、セキュリティ問題からも目が離せません。セキュリティ対策が適切でないと、サイトをセキュリティ上のさまざまな脆弱性発生の潜在的な危険にさらすことになりかねません。

ソリューション全体をスクラッチで構築せず、WordPressのコアコード、特にasync-upload.phpファイルをwp-adminディレクトリに置いて活用すれば、開発をスピードアップできるでしょう。

async-upload.phpファイルの使用にはいくつかのメリットがあります。このファイルはWordPressコア自体によってメディアライブラリーでの非同期アップロード用に使われるので、コードを確実に標準化できます。次に、バリデーションと権限のチェックをすべてしてくれるので、自分でする必要がなくなります。

必要条件

async-upload.phpファイルを使用するには、従うべき規則がいくつかあります。以下にそれぞれの規則を説明します。

  • 使用されるfileインプット(ファイル入力欄)はasync-uploadに設定されたname属性を有していなければならない

ひとたびasync-upload.phpファイル内部でバリデーションが通ると、次いでwp_ajax_upload_attachmentが、第1引数としてasync-uploadを使用するmedia_handle_upload関数を呼び出すためです。ほかの値の使用は無効です。

  • AJAXリクエストと共に送信されるノンスは、wp_create_nonce('media-form')関数で生成された値とともにデフォルトの_wpnonceキーを使用しなければならない

wp_ajax_upload_attachment関数内部で発生するcheck_ajax_referer形式でのバリデーションのためです。

  • AJAXリクエストを介して送信されるデータも、upload-attachmentの値とともにactionキーを有する必要がある

async-upload.phpファイル内部で検証され、値が正しく設定された場合のみwp_ajax_upload_attachment関数をトリガーします。

プラグインについて

プラグインにAJAXファイルアップロードのカスタム機能を構築するアイデアをよりよく説明するため、簡単なプラグインを作成して実際に試します。

この記事では、登録済みのユーザーがちょっとしたコンテストに画像を投稿できるプラグインを作成します。フロントエンドの投稿フォーム、つまりユーザーが直接画像をアップロードできる特定のページに表示されるアップロードフォームです。まさにAJAXアップロード機能の実装にぴったりです。

記事の長さの関係で話をシンプルにしておくため、このプラグインで実現することとしないことを決めておきます。

このプラグインでできることは次のとおりです。

  • ショートコードでの任意のページへのフォームの追加を管理者に許可する
  • AJAXアップロード機能を備えた投稿フォームをユーザーに表示する
  • 投稿後ただちにサイト管理者に通知するEメールを送信する

この記事の範囲では、プラグインに次の機能は付けません。

  • 投稿内容をデータベースに格納する
  • バックエンドで投稿内容を一覧表示する
  • 匿名のユーザーにファイルのアップロードを許可する

プラグインのブートストラッピング

wp-content/pluginsフォルダーに移動して、すべてのプラグインコードを置く新規フォルダーを作成します。ここから先、記事ではこのフォルダー名をsitepoint-uploadとし、すべての関数、フック、コールバックにsu_プリフィックスを付けます。

次に、メインのプラグインファイルを作成し、分かりやすくするためにフォルダーと同じ名前にします。プラグインフォルダー内にjsフォルダーも作成し、とりあえず空のscript.jsファイルを入れておきます。

ここまでで、プラグインのディレクトリ構造は次のようになります。

wp-content/  |-- plugins/      |-- sitepoint-upload/          |-- js/          |   |-- script.js          |--sitepoint-upload.php  

プラグインのメインファイルsitepoint-upload.phpに簡単なプラグインヘッダーを付け、その後プラグインのページに進んで有効化します。以下が作成例です。

<?php  /*  Plugin Name: Simple Uploader  Plugin URI: http://sitepoint.com  Description: Simple plugin to demonstrate AJAX upload with WordPress  Version: 0.1.0  Author: Firdaus Zahari  Author URI: http://www.sitepoint.com/author/fzahari/  */  

スクリプトのエンキュー

ここで空のscript.jsファイルをフロントエンドにエンキューできます。これをAJAXアップロード機能の処理にも、投稿フォームの拡張にも使います。

function su_load_scripts() {      wp_enqueue_script('image-form-js', plugin_dir_url( __FILE__ ) . 'js/script.js', array('jquery'), '0.1.0', true);  }  add_action('wp_enqueue_scripts', 'su_load_scripts');  

wp_localize_script関数を使って、script.js内部で使用されるデータもローカライズします。必要事項が3つあります。1つ目はadmin-ajax.phpファイルへの正確なURL(AJAX経由でもフォームに投稿するため)、2つ目はasync-upload.phpファイルへの正確なURL、3つ目はwp_create_nonce関数を使って生成するノンスのローカライズです。

ここまで説明してきたwp_enqueue_scriptsフック用のコールバック関数は次のようになります。

function su_load_scripts() {      wp_enqueue_script('image-form-js', plugin_dir_url( __FILE__ ) . 'js/script.js', array('jquery'), '0.1.0', true);        $data = array(                  'upload_url' => admin_url('async-upload.php'),                  'ajax_url'   => admin_url('admin-ajax.php'),                  'nonce'      => wp_create_nonce('media-form')              );        wp_localize_script( 'image-form-js', 'su_config', $data );  }  add_action('wp_enqueue_scripts', 'su_load_scripts');  

投稿フォーム用のショートコードを登録する

次に、同じことを繰り返しマークアップしなくても希望のページに登録フォームを簡単に追加できるよう、投稿フォーム用のショートコードを登録する必要があります。フォームに実装する内容は次のとおりです。

  • ユーザー名用のテキスト入力フィールド
  • ユーザーのEメールアドレス用の別のEメール入力フィールド
  • AJAXアップロード用のファイル入力欄「async-upload
  • Eメールのプレビュー、エラーメッセージ、その他のアイテム用の多数のプレースホルダーdiv

また、ユーザーが現在ログインしていない場合は投稿フォームを完全に無効にし、代わりにログインリンクを表示します。

function su_image_form_html(){      ob_start();      ?>          <?php if ( is_user_logged_in() ): ?>              <p class="form-notice"></p>              <form action="" method="post" class="image-form">                  <?php wp_nonce_field('image-submission'); ?>                  <p><input type="text" name="user_name" placeholder="Your Name" required></p>                  <p><input type="email" name="user_email" placeholder="Your Email Address" required></p>                  <p class="image-notice"></p>                  <p><input type="file" name="async-upload" class="image-file" accept="image/*" required></p>                  <input type="hidden" name="image_id">                  <input type="hidden" name="action" value="image_submission">                  <div class="image-preview"></div>                  <hr>                  <p><input type="submit" value="Submit"></p>              </form>          <?php else: ?>              <p>Please <a href="<?php echo esc_url( wp_login_url( get_permalink() ) ); ?>">login</a> first to submit your image.</p>          <?php endif; ?>      <?php      $output = ob_get_clean();      return $output;  }  add_shortcode('image_form', 'su_image_form_html');  

上記のショートコードのコールバック関数について説明します。

  • 登録するショートコードはimage_form
  • ショートコードのコールバック関数内部でexposeする部分をよりフレキシブルにするため、出力バッファリングを使用
  • ファイル入力欄での画像用のファイルの選択をaccept属性経由のみに制限する。ちなみにこれは実質上のファイルバリデーションに代わるものではない(詳しくはこちら
  • ログインURLに関して、ログイン成功後ただちにユーザーが投稿ページにリダイレクトできるように、wp_login_urlへの現在のページのパーマリンクを供給

特定のユーザー権限にupload_files機能を追加する

プラグインを確実に機能させるために、subscriber(購読者)権限の機能を変更する必要があります。なぜならsubscriber権限のユーザーは、デフォルトでファイルのアップロード機能を持たないからです。

function su_allow_subscriber_to_uploads() {      $subscriber = get_role('subscriber');        if ( ! $subscriber->has_cap('upload_files') ) {          $subscriber->add_cap('upload_files');      }  }  add_action('admin_init', 'su_allow_subscriber_to_uploads');  

ちなみに、subscriber権限はその時点でupload_files機能を持っていない場合のみ変更されます。

これでプラグインの基礎部分ができました。これから、投稿フォームを表示する新規ページを作成します。

Submit Your Image WordPress

ここではtwentysixteenテーマを有効にしたデフォルトのWordPress実装において、フロントエンドでフォームがどのように見えるかを示しています。

Frontend submission form (Logged In)

サイトからログアウトすると、代わりに通知が表示されます。

Frontend submission form (Logged out)

プラグインが、いい感じになってきましたね!

AJAXアップロードを実装する

プラグインの基礎部分が正しく構成されたところで、必要なコア機能、AJAXアップロードに集中できます。

進めるにあたって、フォルダー内にあるscript.jsファイルを開き、最初にすべてのコードを即時呼び出し関数式(immediately-invoked function expression:IIFE)内にラップします。

次に、コードをスピードアップするためにいくつかのセレクターをキャッシュします。画像プレビューのdiv、入力されたファイル、アップロード通知の表示に使用されるdivへの参照も含まれます。

(function($) {      $(document).ready(function() {          var $formNotice = $('.form-notice');          var $imgForm    = $('.image-form');          var $imgNotice  = $imgForm.find('.image-notice');          var $imgPreview = $imgForm.find('.image-preview');          var $imgFile    = $imgForm.find('.image-file');          var $imgId      = $imgForm.find('[name="image_id"]');      });  })(jQuery);  

キャッシュされたセレクターは、あとで役立ちます。先に述べたとおり、aync-upload.phpファイルでのバリデーションが通るために従うべきルールがいくつかあります。指定された正しいキーまたは値のペアで、AJAXを介してaync-upload.phpファイルへのPOSTリクエストの作成は、FormData APIを使って実行できます。

最初にファイル入力欄にchangeイベントをフックし、入力が変更される場合にかぎり、アップロードをトリガーします。

$imgFile.on('change', function(e) {      e.preventDefault();        var formData = new FormData();        formData.append('action', 'upload-attachment');      formData.append('async-upload', $imgFile[0].files[0]);      formData.append('name', $imgFile[0].files[0].name);      formData.append('_wpnonce', su_config.nonce);        $.ajax({          url: su_config.upload_url,          data: formData,          processData: false,          contentType: false,          dataType: 'json',          type: 'POST',          success: function(resp) {              console.log(resp);          }      });  });  

コードを上記のようにしてアップロード機能をテストし、うまくいくことを確認します。開発者コンソール(使用しているブラウザに応じた)を使って、出力用のコンソールタブをチェックしてください。アップロード成功後のaync-upload.phpファイルからのレスポンスのサンプルは次のようになります。

upload php

wp-content/uploadsディレクトリに移動してファイルがあるかどうかもチェックできます。アップロード機能がきちんと動作していることを確かめたら、アップロードのスクリプトに少しばかり改良を加えます。考えられるいくつかの改良点は次のとおりです。

  • アップロード処理中にプログレスバーまたはテキストを表示する
  • アップロード成功時にアップロードされた画像のプレビューを表示する
  • アップロードが失敗した場合、エラーを表示する
  • ユーザーが新規画像をアップロードして現在の画像と差し替える方法を提供する

これらの実装方法を1つずつ説明します。

アップロード処理中にプログレスバーまたはテキストを表示する

これはとても簡単です。jQuery AJAXのbeforeSend用にコールバックを定義するだけで大丈夫です。AJAXアップロード用のコードのある場所に、次のコードブロックを置きます。

beforeSend: function() {      $imgFile.hide();      $imgNotice.html('Uploading&hellip;').show();  },  

ユーザーに進捗状況をテキスト表示するようにあらかじめ定義されたimage-noticeクラスで空のdivを使用します。また、アップロード処理中はファイル入力欄を隠します。

対応しているブラウザーでは、オリジナルのjQuery「xhr」オブジェクトを自分でオーバーライドして、アップロードのパーセンテージも表示できます。$.ajax構成にこれを追加すると次のようになります。

xhr: function() {      var myXhr = $.ajaxSettings.xhr();        if ( myXhr.upload ) {          myXhr.upload.addEventListener( 'progress', function(e) {              if ( e.lengthComputable ) {                  var perc = ( e.loaded / e.total ) * 100;                  perc = perc.toFixed(2);                  $imgNotice.html('Uploading&hellip;(' + perc + '%)');              }          }, false );      }        return myXhr;  }  

対応しているブラウザーでは、コードのUploadingテキストのあとにアップロードのパーセンテージを簡単に追加できます。なかなか素敵な拡張ですね。対応していないブラウザーでは、この優れたグレースフル・デグラデーションは実装できません。

アップロード成功時にアップロードされた画像のプレビューを表示し、失敗時にはエラーを表示する

async-upload.phpスクリプトからのレスポンスによって、ユーザーに別々のメッセージを表示します。successキーがtrueに設定された場合、アップロードされた画像をユーザーに表示し、ファイル入力欄を隠せます。アップロードが失敗した場合、div内のテキストを前述のimage-noticeに置きかえます。

success: function(resp) {      if ( resp.success ) {          $imgNotice.html('Successfully uploaded.');            var img = $('<img>', {              src: resp.data.url          });            $imgId.val( resp.data.id );          $imgPreview.html( img ).show();        } else {          $imgNotice.html('Fail to upload image. Please try again.');          $imgFile.show();          $imgId.val('');      }  }  

$imgIdは、アップロードされた画像のIDの参照に使用する隠しデータです。この値はあとでフォーム投稿に使用しますので、いまは気にしなくて大丈夫です。

ユーザーが新規画像をアップロードして現在の画像と差し替える方法を実現する

ユーザーが現在アップロードされている画像を新規画像と差し替えるための方法として、リンクを供給します。アップロード成功時に表示される通知について、下のコードを、

$imgNotice.html('Successfully uploaded.');  

次のコードに変更します。

$imgNotice.html('Successfully uploaded. <a href="#" class="btn-change-image">Change?</a>');  

btn-change-imageクラスへのアンカーを設定していますが、メリットがあります。アンカーにイベントリスナーを追加して、クリックされたときに現在の画像のプレビューを消去できるからです。また、通知メッセージを隠し、リセット済みの値でファイル入力欄を再び表示します。

$imgForm.on( 'click', '.btn-change-image', function(e) {      e.preventDefault();      $imgNotice.empty().hide();      $imgFile.val('').show();      $imgId.val('');      $imgPreview.empty().hide();  });  

さらにchangeイベントを再びトリガーできるように、クリックされたときにfile inputの値をリセットする必要があります。

$imgFile.on('click', function() {      $(this).val('');      $imgId.val('');  });  

次のセクションに進む前に、もう一度アップロード機能全体を実行して、すべてが目的どおりに動くか確認してください。

プラグインの完成

AJAX経由でフォーム投稿を処理するにあたり、フォームのsubmitイベントにイベントリスナーをバインドします。

$imgForm.on('submit', function(e) {      e.preventDefault();        var data = $(this).serialize();        $.post( su_config.ajax_url, data, function(resp) {          if ( resp.success ) {              $formNotice.css('color', 'green');              $imgForm[0].reset();              $imgNotice.empty().hide();              $imgPreview.empty().hide();              $imgId.val('');              $imgFile.val('').show();          } else {              $formNotice.css('color', 'red');          }            $formNotice.html( resp.data.msg );      });  });  

上記のコードをベースに、WordPress AJAXアクションのビルトインを使ってバックエンドで投稿を処理します。投稿が成功したら、ただちにフォームをリセットし、画像のプレビューを消去してフォームの通知メッセージを緑色に設定します。

投稿が失敗した場合は、フォームの通知メッセージを赤に設定するだけです。こうしておけば、ユーザーは再試行の前にデータから画像を再確認できます。

ここで再びプラグインのメインファイルを開いてAJAXコールバックに追加します。image_submissionaction値を設定しているので、wp_ajax_image_submissionアクションに有効なコールバックを追加することが必要です。

add_action('wp_ajax_image_submission', 'su_image_submission_cb');  

コールバック関数において、最初にしておくべきことがいくつかあります。有効なAJAXノンスのチェックと、ユーザー入力の検証も必要です。この記事の範囲では、新規投稿があったことをサイト管理者にEメールで通知するのみとします。

AJAXコールバック関数のコード全体を示します。

function su_image_submission_cb() {      check_ajax_referer('image-submission');        $user_name  = filter_var( $_POST['user_name'],FILTER_SANITIZE_STRING );      $user_email = filter_var( $_POST['user_email'], FILTER_VALIDATE_EMAIL );      $image_id   = filter_var( $_POST['image_id'], FILTER_VALIDATE_INT );        if ( ! ( $user_name && $user_email && $image_id ) ) {          wp_send_json_error( array('msg' => 'Validation failed. Please try again later.') );      }        $to      = get_option('admin_email');      $subject = 'New image submission!';      $message = sprintf(                      'New image submission from %s (%s). Link: %s',                      $user_name,                      $user_email,                      wp_get_attachment_url( $image_id )                  );        $result = wp_mail( $to, $subject, $message );        if ( $result ) {          wp_send_json_error( array('msg' => 'Email failed to send. Please try again later.') );      } else {          wp_send_json_success( array('msg' => 'Your submission successfully sent.') );      }  }  

今回の目的は、シンプルなcheck_ajax_refererでのチェックとネイティブなPHP関数filter_varでユースケースに事足ります。wp_send_json_errorwp_send_json_success関数を使ってレスポンスを返すこともできます。

これでプラグインが完成し、すべての機能が使えるようになります。検証のため、フォームをきちんと完成して、アップロードされた画像へのリンクを記載したEメールが受信されるか確認してください。

さらなる改良

記事では、内部async-upload.phpファイルを介したAJAXアップロード方法を示すことに焦点を当ててきたため、実際ところどころで説明を端折ってきました。参考までに、プラグイン全体を拡張できるシンプルな点をいくつか紹介します。

  • 投稿に関する付加的な値をキャプチャするフィールドをさらに追加する
  • 通知とアップロード進捗のフォームをより良いスタイルにするため、分離したCSSファイルをエンキューする
  • 投稿されたデータを再確認できるように、データベースに保存する
  • セキュリティ強化のため、アップロード処理のバリデーションをさらに追加する

完成したプラグインのソースコードをGitHubから利用できます。

最後に

結論としては、目のつけどころが分かっていると、プラグインでのAJAXアップロードの実装をスピードアップできるということです。async-upload.phpファイルを使うことで、機能を実装する開発時間を削減できます。また、このファイルはWordPressコアによって管理画面のダッシュボードでのユーザーアップロードの処理に使われているため、信頼性も得られます。

(原文:Enabling AJAX File Uploads in Your WordPress Plugin

[翻訳:新岡祐佳子]
[編集:Livit