Excel to Table | Excel表からHTMLテーブルへ一発変換 | すぐに使える便利なWEBツール | Tech-Unlimited

http://tech-unlimited.com/exceltable.html

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を追加するということでした。

Alfrescoの翻訳ソリューション

Lingotekクラウドベースの翻訳管理システム| Lingotek
https://www.lingotek.com/ja/alfresco-software

aegif Labo Blog: Alfresco 4.2のMicrosoft Office連携（オンライン編集機能）をSSL化する

http://labo-blog.aegif.jp/2014/06/alfresco-42microsoft-officessl.html

Node.jsのhttp-serverっていうコマンドラインのウェブサーバーが便利 | Firegoby

https://firegoby.jp/archives/5706

PuTTYのたちあげがめんどくさくなったからPageantとか使ってみた - いろいろ解析日記

http://d.hatena.ne.jp/nattou_curry_2/20090110/1231598308

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としました。

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

AWS EC2の自動起動と自動停止 (Python版)

LambdaとCloudWatch EventsでEC2の自動起動＆自動停止をやってみた(Python版) ｜ Developers.IO
http://dev.classmethod.jp/cloud/aws/lambda_cloudwatch-events_ec2-star-stop-python/

株式会社Pro-SPIRE 技術者ブログ: Alfrescoのアドオン Manual Manager でマニュアルを作成する

http://developers.pro-spire.co.jp/2014/04/alfresco-manual-manager.html

Transloadit: File Uploading, Conversion & Processing for websites/apps

https://transloadit.com/

事件です！jQuery(window).height()が動かねぇ ～原因究明と解決まで～ | アンギス

http://unguis.cre8or.jp/web/253

IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版） - DTP Transit

http://www.dtp-transit.jp/adobe/illustrator/post_1896.html

Illustrator スクリプト アートボードをオブジェクト全体に合わせる

カネムーメモ: IllustratorのScriptで、アートボードをオブジェクト全体に合わせる

http://blog.kanemu.net/2011/08/illustrator.html

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/

AWS EC2 新しいユーザーの作成（公開鍵はec2-userのものを使用）

AWS EC2 新しいユーザーの作成（公開鍵はec2-userのものを使用）は、
基本、以下を参照。


AWSのEC2サーバへのログインユーザを初期から変更してセキュリティを高める | GEEK PLUS（ギークプラス）
https://blog.silvaze.com/change-aws-login-user

AWS EC2にSSH接続用のユーザーを作成する - Qiita

ssh-keygen -t rsa
http://qiita.com/dahugani/items/e1fc5c212bf6a7365f8f

AWSでFTPユーザーを作成する

[AWS] EC2でFTPを使いたい

http://qiita.com/Yuki_BB3/items/deeb84c360c6f3c37f51

シェルスクリプトの書き方

プログラマーの君！ 騙されるな！ シェルスクリプトはそう書いちゃ駄目だ！！ という話 - Qiita

http://qiita.com/piroor/items/77233173707a0baa6360?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=ba607538f5-Qiita_newsletter_238_12_14_2016&utm_medium=email&utm_term=0_e44feaa081-ba607538f5-33160825

ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度 - PhotoshopVIP

http://photoshopvip.net/96943

SourceTreeで始めよう! Gitへの乗り換え指南

http://www.slideshare.net/kekyo/sourcetree-git

Webと印刷をひとつにするには Vivliostyle

Webと印刷をひとつにするには Vivliostyle 【映像あり】

http://www.slideshare.net/JEPAslide/webvivliostyle

Node.jsのScraperでお手軽スクレイピング！ - Qiita

http://qiita.com/yosuke_furukawa/items/c17c5aac348b6ed29294

JavaScriptでHTMLタグを削除する正規表現 - Qiita

http://qiita.com/miiitaka/items/793555b4ccb0259a4cb8

str.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')

Web APIによるデータ連携デザインパターンとツール活用 (1/4)：CodeZine（コードジン）

http://codezine.jp/article/detail/9760

AWSネットワークの論理的な側面 ～ AWSのバックボーンネットワークに関するDeepな話（2） (1/4)：CodeZine（コードジン）

http://codezine.jp/article/detail/9790

