WordPress
【WordPress】プラグインなしでパンくずリストを自作する方法
パンくずリストは内部SEOに有効とされています。
また、ユーザーにとってもパンくずリストは有効です。記事コンテンツなどを発信しているサイトでは、基本的にユーザーは下層ページのコンテンツからサイトに流入します。その際に、今自分がサイトのどこにいるのかを把握しやすくなりますし、カテゴリーからその他のコンテンツに誘導できるので回遊性を上げることもできます。
WordPressでは多くのテーマでパンくずリストが用意されていますが、今回は私が自作したソースとその仕組みを解説します。
(さらに…)WordPress
【WordPress】投稿と同じカテゴリーの記事を表示する方法
ブログを運営する場合、回遊性を向上させるために記事内にその他の記事を掲載するのはブログ運営の基本です。今回は投稿ページテンプレート(single.php)をカスタマイズして、表示されている記事と同じカテゴリーに属する記事のリンクを表示させる方法について解説します。
JavaScript
【JavaScript】slickで複数行スライドさせる方法
slickはsliderレイアウトを構築する際によく使用するレイアウトですが、複数行の実装は初めてだったので、使用したオプションを忘備録として残します。
サンプルコードはそのままコピペで動作しますが、レイアウトは各々調整してください。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
JavaScript
【JavaScript】画像URLからバイナリデータを取得してサーバーに送信する方法
このブログでは、画像アップロード機能をいくつか紹介していますが、今回は画像URLからデータを取得して、サーバーサイドに送信する方法について解説します。
オブジェクト変換などの新しい知識を得ることができたので、忘備録として残します。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
PHP
【PHP】FTPサーバーに接続してファイルをアップロードする
システムは多くのファイルを扱います。画像をはじめ、PDF・Word・Excel・csvなどの様々なファイルを取り扱います。サーバーサイドはデータベースとのやりとりだけではなく、同時にこれらのファイルをサーバーにアップロードする処理を実装します。
今回は画像データをFTPサーバーにアップロードする方法を解説します。
WEBセキュリティ
【Linux】SSH接続とパーミッションについて解説
SSH接続を使用することで、サーバー上のファイル操作(編集・コピー・削除・圧縮など)をコマンドから実行できるようになります。SSH接続では、ネットワーク上の通信が全て暗号化されるため、操作を安全に行うことができます。
今回はエックスサーバーの公開鍵を想定して、SSH接続の手順・実行コマンド・パーミッションについて解説します。
(さらに…)WEBセキュリティ
FTP・SFTPの仕組みとSSHについて解説
WEBサイトを公開するためには、ローカルにある画像やファイルをWEBサーバーに転送しなければいけません。ファイルをサーバーに転送する際にはFTPソフトを使用してFTPサーバーに接続します。
日常的に使用しているFTPの役割や、SSHの仕組みを整理しました。
(さらに…)JavaScript
【JavaScript】ブラウザ埋め込み型のACEエディタを導入
WEBサイトやCMSの構築に関わっていると、クライアントから管理画面に編集用のエディタを埋め込んで欲しいという依頼をいただくことがあります。
非エンジニアの立場からすると、いくらシンプルなHTMLでも触りたくないのは当然です。またWEBサイトを公開した際に、ファイルはサーバー上にあるので更新する際はサーバーのファイルバックアップ・編集・アップロードと手間のかかる作業が多いです。
ページの編集をCMSの管理画面から行い、保存ボタンを押すだけで公開しているサイトの内容が変更できれば便利ですよね。
今回は、CMSの管理画面にレイアウト編集用のエディタを導入する想定で、JavaScript製エディタ「ACE」の導入方法と使い方について解説します。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
(さらに…)JavaScript
【JavaScript】ドラッグ&ドロップでの画像アップロード機能(非同期処理)
JavaScriptとPHPを使用したファイルのアップロード機能を作成したので、処理内容を解説します。
処理はDrag & Drop API、Fetch API、Files APIを使用して実装し、非同期処理でサーバーサイドにデータを送信するまでの記述になります。
私が作成しているCMSでは3つの画像のアップロード処理を実装していますが、
・通常のファイル選択からのアップロード
・画像URLからイメージを取得してアップロード
・ドラッグ&ドロップで画像をアップロード
今回はドラッグ&ドロップで画像をアップロードする処理のみ解説します。(サーバーサイドの処理は別記事で解説します。)
これまでの記事で解説してきたAPIを実践的に使用していますので、復習を兼ねて細かくソースコードを追ってみてください。
(さらに…)JavaScript
【JavaScript】Fetch APIを使用してFormDataを送信する方法
この記事ではFormDataオブジェクトとfetch()を使用して、サーバーにデータを保存するまでの処理を学ぶことができます。今回はCakePHP(サーバーサイド)のコントローラーの処理も記載していますので、データの取得・送信・保存・レスポンス処理までの一連の流れを解説します。
非同期処理とfetch()については下記の記事で解説しているので、合わせて理解を深めてください。
■ 非同期処理(Promise)について : /javascript/asynchronous-processing
■ Fetch APIについて : /javascript/ajax-fetch
FormDataについて理解がまだの方は、FormDataの概要と作成方法について解説しているので、まずは下記の記事でイメージをつけてから本記事を読んでください。
■ FormDataの概要と、データの作成方法 : /javascript/formdata-create
(さらに…)JavaScript
【JavaScript】Files APIを使用して拡張子チェックする方法
ファイルアップロード機能を実装するためのソースコードはネット上に多く出回っているので、実装するのはそれほど難しいことではありません。
機能を作る時に重要になるのが、不適切な形式のファイルはアップロードできないことです。拡張子チェックなどの処理が実装されていない状態で、悪意のあるユーザーが不適切なファイルをアップロードしてくる可能は大いに考えられます。
本記事では、Files APIを使用してJavaScriptで拡張子のチェックを行う方法を紹介します。Files APIについて概要が知りたい方は、前回解説した記事でイメージを掴むことができるので、読んでみてください。
Files APIに関する解説記事 : /different-blob-arraybuffer
(さらに…)JavaScript
【JavaScript】File APIについて解説
WEBアプリケーションでは、ファイルのアップロードやダウンロード、編集などのやりとりが盛んに行われています。開発に関わるエンジニアとしては、ファイルなどのデータを適切に扱うことができるかどうかでレベルが分かれるとも言われています。
今回はJavaScriptでファイルを扱う際に使用するFile APIについて解説します。
(さらに…)JavaScript
【JavaScript】非同期処理の種類と解説② fetch編
前回XMLHttpRequestを用いた非同期処理について解説をしましたが、今回はFetch APIを使用した非同期処理について解説します。元々XMLHttpRequestが非同期通信の主格として存在感を発揮していましたが、その代替としてfetchが登場しました。
XMLHttpRequestの解説記事 : /javascript/ajax-request
fetchとXMLHttpRequestではどのような違いがあるのでしょうか?
(さらに…)JavaScript
【JavaScript】非同期処理の種類と解説① XMLHttpRequest編
Ajaxは、JavaScriptでサーバー側と非同期通信を行うための技術です。非同期処理や同期処理については前回の記事で解説していますので、イメージが掴めていない方はまず前回の記事を読んで非同期処理について理解を深めてください。
/javascript/asynchronous-processing
筆者はシステム開発とWEB制作の両方に関わっていますが、WEB制作の場面でAjax通信を使用するケースはほとんどありません。非同期コールバック(setTimeout関数など)を用いてDOM操作を行うことはありますが、サーバーと通信して、取得したデータを加工する処理は基本的には開発で使用します。
jQueryなどのフレームワークを含めると、JavaScriptでAjax通信を行うための手段は複数用意されています。これから何回かに分けて、私が実際に使用しているメソッド(fetch, XMLHttpRequest, $.ajax)について解説したいと思います。
この章ではXMLHttpRequestについて解説します。
(さらに…)