コーディング環境

Web制作(コーディング)に必要なソフトウェアのご紹介。


エディター(無料のモノのみご紹介)


コーディングはパソコンに付属のエディタ…
・メモ帳(Windows)
・テキストエディット(MacOS)
でも作成・編集することができますが、下記のエディターやWeb作成ソフトを利用した方が作業効率が良いです。


Windows / MacOS 共通

●Atomhttps://atom.io/
プラグイン(パッケージ)を追加することで、FTP(ファイル転送)機能を利用することも可能。
《参考サイト:AtomからFTP接続する

●Visual Studio Codehttps://code.visualstudio.com/Download
プラグイン(拡張機能)を追加することで、FTP(ファイル転送)機能を利用することも可能。
《参考サイト:簡単!VS CodeでFTPアップ


上記2種類はデフォルトで英語表示のため、日本語環境で利用したい場合は、日本語化(プラグインの追加)か必要。
《参考サイト:Atomエディタのインストールと日本語化…
《参考サイト:Visual Studio Codeを日本語化する
個人的な感想としては「Visual Studio Code」のほうが日本語化が容易だと思います。

現在の「Visual Studio Code」では、インストールして最初に起動した際、日本語化を促すリンクボタンが表示されます。
そちらをクリックして進み、指示に従って再起動すれば、次回起動時から日本語表示になります。

(2022.03 MacOS版のみで確認)


Windows版

●TeraPadhttps://tera-net.com/library/tpad.html
FTP 無し。必要な場合は下記「FTPソフト」と併用します。


MacOS版

●mihttps://www.mimikaki.net/
FTPの一部機能(リモートファイルの操作・編集)は有り。


画像編集ソフト(有料のモノのみご紹介)


●Adobe Photoshophttps://www.adobe.com/jp/products/photoshop.html

主に写真(ビットマップ画像)を加工すためのソフトウェア。

●Adobe Illustratorhttps://www.adobe.com/jp/products/illustrator.html

パス描画でのベクター画像(ロゴ・アイコン・SVG画像など)の作成に使用。
Webのデザインカンプ(デザイン見本)・バナー広告の作成にも利用されます。