素早く画像書き出しできるillustrator向けスクリプト - Two hats

http://2-hats.hateblo.jp/entry/2015/07/27/120859

CSS Reference - A free visual guide to the most popular CSS properties.

http://cssreference.io/

MITライセンスを1行1行読んでいく | プログラミング | POSTD

http://postd.cc/mit-license-line-by-line/

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

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

http://www.slideshare.net/uemera/wordpressgit-wordpress

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

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

http://www.slideshare.net/uemera/wordpressgit-wordpress

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

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

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

http://www.slideshare.net/hibiki443/git-git-lfs-60951449

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

http://qiita.com/daijinload/items/00993075e0049c8131de#_reference-4abcdb9ff5892de9c0d7

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

http://qiita.com/sansaisoba/items/5b08ebd6d51d56705955?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=df86747189-Qiita_newsletter_235_11_23_2016&utm_medium=email&utm_term=0_e44feaa081-df86747189-33160825

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 デジマラボ

https://bita.jp/dml/ga_datastudio

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

http://qiita.com/jaxx2104/items/5f28915355a85d36e38a

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年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選 - PhotoshopVIP

http://photoshopvip.net/96241

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'

.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年版

http://www.slideshare.net/k16shikano/2015-55455604

cron力をつけよう！全てのcrontab入門者に贈る9個のテクニック · DQNEO起業日記

http://dqn.sakusakutto.jp/2012/06/cron_crontab9.html

仕事で使ってる巨大SVNレポジトリをGithubに移管するためにやったことまとめ · DQNEO起業日記

http://dqn.sakusakutto.jp/2012/10/svn-git-github-migration.html

見逃せない！2016年大注目のWebサービス17選｜ferret [フェレット]

https://ferret-plus.com/5317?utm_source=mailmag20161113&utm_medium=email&utm_campaign=content

【AWS 再入門】EC2 + RDS によるミニマム構成なサーバー環境を構築してみよう – NET BIZ DIV. TECH BLOG

https://tech.recruit-mp.co.jp/infrastructure/retry-aws-minimum-vpc-server-environment/

Google Analytics 訪問数とページ別訪問数の違い

訪問数（セッション）とページ別訪問数の違いは、よく混乱するのですが、以下のサイトの説明は分かりやすかったです。

訪問数とページ別訪問数の違いなどGoogle Analyticsの指標まとめ | ozkaz.jp - Web担当者の気になるいろいろ
http://ozkaz.jp/web/google-analytics/

Web開発に必要なもの - セキュリティ対策

WordPress使いならこれだけはやっておきたい本当のセキュリティ対策10項目 | WP-D

https://wp-d.org/2012/10/18/806/

ウェブ開発に必要なもの - データベース設計

4ステップで作成する、DB論理設計の手順とチェックポイントまとめ - Qiita

http://qiita.com/nishina555/items/a79ece1b54faf7240fac?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=741c6575ab-Qiita_newsletter_233_11_09_2016&utm_medium=email&utm_term=0_e44feaa081-741c6575ab-33160825

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

http://tech.basicinc.jp/Linux/2014/01/14/sftp_chroot/

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

http://qiita.com/satoken0417/items/c1535b7d3322ac0d69ca

思わず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!!（アプギガ）

http://plus.appgiga.jp/masatolan/2016/08/30/57232/

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

http://mysuki.jp/english-tonguetwisters-2014

英語で接客｜海外の旅先でも役立つ！１１の場面別フレーズ集

http://mysuki.jp/english-servicing-customer-4933

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  

になりました。

Apache:インストール(httpd)、初期設定、その他 - Qiita

http://qiita.com/YasuyukiKawai/items/b32bd94cde7f928c0753

jquery1.11から.data()の挙動が変わっている件 - Qiita

jquery1.11から.data()の挙動が変わっている件 - Qiita
http://qiita.com/smzk/items/3aa86ee209b637d8b15e

サントリーホール音響設計──豊田泰久｜WIRED.jp

評価を数字に委ねない。信じるべきは、自分のなかの「強いイメージ」──豊田泰久｜WIRED.jp
http://wired.jp/series/wired-audi-innovation-award/031-yasuhisa_toyota/

