3月 2021

WEBサイトやCMSの構築に関わっていると、クライアントから管理画面に編集用のエディタを埋め込んで欲しいという依頼をいただくことがあります。

非エンジニアの立場からすると、いくらシンプルなHTMLでも触りたくないのは当然です。またWEBサイトを公開した際に、ファイルはサーバー上にあるので更新する際はサーバーのファイルバックアップ・編集・アップロードと手間のかかる作業が多いです。

ページの編集をCMSの管理画面から行い、保存ボタンを押すだけで公開しているサイトの内容が変更できれば便利ですよね。

今回は、CMSの管理画面にレイアウト編集用のエディタを導入する想定で、JavaScript製エディタ「ACE」の導入方法と使い方について解説します。

■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】

(さらに…)

JavaScriptとPHPを使用したファイルのアップロード機能を作成したので、処理内容を解説します。

処理はDrag & Drop API、Fetch API、Files APIを使用して実装し、非同期処理でサーバーサイドにデータを送信するまでの記述になります。

私が作成しているCMSでは3つの画像のアップロード処理を実装していますが、

・通常のファイル選択からのアップロード
・画像URLからイメージを取得してアップロード
・ドラッグ&ドロップで画像をアップロード

今回はドラッグ&ドロップで画像をアップロードする処理のみ解説します。(サーバーサイドの処理は別記事で解説します。)

これまでの記事で解説してきたAPIを実践的に使用していますので、復習を兼ねて細かくソースコードを追ってみてください。

(さらに…)

この記事ではFormDataオブジェクトとfetch()を使用して、サーバーにデータを保存するまでの処理を学ぶことができます。今回はCakePHP(サーバーサイド)のコントローラーの処理も記載していますので、データの取得・送信・保存・レスポンス処理までの一連の流れを解説します。

非同期処理とfetch()については下記の記事で解説しているので、合わせて理解を深めてください。

■ 非同期処理(Promise)について : /javascript/asynchronous-processing
■ Fetch APIについて : /javascript/ajax-fetch

FormDataについて理解がまだの方は、FormDataの概要と作成方法について解説しているので、まずは下記の記事でイメージをつけてから本記事を読んでください。

■  FormDataの概要と、データの作成方法 : /javascript/formdata-create

(さらに…)

ファイルアップロード機能を実装するためのソースコードはネット上に多く出回っているので、実装するのはそれほど難しいことではありません。

機能を作る時に重要になるのが、不適切な形式のファイルはアップロードできないことです。拡張子チェックなどの処理が実装されていない状態で、悪意のあるユーザーが不適切なファイルをアップロードしてくる可能は大いに考えられます。

本記事では、Files APIを使用してJavaScriptで拡張子のチェックを行う方法を紹介します。Files APIについて概要が知りたい方は、前回解説した記事でイメージを掴むことができるので、読んでみてください。

Files APIに関する解説記事 : /different-blob-arraybuffer

(さらに…)

WEBアプリケーションでは、ファイルのアップロードやダウンロード、編集などのやりとりが盛んに行われています。開発に関わるエンジニアとしては、ファイルなどのデータを適切に扱うことができるかどうかでレベルが分かれるとも言われています。

今回はJavaScriptでファイルを扱う際に使用するFile APIについて解説します。

(さらに…)

前回XMLHttpRequestを用いた非同期処理について解説をしましたが、今回はFetch APIを使用した非同期処理について解説します。元々XMLHttpRequestが非同期通信の主格として存在感を発揮していましたが、その代替としてfetchが登場しました。

XMLHttpRequestの解説記事 : /javascript/ajax-request

fetchとXMLHttpRequestではどのような違いがあるのでしょうか？

(さらに…)

Ajaxは、JavaScriptでサーバー側と非同期通信を行うための技術です。非同期処理や同期処理については前回の記事で解説していますので、イメージが掴めていない方はまず前回の記事を読んで非同期処理について理解を深めてください。

/javascript/asynchronous-processing

筆者はシステム開発とWEB制作の両方に関わっていますが、WEB制作の場面でAjax通信を使用するケースはほとんどありません。非同期コールバック(setTimeout関数など)を用いてDOM操作を行うことはありますが、サーバーと通信して、取得したデータを加工する処理は基本的には開発で使用します。

jQueryなどのフレームワークを含めると、JavaScriptでAjax通信を行うための手段は複数用意されています。これから何回かに分けて、私が実際に使用しているメソッド(fetch, XMLHttpRequest, $.ajax)について解説したいと思います。

この章ではXMLHttpRequestについて解説します。

(さらに…)

非同期処理は快適なUI / UXを実現する上で重要な概念です。

例えば、ファイルアップロードなどのデータの取り扱いにおいて一定の待ち時間が発生する処理を同期処理で行った場合、ユーザーはそれが完了するまでローディングを眺めるしかありません。

1つの画像を読み込むのに数秒かかり、それが終わったら次の画像にまた数秒となれば、ユーザーはアプリケーションの利用にうんざりして離脱するでしょう。

ですが仮に、複数の画像やデータ読み込みを並行して行えるとどうでしょう？ユーザーの待ち時間は圧倒的に削減されます。非同期処理は、あらゆる処理を並行して行うための重要な概念です。

今回はその重要な概念である非同期処理と、ES2015より導入されたPromiseインスタンスという仕組みについて解説します。

(さらに…)

FormDataオブジェクトは、非同期処理(XMLHttprequest, fetch)を使用してデータを送信するために、keyとvalueのセット値を追加することができるインターフェイスです。

WEB開発で非同期処理を使用する場合に、ユーザーのアクションに応じて一部のデータのみ書き換え・更新を行いたいことは多々あります。FormDataを使用すると、DOMツリー内にForm要素を作成して形式的なステップを踏む必要がないため、一部のinput要素の値を取得して、$.ajax, XMLHttpRequest, fetchを使用してサーバーにデータを送信することができます。

FormDataで送信されるデータは、JSONなどと異なりマルチパートのフォームデータとして扱われるので、MIMEタイプの設定が必要なファイルデータの送信にも適しています。

これから数回に分けて、①FormDataの使い方、②データの送信、③ファイルの取り扱いについて解説していきます。

(さらに…)