●Adobe XD[プロトタイプ作成](https://www.adobe.com/jp/products/xd.html

Webのプロトタイプ(試作品)作成に使用。
プロトタイプとは…デザイン見本としてだけでなく、リンク移動やクリック時の動きなどサイトの動作も確認させることができる試作品のこと。


上記の3種類は全てAdobe社の「Creative Cloud コンプリートプラン」に含まれます。
3種を単体で契約するよりも同プランのほうがお得です。

学生・教職員の方は、z教育機関向けの安価なプランを利用することも可能。
一般の方でも学習機関に通われている場合、学割プランを利用できるスクールもあります。
詳しくは各スクールの事務局にお問い合わせください。


FTPソフト(ファイル転送/無料のモノのみご紹介)


●FileZilla(https://filezilla-project.org/

●FFFTP(https://forest.watch.impress.co.jp/library/software/ffftp/


Web作成ソフト(有料のモノのみご紹介)


●Adobe Dreamweaverhttps://www.adobe.com/jp/products/dreamweaver.html

上述のエディタやFTPの機能が予め準備されており、プラグイン等の追加はほぼ必要ありません。
また、Git/GitHub との連携や SASS(SCSS)/ LESS の自動コンパイルなど、中級・上級者向けの機能も予め備わっています。
有料にはなりますが、Adobe社の「Creative Cloud コンプリートプラン」に含まれるため、同社の Illustrator・Photoshop や XD 等を利用するために同プランを契約されているなら、こちらの利用もオススメします。

PHP 参考サイト

PHP 参考サイト

いつも拝見させてもらっている PHP 参考サイト集です。

主に「PHPマニュアル」を参考にしていますが、たまにしか使わなくて忘れてしまう関数やクラスなどを取り上げたサイトのリンク先もブックマーク代わりにメモしてます。
良かったら参考にどうぞ!

全般

●PHP マニュアル:https://www.php.net/manual/ja/

オブジェクト


PHPプログラムのサンプルはこちらから。

paiza.ioを試用。。。

ちょっと時間があったので、CODEPEN のように簡単にコードを書いてブログなど貼り付けられる、PHP等のプログラミングにも対応したフロントエンド開発環境サイトを探していくつか発見。

printf()やsprintf()と指示子

プログラミングで何かを出力するには、
print()関数や(PHPでは)echoを使ったりするけれど、
printf()やsprintf() を使うこともよくあって、これがまた便利。
しかし、その扱い方をよく忘れてしまうのでメモっときます。

printf() : フォーマット済みの文字列を出力する関数
sprintf() : フォーマットされた文字列に値を返す関数

【参考サイト】
●printf() 
 http://php.net/manual/ja/function.printf.php
●sprintf()
 http://php.net/manual/ja/function.sprintf.php

この printf関数や sprintf関数を説明するときに、まず耳にするのが
「フォーマット済み(フォーマットされた)の文字列って何?」という質問。

まずはこの「フォーマット・・・」ってヤツから。
例えば、問い合わせフォームを利用すると、自動で問い合わせ内容の確認メールが届くことがよくありますよね。

(例)●●様 いつも▲▲をご利用いただき有難うございます。

これは予め決まった返信文を用意しておいて、その文中の特定位置(●●や▲▲のとこ)に自動で文字を差込んで送るプログラムになってます。
このような特定の位置に自動で文字を差し込むようになっている文書のことを「フォーマットされた文字列」と言います。

上記(例)のように、特定の位置へ文字を差し込む場合は、

(PHP記述例)
 $format = “%s様 いつも%sをご利用いただき有難うございます。”;

という風に「フォーマットされた文字列」を用意します。
この時、差込位置を指定している「%s」をディレクティブ(指示子)と言い、PHPでは指示子の始めに必ず「%」をつけて、差込む値の型式によって「d」とか「s」とかを指定します。

※指示子の種類は下記の表を参照

%d 10進数(数値)
%u 符号無し10進数
%o 符号無し8進数
%x 符号無し16進数
%X 符号無し16進数(大文字表記)
%e 指数形式の浮動小数点
%E %eと同じ(大文字表記)
%f 固定小数点形式の浮動小数点
%g %eまたは%fと同じ
%G %eまたは%fと同じ(大文字表記)
%b 符号無し2進数
%c 指定した文字コードに対応した文字
%s 文字列
%p 値のポインタ
%n 文字数を指定した変数に格納
%% %の文字そのもの、「\(エスケープシーケンス)」と同じ扱い)

そして、出力指定でprintf()やsprintf()を使う。

(printfを使ったPHP記述例)
 printf($format, “鈴木”, “仮想ショップ”);

(sprintfを使ったPHP記述例)
 echo sprintf($format, “鈴木”, “仮想ショップ”);

(実行結果)
 鈴木様 いつも仮想ショップをご利用いただき有難うございます。

上記例の出力結果はどちらも同じ。

printf()だとそのまま出力されるけど、
sprintf()では差込みしか行われないので、出力するにはechoなどの出力指定を付け加える。
sprintf()はデータベース等への書き出しを行う場合に使うのが基本なので、出力するならprintf()を使うのが一般的。

$format = "%s様 いつも%sをご利用いただき有難うございます。";
printf($format, "鈴木", "仮想ショップ");

実行サンプルはこちら

私の中では、いつまで経っても憶えられない関数の代表格ですね・・・これが。

Google Feeds API 廃止

2016年12月よりGoogle Feeds APIは完全に廃止となったようです。
いろんなサイトでjQuery等を使った代替策が掲載されていますが、他サイト(クロスドメイン)のRSSを読み込むにはPHPと連携させる必要があるようなので、PHPのみで処理したほうが簡単そうですね。

PHPでのフィード読込はこちらの参考サイト等をどうぞ。

RSSフィードの表示

ブログなどのRSSフィードをPHPページへ読み込むコードです。

RSS2.0の場合

<ul>
<?php
$feeds_url = 'http://demo.s1jp.com/notes/?feed=rss2';
$rss = simplexml_load_file($feeds_url);
foreach($rss->channel->item as $item){
	$title = $item->title;
	$date = date("Y年 n月 j日", strtotime($item->pubDate));
	$link = $item->link;
	$description = mb_strimwidth (strip_tags($item->description), 0 , 110, "…Read More", "utf-8");
?>
<li><a href="<?=$link?>" target="_blank">
<span class="date"><?=$date?></span>
<span class="title"><?=$title?></span>
<span class="text"><?=$description?></span>
</a></li>
<?php } ?>
</ul>

3行目のURLを、表示したいフィードのURLにします。

RSS1.0の場合

上記コード例の7行目を以下のように書き換えます。

$date = date('Y年 m月 d日', strtotime($item->children("http://purl.org/dc/elements/1.1/")->date));

ファイルの準備と基本の書き方

ファイル拡張子は『.php』
<?PHP〜?>(PHPタグ)の中に記述

PHPのソースを記述して実行するためにはファイルの拡張子が『.php』でなければ動きません。

HTMLページ(.html)を作成して、後から拡張子を『.php』に変えても大丈夫。


PHPタグで記述

PHPのソースコードは、まず<?PHP 〜 ?>タグを書いてその中に。

<?php // ここはコメントです(1行コメント) print("Hello World !"); /* ここもコメントです(複数行コメント) 複数行のコメントを書きたい場合は/* 〜 */で挟みます */ ?>
Code language: PHP (php)

各命令文(ステートメント)の最後に『;(セミコロン)』を付ける。
これを忘れるとエラーになります。(上例4行目)

行頭に『//』を付けてコメントを書くこともできます。コメント文はPHP実行時に無視されます。(上例3行目)

文章の最初と最後に『/* */』を付けて挟めば、複数行のコメントを書くことができます。(上例5〜6行目)

ファイル内容がすべてPHPコードの場合は、最後の終了タグ『?>』は省略可。

実行結果

Hello World!


HTMLタグの前(外)にも記述できます。

<?php $msg = "Hello World !"; ?> <html> <head> <meta charset="UTF-8"> ・・・ </head> <body> <p> <?php echo $msg; ?> </p> </body> </html>
Code language: HTML, XML (xml)