クリックイベントをCSSで無効化する - Qiita

http://qiita.com/Mosac/items/d6f219d07a8fdb38b961

.avoid-clicks{    pointer-events: none;  }

Origami Studio — Design Prototyping

http://origami.design/

[2016版] Amazon EC2 購入オプションを理解する [コストダウン] ｜ Developers.IO

http://dev.classmethod.jp/cloud/aws/amazon-ec2-cost-down-2016/

WordPressの可能性がさらに広がる！Webデザインのトレンドを効果的に取り入れる便利なプラグインのまとめ | コリス

http://coliss.com/articles/blog/wordpress/wordpress-best-plugins-2016-autumn.html

デザイナーが仕事で使い倒してるフリー日本語フォント12選 - ベーコンさんの世界ブログ

http://www.baconjapan.com/entry/2016/10/27/223512

【藤本健のDigital Audio Laboratory】「シンセサイザーで音作り」の真髄に迫るイベント。“冨田勲サウンド”再現も

http://av.watch.impress.co.jp/docs/series/dal/1025122.html

kazmax - Linuxで自宅サーバー

http://kazmax.zpp.jp/

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

http://wp.tech-style.info/archives/683

REST API設計者のための有名APIのURL例 - Qiita

http://qiita.com/yu1ro/items/f366ded721f03ae91d96?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=6b9fff6827-Qiita_newsletter_231_10_26_2016&utm_medium=email&utm_term=0_e44feaa081-6b9fff6827-33160825

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

http://qiita.com/cocuh/items/e7c305ccffb6841d109c?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=6b9fff6827-Qiita_newsletter_231_10_26_2016&utm_medium=email&utm_term=0_e44feaa081-6b9fff6827-33160825

黒魔術（JavaScript）まとめ - Qiita

http://qiita.com/suetake/items/425684ac278c7cf8c30c?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=6b9fff6827-Qiita_newsletter_231_10_26_2016&utm_medium=email&utm_term=0_e44feaa081-6b9fff6827-33160825

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

Electronでファイルやフォルダの選択

Electronでファイルやフォルダの選択 - Qiita

http://qiita.com/khirose/items/6544342fd4141345bb19

InDesignの自動化に役立つ知識とツールのまとめ - Qiita

InDesignの自動化に役立つ知識とツールのまとめ - Qiita

http://qiita.com/y_hokkey/items/7e883843873968721942

Linux 特定のファイル内の特定の文字列だけを置換する

find + sed で一斉置換 - Qiita

http://qiita.com/somat/items/b775f7e082f1559707e2

例： 拡張子がjsのファイル内のAB.CをXY.Zに変換

find . -type f -name "*.js" -print0 | xargs -0 sed -i -e "s/AB\.C/XY\.Z/"

サーバー群の伸縮性

http://minimalworks.jp/liveserv/elasticity-general.html#id10

さくらインターネットのメールがGmailやガラケーで迷惑フォルダ・スパム扱いになる

【決着編】さくらインターネットのメールがGmailやガラケーで迷惑フォルダ・スパム扱いになる件｜永遠のホリデー(^O^)／

http://ameblo.jp/benjamin-fish/entry-11799414937.html

SPFレコードの利用

[Git]Git管理下のファイルをFTPでアップロードする場合 ~ C-limber's high

http://c-limber.blogspot.jp/2015/10/gitgitftp.html

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

• Facebook
• Twitter
• Hatena
• Pocket

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

プラグインでのアップロード機能の実現は、いつも一筋縄ではいきません。アップロードにおける優れたユーザー体験（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機能を持っていない場合のみ変更されます。

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

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

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

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

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ファイルからのレスポンスのサンプルは次のようになります。

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

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

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

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

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

beforeSend: function() {      $imgFile.hide();      $imgNotice.html('Uploading…').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…(' + 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_submissionにaction値を設定しているので、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_errorとwp_send_json_success関数を使ってレスポンスを返すこともできます。

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

さらなる改良

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

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

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

最後に

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

（原文：Enabling AJAX File Uploads in Your WordPress Plugin）

［翻訳：新岡祐佳子］
［編集：Livit］