• どのような勉強をしたのか
• どの書籍やサイトを参考にしたのか

を紹介していきます！

HTML5プロフェッショナル認定試験とは

HTML5プロフェッショナル認定とは、HTML5、CSS3、JavaScriptなど最新のマークアップに関する技術力と知識を、公平かつ厳正に、中立的な立場で認定する認定制度です。

https://html5exam.jp/outline/

簡単にいうと、フロントエンドに関する知識を問われる試験ということです。

ここで重要なのは、HTML5プロフェッショナル認定試験はHTMLの資格ではなく、HTMLに関連する技術を問う試験なのです！

なので、この資格を持っているということは、HTML5に関連する知識も持ち合わせているということの証明にもなるのです！！

レベル1とレベル2の違い

レベル1は、HTMLとCSSの文法からニッチなタグや擬似要素や擬似クラスについて問われます。
一部、canvasタグやvideoタグの問題でJavaScriptの知識が少しだけ必要になりますが、JavaScriptの文法などは問われません。
canvasタグでできることは？videoタグでできることは？といった問題です。

レベル2は、JavaScriptの文法からDOM操作やAPIについて問われます。
こちらもレベル1同様に知識を問われる問題も出題されるのですが、出題されるJavaScriptのコードを読んで、処理の結果がどうなるかを問う問題が多いです。

レベル1、レベル2という風に試験が分かれていますが、受験する順番はどちらが先でも構いません。
先にレベル2に合格したからといって、その合格が有効にならないということはありません。

レベル1

使用するサイト・書籍

Ping-tのプレミアムプラン 2400円(税込)
Ping-tはIT系の資格を目指す人の学習サイトです。
無料の問題も公開されていますが、HTML5プロフェッショナル認定試験レベル1は有料コンテンツになっています。

出題範囲

1. Webの基礎知識
   1. HTTP, HTTPSプロトコル（重要度：8）
   2. HTMLの書式（重要度：9）
   3. Web関連技術の概要（重要度：6）
2. CSS
   1. スタイルシートの基本（重要度：7）
   2. CSSデザイン（重要度：9）
   3. カスケード（優先順位）（重要度：2
3. 要素
   1. 要素と属性の意味（セマンティクス）（重要度：10）
   2. メディア要素（重要度：6）
   3. インタラクティブ要素（重要度：7）
4. レスポンシブWebデザイン
   1. マルチデバイス対応（重要度：7）
   2. メディアクエリ（重要度：5）
5. APIの基礎知識
   1. マルチメディア・グラフィックス系API概要（重要度：5）
   2. デバイスアクセス系API概要（重要度：4）
   3. オフライン・ストレージ系API概要（重要度：4）
   4. 通信系API概要（重要度：3）

勉強法

まずはPing-tのサイトにアクセスして会員登録を行ってください。

会員登録ができたらPing-tのプレミアムプランに申し込みます。
プレミアムプランに申し込んでから1ヶ月間問題集を利用できます。

学習順は、最初にAPIの基礎知識を学習してください。
それ以降の順はなんでも大丈夫です。
Ping-tの合格者の声を見ると、APIの基礎知識の学習時間が足りなかったやAPIの基礎知識をもう少し勉強しておけばよかったなどがあります。
点数を稼げる項目なので他のどこよりも徹底的に勉強してください。

Ping-tでは項目ごとに出題数を指定することができるのですが、
1週目は出題数を3問や5問などの少ない数に設定しておきましょう。
3~5問に設定する理由は、Ping-tで公開されている問題は過去問ではないため、問題をこなしたからといって合格できるわけではないからです。
回答し終わったら、解答の解説に書かれている内容は暗記するくらいの気持ちで熟読してください。
解説は他の問題を解くときに役立つ内容が書かれているので、これを繰り返すだけで十分合格ラインに立てます。

上記内容を意識してゆっくり学習したとしても1~1.5ヶ月で合格できます。

勉強する際にノートをとってもいいのですが、時間がかかるのであまり効率的ではないです。
無料で使える暗記カードアプリがあるので有効活用しましょう。

手軽に暗記 Ankilot

資格や英語の勉強で暗記するために単語カードや単語帳を作ったことありませんか？ 単語カードに長い文章を書くと文字が小さくなって後々読み返しづらくなってしまったり、単語帳に暗記したい用語をまとめると用語の順番シャッフルできなくてもどかしかったりという経験が少なからずあると思います。 Ankilotはこの悩みを解決してくれるだけでなく、PCとスマホの同期、読み上げ機能もあります

nabeshiblog.com

2021.09.15

レベル1については最後になりますが、参考書を買う必要はないです。
現在(2022/4/28)出版されているレベル1の書籍は2冊ありますが、どちらもPing-tのプレミアムプランより高いです。

学習期間が1ヶ月以上かつ書籍購入予算が3,000円くらいの場合はこちらで学習して見てもいいかもしれません。
個人的にはAPI系の問題が充実しているように感じました。

時間がある方は公式のサンプル問題にも取り組みましょう。
このサンプル問題は非常に難易度が高いです。
その割に実際に出題される問題は1問か2問くらいでコスパが悪いので本当に時間がある方だけ取り組むようにしてください。

レベル2の勉強法

使用するサイト・書籍

HTML5プロフェッショナル認定試験レベル2スピードマスター問題集 ¥3,740(税込)

JavaScript Primer

出題範囲

1. JavaScript
   1. JavaScript文法(重要度：10)
   2. ES6（ECMAScript2015）以降の新機能(重要度：8)
2. WebブラウザにおけるJavaScript API
   1. イベント(重要度：8)
   2. ドキュメントオブジェクト／DOM(重要度：6)
   3. ウィンドウオブジェクト(重要度：8)
   4. Selectors API(重要度：7)
   5. History API(重要度：7)
   6. テスト・デバッグ(重要度：6)
3. グラフィックス・アニメーション
   1. Canvas(2D)(重要度：8)
   2. SVG(重要度：2)
   3. Timing control for script-based animations(重要度：2)
4. マルチメディア
   1. メディア要素のAPI(重要度：5)
5. ストレージ
   1. Web Storage(重要度：7)
   2. Indexed Database API(重要度：5)
   3. File API(重要度：5)
   4. バイナリーデータ(重要度：4)
6. 通信
   1. Web Socket(重要度：5)
   2. XMLHttpRequest(重要度：5)
   3. Server-Sent Events(重要度：1)
7. デバイスアクセス
   1. Geolocation API(重要度：5)
   2. DeviceOrientation Event(重要度：1)
8. パフォーマンスとオフライン
   1. Web Wokers(重要度：5)
   2. High Resolution Time(重要度：2)
   3. オフラインアプリケーションAPI(重要度：3)
   4. Page Visibility(重要度：2)
   5. Navigation Timing(重要度：1)
9. セキュリティモデル
   1. クロスオリジン制約とCORS(重要度：4)
   2. セキュリティモデルとSSLの関係(重要度：4)

勉強法

問題集を使って学習を始める前に、まずは出題範囲を確認してください！
2021/4/1に出題範囲の改定があり、以下の項目が追加されました。

ES6（ECMAScript2015）以降の新機能(重要度：8)

この項目は問題集に含まれていないので注意です。

JavaScriptを勉強したことはあるけれど、まだそんなに使ったことがない方は一番最初から勉強していけばOKです。
それなりにJavaScriptを使っている方(Web制作レベルでOK)は5章から勉強するようにしましょう。

勉強法はレベル1同様に解説をしっかり理解することが一発合格への近道となります。
レベル2では「以下のコードを実行したときに正しいものを選べ」というような問題が出題されるため、手を動かして処理の流れを把握しておくことが大事です。
レベル1はどちらかというと暗記する項目が多かったですが、レベル2は処理の流れや処理結果がどのようなものになるのかを理解しておけば大丈夫です。

書籍の巻末に試験2回分の問題があるので必ず取り組んでください。
受験日から1週間前くらいに取り組むのがオススメです。

余裕がある方は公式のサンプル問題にも取り組んでみてください。

受験料を安くするには？

受験料はレベル1レベル2共に￥16,500(税込)です。

とても安い金額とはいえません。
そこで、少しでも受験料を安くする方法をお伝えします！

安く受験するにはPing-tで受験チケットを購入するだけです。
受験チケットの価格が¥ 15,400(税込)なので1,100円お得です！
こちらから購入できます！
1つのチケットで1つの試験に適用できます。
受験チケットを使用するには、試験申し込みの際にチケット番号を入力する箇所があるのでそこに必ず入力してください。

試験に合格すると。。。

試験合格から約2ヶ月後くらいに合格証明書が送付されます。

レベル1とレベル2の合格証明書を合わせると、HTML5のロゴが完成します。
なんだかバイオハザードの重要アイテム見たいですね笑

その他の戦利品です。

おわりに

今回はHTML5プロフェッショナル認定試験の勉強法について書きましたが、いかがでしたか？

Web制作の実績があまり多くなく、提案をしても返事が来る確率が低いという方は是非この資格をとってみてください！
資格を持っているということは実力の証明になるので、クライアントからの信頼も得やすくなります！

また、別の資格に合格できたら勉強法をまとめようと思っているので気長に待っていただけると幸いです。

それでは！

試験に合格するメリット

Web系のことを全く知らない人に対して営業することを想定すると持っておいて損はないと思います。
なんてったって【エキスパート】という名前がついているくらいですから、なんか凄そうくらいには思われそうです笑

後は有効期限がないということですね。
フロントエンドの知識は移り変わりが早いですが、この資格は１回合格すれば再受験の必要もなく、失効することもありません。

たった1日勉強するだけで合格するには？

ステップ1: 参考書を購入する

1日で合格するには必須です。
というのも、本の内容と試験の内容がほぼ一緒だからです！
効率よく学習するには欠かせませんね。

ステップ2: Dreamweaverをダウンロードする

Dreamweaverを知らない方に簡単に説明しておくと、HTMLやCSSのコードをツールだと思ってください。
PCに標準でインストールされているメモ帳でもHTMLとCSSは記述できるのですが、Dreamweaverを使用するとある程度予測変換が出てくれるのでHTMLやCSSが不安な方は特にダウンロードした方が良いです。
実際の試験でもDreamweaverが使えるので、試験前に操作に慣れておくことをお勧めします。

初めてダウンロードする方は1週間無料で使えます。
この期間内に解約してしまえば料金はかかりません。
Dreamweaverのダウンロードはこちら

ステップ3: 参考書を使って勉強する

勉強といっても基本的には参考書に倣ってコードを書いていくだけでOKです。
参考書内では「HTML4では〜」とか「XHTMLの書き方は〜」のようなことが書かれていますが、この試験はHTML5の試験なのでその辺りは無視して大丈夫です。
閉じタグがなくても動作するなどの説明もありますが、あえて閉じタグを書かない(空タグを除く)なんてことはないので、そこも無視でOKです。

参考書の9章でwebデザインの基礎知識を紹介しているのですが、そこは暗記してください。
ここも参考書に載っているものだけ問われるので暗記しておけば確実に点を稼げます。

9章まで勉強し終わったら、サンプル問題を解いていきましょう。
作成するサイトが少し変わるだけで実装する内容はほぼ同じです。
うまく実装できなかった箇所は回答を見て理解しておきましょう。

ここまでできたらあとは受験するだけです！

おわりに

いかがだったでしょうか？
1日で合格できて履歴書に書くこともできるのでかなりコスパの良い資格だと思います。
これからWeb制作をしていきたい方は是非挑戦してみてください！

遅延的束縛とは

PHP5.3.0から導入された遅延的束縛(Late Static Binding)は簡単にいうと、呼び出すまで実行結果がわからないというものです。

まずは実行前から結果が固定されているパターンから見ていきます。

<?php
class A
{
  public static function who()
  {
    echo __CLASS__;
  }
  public static function test()
  {
    self::who();
  }
}

class B extends A
{
  public static function who()
  {
    echo __CLASS__;
  }
}

A::test();
B::test();

このコードの10行目に記述されているselfは呼び出し元に関係なく、selfが記述されたクラス内の静的メソッドを呼び出します。
なので、Aを継承しているBからtestメソッドを呼び出しても必ずAクラス内のwho()メソッドが呼び出されてAという結果が出力されます。

次は遅延的束縛を利用したパターンです。

<?php
class A
{
  public static function who()
  {
    echo __CLASS__;
  }
  public static function test()
  {
    static::who();
  }
}

class B extends A
{
  public static function who()
  {
    echo __CLASS__;
  }
}

A::test();
B::test();

selfと記述されたいた箇所をstaticに変更しただけで他は同じです。
staticは呼び出し元クラスを参照するので、B::test()を呼び出した時のtestメソッド内の処理はB::who()と同じ意味となり、Bと出力します。

このように、呼び出してからstaticの参照先が決まるので遅延的束縛と呼ばれます。

遅延的束縛をもっと詳しく

冒頭で分かりやすくするためにざっくりと紹介しましたが、遅延的束縛を詳しく説明すると、非転送コール時に明示されたクラス名を保持する機能と言えます。

まずは非転送コールと転送コールの違いを理解しておきましょう。

非転送コール

X::foo()や$x->foo()といったクラス名やオブジェクトを明示的に指定した呼び出し

転送コール

self::, parent::, static::のこと

非転送コールと転送コールを使った例

<?php
class A
{
  public static function foo()
  {
    static::who();
  }

  public static function who()
  {
    echo __CLASS__ . "\n";
  }
}

class B extends A
{
  public static function test()
  {
    A::foo();
    parent::foo();
    self::foo();
  }

  public static function who()
  {
    echo __CLASS__ . "\n";
  }
}
class C extends B
{
  public static function who()
  {
    echo __CLASS__ . "\n";
  }
}

C::test();

Cクラスのtest()メソッドを呼び出すことで、

A::foo() 転送コール
parent::foo() 非転送コール
self::foo() 非転送コール

が実行されます。

C::test()は非転送コールでA::foo()も非転送コール。
Aクラス内のwho()メソッドのstaticは直近の非転送コールのクラス名を保持しているためAを指し、A::whoを呼び出すことになり、Aを出力する。

parent::foo()は転送コールなので直近の非転送コールのクラス名を保持します。
つまり、foo()メソッド内でC::who()が実行され、Cが出力される。

self::foo()も転送コールなので直近の非転送コールを保持し、foo()メソッド内でC::who()が呼び出されることになり、Cが出力される。

良かったポイント

キーストロークが深い！

個人的にこれを一番重要視している気がします笑

2015~2019年のMacBookはバタフライキーボードを採用していたんですが、そのころのモデルのキーボードを触ったことがある人は「なんじゃこのペチペチは！」と一度は思ったことがあるはず。
簡単にいうとキーストロークが非常に浅いです。
私はこのペチペチが嫌で2021年まで2013年モデルのMacBook Airを使っていました笑

バッテリー長持ち！

以前使用していたキーボードがApple Wireless KeyboardなだけあってMX Keys Miniのバッテリーの持ちの良さは段違いですね！
公式によるとバックライトオフだと最長で5ヶ月バッテリーが持つらしいです！
確かに開封初日に充電してからまだ一度も充電ケーブルを差していないです。
恐ろしいですね笑

角度がちょうどいい！

ノートPCにスタンド付けてる人はここ重要だと思います！
スタンドをつけているとキーボードの角度が上がって打ちやすいなと感じる人は絶対MX Keys Mini買った方がいいです！
Magic Keyboardもいいんですが角度が浅くてタイピングしづらいんですよね。。。
これって私だけですか？笑

ちょっと残念ポイント

MX Keys Miniはコンパクトで非常に使いやすいキーボードなんですが、個人的にすこーし残念なポイントがあります。。
もしかすると私と同じ価値観の人もいるかもしれないので参考にしてください！

ファンクションキー

ファンクションキーを多用される方は要注意です！
MacBook内蔵のキーボードと比較するとこんな感じです。

MacBook内蔵キーボード

MX Keys Mini

普段からファンクションキーを多用しないので不便に感じるほどではないですが、MX Keys Miniはディスプレイの明るさが変更できないです。。。
MacBookをモニターに繋いでディアルディスプレイにしている人はちょっと不便に感じるかもしれないです。

スクリーンショットと絵文字のキーが追加されましたがショートカットを知っているのでほぼ使うことはないです笑

スクリーンショットのショートカット
画面全体をキャプチャする場合は Command + Shift + 3、
キャブチャする範囲を指定したい場合は Command + Shift + 4

絵文字のショートカット
Command + Space + Control

コロナのせいでオンラインでミーティングする人はマイクをミュートするキーは便利かもしれません！
でも、何かの拍子にミュートのキーに手が当たってしまった時はミュートが解除されるので注意が必要です。。。

キートップのくぼみ

MX Keys Miniを使い始めたばかりの頃はこのくぼみのせいで、キートップが指先に引っかかる感じがしてタイピング速度が著しく落ちました。
後、なぜかタイプミスも増えてました。。。
個人的にはこのキートップのくぼみは無くてもいいのかなーって思ってます笑
ただ、これは慣れの問題で、一週間経った今では気にならなくなっているので購入するかどうかの判断基準にはならないと思います！
慣れが必要ということだけ覚えておいてください！

と、こんな感じでちょっと残念なポイントを書いてみましたが、この記事を書いている今では残念に思ってないです笑
むしろ使いやすいと思ってます！

購入方法

JIS配列

JIS配列のキーボードはロジクールのMX Keys Miniのページか、Amazon、楽天で購入できます！
Amazonの方が安いことがあるのでAmazonと楽天を比較してくださいね😁

US配列

US配列のキーボードは現状日本での取り扱いはないようです。。。
MX Keysシリーズの傾向から考えると日本ではJIS配列のみしか販売されいないと思います。

US配列のMX Keys Miniを購入するには個人輸入するしかないです😭
「個人輸入」と聞くとそれだけで購入を諦めてしまいそうですが、個人輸入は今や英語が読み書きできなくてもできるようになっているので是非お試しください！

【Shipito使い方徹底解説】初めての個人輸入でも安心

個人輸入ってハードル高いと思ってませんか？ 恐らくハードルが高いと感じる要因は英語（外国語）ができるかが大きく関わってきていると思います。 もし日本語で個人輸入ができたら簡単ですよね？ 今回は初めての人でも簡単に個人輸入できたサービスを紹介します！

nabeshiblog.com

2021.11.04

まとめ

MX Keys Miniを開封して直後に使用した時はちょっと残念なポイントがあるなーと思っていましたが、１週間使用してその残念なポイントは気にならなくなったので、総合的に非常に良いキーボードだと思います！

デスクを広く使いたい方、テンキーが不要な方、今使っているキーボードの打鍵音が気になる方は是非購入してみてください😁

今回は初めての人でも簡単に個人輸入できたサービスを紹介します！

Shipitoとは

簡単に言うと荷物を転送するサービスの会社です。

個人輸入が初めての人からすると「は？個人輸入なのに転送？」って感じですよね笑
個人輸入は２つパターンがあるので順番に図でざっくり説明します！

1つ目
商品を購入した店が荷物を発送しするパターン

2つ目
商品を購入した店が海外発送に対応していない場合はその国の住所を取得してその住所に発送してもらい、そこから自分の家に荷物を発送するパターン
Shipitoはまさにこれです！
Shipitoに登録（無料）するとアメリカの住所が自動で割り振られて、その住所に一旦荷物を送ってもらってそこから日本の自宅に向けて発送するという流れです

Shipito以外にも転送サービスはあるのですが、なぜShipitoを選んだのかを紹介します！

Shipitoを選んだ理由

かなり個人的な内容なんですが選んだ理由は以下の3つです！
日本語対応していることも選んだ理由にしたかったのですが、他の転送サービスでも日本語対応しているものがあるので省きました🙇‍♂️

1. 住所の取得が簡単
2. 月額費無料
3. デザインがシンプルで使いやすい

住所の取得が簡単

住所の取得がめちゃくちゃ簡単です！
Shipitoに登録すれば自動で住所の取得までやってくれるのはありがたいですね！

月額費無料

個人輸入が初めてだとどこにお金がかかるか不安な部分があるので月額費無料だと変に緊張しなくていいですよね笑

デザインがシンプルで使いやすい

どこに何があるかが非常にわかりやすくて非常使いやすいです！
初めての方は使いやすさも重要ですよね！

使い方

アカウントを作成する

これはめちゃくちゃ簡単ですね！
Shipitoのホームページにアクセスして無料登録ボタンを押してプランは「無料」を選択してください！

後は上から順に項目を埋めて「アカウントを作成」ボタンを押してアカウントを作成しましょう！
このとき紹介コードを入力すると初回購入時に自動で15%OFFが適用されるらしいので入力しましょう！
私が登録した時は他のサイトを見ずに進めていたせいで「紹介コードなんてものはない！」ということで飛ばしてしまいました。。。
紹介コードは「BFL500」です！

アカウントの作成が完了するとメールが届くはずなので、届いたメールを開いて認証を行います。

認証ができたらもう1通メールが届くはずです！
そのメール内にShipitoが自動で取得してくれた住所が書いてありますが、暗記したりこのメールを大事に保管しておく必要はありません！！
Shipitoにログインするといつでも住所は確認できるので大丈夫です😁

住所の確認方法は「マイ倉庫の住所」の上にマウスカーソルを乗せるだけで確認できます！

これでShipitoが荷物を受け取る準備は整いました！
後は購入した商品をこの住所に送るだけです！

住所を登録する

自動で取得した住所とは別に自宅の住所を登録が必要です。

まずは右上の「マイアカウント」をクリックしてメンバーシップページを表示します。

サイドメニューの「アドレス帳を変更する」をクリックしてアドレス帳ページを開いて下にスクロールすると「新しい住所を追加する」ボタンがあるのでクリックしてください。

この画面になったら住所を入力していくのですが、全てローマ字で入力してください！
ここは慣れてないと大変なのでこのサイトで一旦変換してもらったものを当てはめていくと簡単です👍

「この住所のニックネーム」は「MY ADDRESS」と入力しておいてください！

「社名」「納税者番号/ビジネスID」は必須の項目ではないので飛ばしてOKです！

「こちらを規定住所に指定する」をチェックしたら「保存する」ボタンをクリックして保存しましょう。

これで住所の登録は完了です！

クレジットカードを登録する

当たり前なんですが、Shipitoから自宅に荷物を発送するときに送料がかかります。
そのときに支払いをするクレジットカードが必要になるんですが、クレジットカードの登録にちょっとクセがあります。。。

サイドメニューの「保存済みの支払い方法」を選択して「保存済み支払方法」ページに移動します。

移動できたら「カードを追加する」ボタンをクリックしてカード情報を入力していきましょう！

カード情報を入力し終えて以下のような画面になればOKです！

ここからが少しクセがあります。。。

登録したカードの明細に$0.01~$5.00ドル引き落とし記載されるので、その引き落とされた金額を入力するのですが、明細に記録されるまでに最大で24時間かかるので少し待つ必要があります。。。

こんな感じで明細に記載されます！

明細に記載されたらその金額を入力して「引き落としを承認する」ボタンを押して承認完了です！

荷物が割り当てられた住所に届くまでにしておくことはこれで完了です！

荷物が届いたらすること

ここからはShipitoが自動で割り振った住所に荷物が届いてから行う作業になります！

荷物が届くとこんな感じで、「マイ荷物」>「倉庫の荷物」>「要対応」のバッジが0から1になります！
荷物の外観の写真も無料で載せてくれます！

有料にはなりますが「追加サービスを追加する」ボタンからオプションを追加することで荷物の外観だけでなく、中身をテーブルに広げた写真も掲載してくれるようになります！

この時点で注文したものじゃないことがわかると返品対応もしてくれるのでありがたいですね😁

荷物の確認ができたら次は「税関申告」です。

見るからに面倒臭そうですよね。。。

ですが、荷物の中身がどういったものなのかをチェック形式で選択するだけなので非常に簡単です！

税関申告書の作成が完了したら後は発送するだけです！

荷物を発送する

税関申告書の作成が完了した状態で「マイ荷物」>「倉庫の荷物」>「出荷準備完了」から「荷物を発送する」ボタンを押しましょう。

ボタンを押すと配送先住所が選択できます。
このとき必ず自宅の住所を選択しましょう！

次は配送方法を選択します。

ここはお好みで選択しましょう！
（写真撮り忘れました🙇‍♂️）

次のステップの追加サービスも簡単ですね！

高価な荷物の場合は緩衝材があるとないとでは大違いなのでケチらずにオプションを追加しておくことをお勧めします。

支払方法は既にクレジットカードを登録しているので選択するだけです！

これで発送の準備が整いました！
最後に「住所」だったり「オプション」の確認をしましょう！
間違って不要なオプションを追加している可能性があるのでしっかりと目を通してください！

問題なければ発送しましょう！

後は荷物が届くまでゆっくりと待ちましょう♪

届いた荷物はこんな感じでした！

外の箱が少しひしゃげていたので不安でしたが中身は全然問題なしでした！
緩衝材のオプションは必須ですね笑

まとめ

いかがでしたか？

個人輸入のハードルが高いと感じていた人からすると、「これだけでいいの？」という感じじゃないですか？笑

私のブログの解説がわかりづらいなーという方はShipitoが出している動画を参考に進めていくのもありですね！
もちろん日本語の動画もあります👍
動画はこちら

Shipito個人輸入が初めての人でも簡単に利用できるので、他の人にも勧めたくなるようなサービスでした！

PDFライブラリ

PHPでPDFを出力するライブラリはいくつかあります。
有名なところでいうと、FPDF、MBFPDF、TCPDFがあります。

これらのライブラリはネット上からダウンロードしてスクリプトにインクルードするだけで使用できる優れものです。
リンクを貼っておくのでダウンロードして使ってみてください。
FPDF、TCPDF
MBFPDFはもう配布されていないのかもしれません。。

FPDFとMBFPDFの使い方は同じだと思って構いません。
しかし、日本語のようなマルチバイトの文字をPDFに出力したい場合はMBFPDFを使用してください。

TCPDFはUTF-8での多言語出力に優れていて、PDFをHTMLのタグを使用して記述できます。

試験ではMBFPDFの使い方を問われるようなので、MBFPDFに焦点を当てて解説します。

基本操作

MBFPDFライブラリを使用するにはまず、mbfpdf.phpをインクルードする必要があります。
インクルードしてMBFPDFクラスをインスタンス化すればMBFPDFをすぐに使用できる状態になります。

require('./mbfpdf.php');

$pdf = new MBFPDF();

次に使用するフォントを登録します。
登録するにはAddMBFontメソッドを使用します。

AddMBFont(family, encode);

第一引数にはフォントを使用するフォントを指定します。
MBFPDFライブラリでは日本語用のフォントが用意されています。
以下、用意されているフォントです。
(KOZMIN、GOTHIC、PGOTHIC、UIGOTHIC、MINCHO、PMINCHO)

第二引数は文字コードを指定します。
指定できる文字コードはSJIS、EUC_JPのみです。
UTF-8は指定できません。

第三引数にフォント定義ファイルまでのパスを指定することでそのフォントをスクリプト内で使用することができます。
しかし、環境によって日本語が正しく表示されない場合もあるので注意が必要です。

複数フォントを使用したい場合は、その数だけAddMBFontメソッドを呼び出してください。

使用するフォントをGOTHIC、文字コードをSJISにした場合は以下のようになります。

require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddMBFont(GOTHIC, 'SJIS');

これでGOTHICを使用できるようになりました。

次は新規ページを追加するためにAddPageメソッドを使用します。
このメソッドは引数を取りません。

require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddMBFont(GOTHIC, 'SJIS');

$pdf->AddPage();

これで新規ページ（1ページ目）が追加されました。

PDFの出力の際に使用するフォントを設定するにはSetFontメソッドを使用します。

SetFont(font, style, size);

第一引数にはSetMBFontメソッドで登録したフォントを指定してください。

第二引数のstyleはB（bold: 太字）、I（italic: 斜体）、U（underline: 下線）のいずれかを指定します。

第三引数はフォントサイズを指定します。

require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddMBFont(GOTHIC, 'SJIS');

$pdf->AddPage();

$pdf->SetFont(GOTHIC, 'B', 20);

出力に使用するフォントが指定できました。

テキストを出力する方法はいくつかありますが、セルを使用する方法を紹介します。

Cellメソッドは指定した範囲の矩形の中にテキストを出力してくれます。
部分的に境界線をつけたり、そもそも境界線をつけないことも可能です。

Cell(width, height, text, border, ln, align);

第四引数のboderに0を渡すと境界線なし、1を渡すと境界線ありになります。
デフォルトは0です。
また、キーワードで指定することも可能です。
T（top: 上）、R（right: 右）、B（bottom: 下）、L（left: 左）
例えば、左と上だけに境界線を引きたい場合はborderに’LT’を渡してください。

第五引数は次のセルの位置をどうするのかを決めます。
lnに1を渡すと次のセルは右に配置されるのではなく次の行に移ります。
2を渡すと次のセルは下に配置されます。
デフォルトの0は次のセルが右に配置されます。

第六引数のalignはテキストの位置を決めます。
デフォルトはLでテキストが左端に表示されます。
Cを渡すとセルの中央にテキストが表示されます。
Rはテキストが右端に表示されます。

require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddMBFont(GOTHIC, 'SJIS');

$pdf->AddPage();

$pdf->SetFont(GOTHIC, 'B', 20);

$pdf->Cell(50, 20, 'Hello World') ;

幅50、高さ20の境界線のないセルにHello Worldというテキストを出力する準備ができました。

最後に出力する作業が必要です。
出力はOutputメソッドを呼び出すだけでOKです。

require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddMBFont(GOTHIC, 'SJIS');

$pdf->AddPage();

$pdf->SetFont(GOTHIC, 'B', 20);

$pdf->Cell(50, 20, 'Hello World') ;

$pdf->Output();

ブラウザ上にPDFが出力されていれば成功です。

Lnメソッドを使用すれば縦のセルの間隔を広げることができます。
また、このメソッドに引数を渡さず使用すると次のセルが改行して表示されます。

require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddMBFont(GOTHIC, 'SJIS');

$pdf->AddPage();

$pdf->SetFont(GOTHIC, 'B', 20);

$pdf->Cell(50, 20, 'Hello World') ;

$pdf->Ln(5.5);

$pdf->Cell(50, 20, 'Hello PDF');

$pdf->Output();

Hello WorldのセルとHello PDFのセルの縦の間隔は5.5ptになります。
このように空のセルを作ることなくセルの縦の間隔を広げることができました。

コンストラクタで設定できる値

MBFPDFのコンストラクタではPDFの用紙の方向、座標の単位、ページのサイズの3つを指定することができます。

$pdf = new MBFPDF(orientation, unit, size);

orientationは用紙の方向を指定します。
受け取る値はPかLだけです。
デフォルトはPで縦ですが、Lを渡すと横になります。

unitは座標の単位を指定します。
受け取る値はpt、in、mm、cmのいずれか一つです。
デフォルトはptになっています。

sizeはページのサイズを指定します。
受け取る値は、Letter、Legal、A5、A3、A4です。
デフォルトはLetterになっています。

A4の横向きのPDFを作成する場合は以下のようなコードになります。(単位はpt)

$pdf = new MBFPDF('L', 'pt', 'A4');

コンストラクタで指定した座標の単位がCellメソッドやLnメソッドの単位としても使用されます。

テキストの色を変更する

テキストの色を変更するにはSetTextColorメソッドを使用します。
このメソッドは必ず、Cellメソッドの前に呼び出してください。

$pdf->SetTextColor(red, green, blue);

引数にはそれぞれ0~255の値を渡します。
第一引数のみ値を渡した場合は、その値が第二引数と第三引数にも適用されます。

require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddMBFont(GOTHIC, 'SJIS');

$pdf->AddPage();

$pdf->SetFont(GOTHIC, 'B', 20);

$pdf->SetTextColor(255, 0, 0);
$pdf->Cell(50, 20, 'Hello World') ;
$pdf->Ln();

$pdf->SetTextColor(0);
$pdf->Cell(50, 20, 'Hello PDF');

$pdf->Output();

セル関連のメソッド

$pdf->SetDrawColor(red, green, blue);

セルの境界線の色を指定します。
第二引数、第三引数を省略すると第一引数の値がそれぞれ渡されます。

$pdf->SetFillColor(red, green, blue);

セルの背景色を指定します。
第二引数、第三引数を省略した場合の処理は同じです。

$pdf->SetLineWidth(width);

セルの境界線の太さを指定します。

ページ関連のメソッド

$pdf->PageNo();

現在のページ番号を返します。

$pdf->AliasNbPages()

このメソッドを実行するとnbという変数が定義され、その変数の中にそうページ数が代入される。

画像

MBFPDFライブラリで作成するPDF内に画像を挿入する場合はImageメソッドを使用します。

$pdf->Image(name, x, y, width, height);

表示したい画像の位置をxとyに、サイズをそれぞれwidthとheightに渡してください。
widthとheightを省略した場合、MBFPDFが最適な大きさで画像を表示してくれます。

リンク

MBFPDFは2種類のリンクを作成できます。
1つ目は同じドキュメント内のページを跨ぐ内部リンク、2つ目は外部リンクです。

内部リンクを作成するには起点と終点が必要です。
起点を指定するにはAddLinkメソッド、終点を指定するにはSetLinkメソッドを使用します。
AddLinkメソッドの返り値をImageメソッド、Cellメソッド、Writeメソッドのいずれかの引数に渡すことでクリックすることができる画像もしくはテキストを生成できます。
SetLinkメソッドの引数には同じようにAddLinkメソッドの返り値を渡します。
これで内部リンクの完成です。

Imageメソッド、Cellメソッド、Writeメソッドそれぞれを使用したリンクの生成方法を順に記述しておくので確認しておいてください。

// Imageメソッドを使用する場合
require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddPage();

$link = $pdf->AddLink();
$pdf->Image("php.png", 0, 0, 256, 135, "PNG", $link); 

$pdf->AddPage();

$pdf->SetLink($link);

// Cellメソッドを使用する場合
require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddPage();

$link = $pdf->AddLink();
$pdf->Cell(50, 10, 'ここ', 0, 0, 'L', false, $link);

$pdf->AddPage();

$pdf->SetLink($link);

// Writeメソッドを使用する場合
require('./mbfpdf.php');

$pdf = new MBFPDF();

$pdf->AddPage();

$link = $pdf->AddLink();
$pdf->Write(5, "ここ", $link);

$pdf->AddPage();

$pdf->SetLink($link);

外部リンクはAddLinkメソッドとSetLinkメソッドを使用する必要はなく、Imageメソッド、Cellメソッド、Writeメソッドにリンクを渡すだけ大丈夫です。

imagecolorallocate関数を複数回呼び出すと最初に呼び出されたimagecolorallocate関数で指定した色が画像の背景色になっていましたが、imagecreatetruecolor関数で作成した画像には適用されないので注意が必要です。
作成した画像にimagefilledrectangle関数で作成した矩形を重ねて描画すると今まで通りのような見え方になります。

アルファブレンディング

そもそもアルファとはなんなのかというところなんですが、これは透過率です。

アルファブレンディングは透過した時に重なった下の色と上の色を混ぜるかどうかというものです。
imagecreatetruecolor関数で作成した画像は初めからアルファブレンディングがオンになっている状態です。
もし、アルファブレンディングをオフにしたい場合は、imagealphablending関数を使用します。

imagealphablending(GDImage, flag);

imagecreatetruecolor関数で作成した画像にアルファブレンディングを適用しない書き方はこのようになります。

$image = imagecreatetruecolor(200, 200);
imagealphablending($image, false);

透過処理

PHPで色の透過の設定を行うにはimagecolorallocatealpha関数を使用します。

imagecolorallocatealpha(GDImage, red, green, blue, alpha)

基本的な使い方はimagecolorallocate関数と同じですが、alphaという引数に0~127の値を渡してください。
0は完全に不透明、127は完全に透明になります。

青色の四角の上にalpha50の赤色の楕円を乗せるとこのようになります。

$image = imagecreatetruecolor(200, 200);

$blue = imagecolorallocate($image, 0, 0, 255);
imagefilledrectangle($image, 0, 0, 200, 200, $blue);

$red = imagecolorallocatealpha($image, 255, 0, 0, 50);
imagefilledellipse($image, 100, 100, 200, 100, $red);

header("Content-Type: image/png");

imagepng($image);

透過した楕円部分が青と重なって色が混ざっていますね。
今度はアルファブレンディングをオフにして実行するとどのようになるか確認してみましょう。

$image = imagecreatetruecolor(200, 200);
imagealphablending($image, false);

$blue = imagecolorallocate($image, 0, 0, 255);
imagefilledrectangle($image, 0, 0, 200, 200, $blue);

$red = imagecolorallocatealpha($image, 255, 0, 0, 50);
imagefilledellipse($image, 100, 100, 200, 100, $red);

header("Content-Type: image/png");

imagepng($image);

アルファブレンディングをオフにしているので透過した部分が背景と混ざった色になっていないですね。
imagealphablending関数を使用するとこのような違いが出てくるので押さえておきましょう。

色を特定する

画像内の特定の点の色を調べるにはimagecolorat関数とimagecolorsforindex関数を使用します。

imagecolorat(GDImage, x, y);
imagecolorsforindex(GDImage, color);

imagecolorat関数で指定した座標の色のインデックスを取得し、その値をimagecolorsforindex関数に渡すことでred、green、blue、aplphaのそれぞれの値を連想配列で取得できます。

$image = imagecreatetruecolor(200, 200);

$blue = imagecolorallocate($image, 0, 0, 255);
imagefilledrectangle($image, 0, 0, 200, 200, $blue);

$point = imagecolorat($image, 100, 100);

print_r(imagecolorsforindex($image, $point));

blueのバリューが255になっていれば指定した座標の色を取得できています。

imagecopyresized関数

iamgecopyresized関数は指定した画像の矩形部分をコピーしサイズを変更することができます。
処理は高速ですがリサイズ後の画像の角がギザギザになります。

imagecopyresized($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_width, $dst_height, $src_width, $src_height);

この後解説するimagecopyresampled関数も引数に渡せる値は同じです。

$dst_imageはコピー先となるGDImageインスタンスを渡します。

$src_imageには拡大/縮小したいimagecreatefrompng関数などで読み込んだ画像のGDImageインスタンスを渡してください。
簡単にいうとコピー元です。

$dst_xと$dst_yはコピー先の座標、$src_xと$src_yはコピー元の座標を渡します。

$dst_widthと$dst_heighにはコピー先の画像の幅と高さ、$src_widthと$src_heightにはコピー元の画像の幅と高さを渡してください。

画像の幅を取得するにはimagesx関数、高さを取得するにはimagesy関数を使用します。
取得したいGDImageインスタンスを渡すとその幅や高さを取得できます。

$soruce = imagecreatefrompng('画像までのパス');
$width = imagesx($source);
$height = imagesy($source);
echo "width: {$width}, height: {$height}";

今回はSVGPORNでダウンロードしてきたPHPのロゴ画像を縮小していきます。

// 画像読み込み
$source = imagecreatefrompng('./php.png');

// 元画像のサイズを取得
$originalWidth = imagesx($source);
$originalHeight = imagesy($source);

// コピー後のサイズを算出
$destinationWidth = $originalWidth / 2;
$destinationHeight = $originalHeight / 2;

$destination = imagecreate($destinationWidth, $destinationHeight);

// 1/4サイズに縮小
imagecopyresized($destination, $source, 0, 0, 0, 0, $destinationWidth, $destinationHeight, $originalWidth, $originalHeight);

header("Content-Type: image/png");
imagepng($destination);

元のサイズが256×135だったので縮小して128×67.5になりました。

imagecopyresampled関数

imagecopyresampled関数はimagecopyresized関数に比べ処理は遅いですが、コピーした画像のピクセルを補間し滑らかにしてくれます。

// 画像読み込み
$source = imagecreatefrompng('./php.png');

// 元画像のサイズを取得
$originalWidth = imagesx($source);
$originalHeight = imagesy($source);

// コピー後のサイズを算出
$destinationWidth = $originalWidth / 2;
$destinationHeight = $originalHeight / 2;

$destination = imagecreate($destinationWidth, $destinationHeight);

// 1/4サイズに縮小
imagecopyresampled($destination, $source, 0, 0, 0, 0, $destinationWidth, $destinationHeight, $originalWidth, $originalHeight);

header("Content-Type: image/png");
imagepng($destination);

今回は画像を縮小しただけなので画像の滑らかさはほとんど分かりませんでした。

直線を描画する

imageline関数は直線を描画します。

imageline(GDImage, start_x, start_y, end_x, end_y, color);

作成した画像の左上を0として開始位置のx座標とy座標、終点位置のx座標とy座標を直線で結び、色をつけます。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

imageline($image, 50, 50, 150, 150, $red);

header("Content-Type: image/png");

imagepng($image);

imagedashedline関数を使用すると破線を描画します。
引数に渡せる値はimageline関数と同じです。
この関数は古いため線を装飾する場合は、imagesetstyle関数を使用した方が良いようです。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

imagedashedline($image, 50, 50, 150, 150, $red);

header("Content-Type: image/png");

imagepng($image);

矩形を描画する

矩形を描画するにはimagerectangle関数かimagefilledrectangle関数のどちらかを使用します。
引数に渡せる値は同じです。

imagerectangle(GDImage, top_left_x, top_left_y, bottom_right_x, bottom_right_y, color);
imagefilledrectangle(GDImage, top_left_x, top_left_y, bottom_right_x, bottom_right_y, color);

左上と右下に点を取り描画します。
まずはimagerectangle関数を見てみましょう。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

imagerectangle($image, 50, 50, 150, 150, $red);

header("Content-Type: image/png");

imagepng($image);

imagefilled関数はこの枠線を含む内側を塗りつぶします。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

imagefilledrectangle($image, 50, 50, 150, 150, $red);

header("Content-Type: image/png");

imagepng($image);

多角形を描画する

多角形を描画するにはimagepolygon関数かimagefilledpolygon関数のどちらかを使用します。
引数に渡せる値は同じです。

imagepolygon(GDImage, points, number, color);
imagefilledpolygon(GDImage, points, number, color);

pointsにはx座標とy座標の配列を渡します。
例えば、(50, 50)、(50, 150)、(150,150)この3点の座標をpointsに渡すには以下のように配列にして渡す必要があります。

[50, 50, 50,150, 150, 150];

numberは描画する多角形の頂点の数を指定します。
３以上の値を指定する必要があります。
numberにはpointsの要素数を2で割った数を渡すようにしましょう。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

$points = [50, 50, 50, 150, 150, 150];
imagepolygon($image, $points, count($points) / 2, $red);

header("Content-Type: image/png");

imagepng($image);

imagefilledpolygon関数を使用するとこのようになります。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

$points = [50, 50, 50, 150, 150, 150];
imagefilledpolygon($image, $points, count($points) / 2, $red);

header("Content-Type: image/png");

imagepng($image);

弧（円）を描画する

弧（円）を描画するにはimagearc関数かimagefilledarc関数を使用します。
引数に渡せる値はstyleを除いて同じです。

imagearc(GDImage, center_x, center_y, width, height, start_deg, end_deg, color);
imagefilledarc(GDImage, center_x, center_y, width, height, start_deg, end_deg, color, style);

引数に渡す値は円の中心の座標、幅、高さ、弧の開始位置と終了位置です。
start_degに0を渡すと3時の方向から時計回りにend_degまでの弧を描画します。

imagearc関数で弧を描画するとこのようになります。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

imagearc($image, 100, 100, 200, 200, 0, 90, $red);

header("Content-Type: image/png");

imagepng($image);

imagefilledarc関数は引数の最後に描画するstyleを渡します。
styleにはIMG_ARC_PIE、IMG_ARC_CHORD、IMG_ARC_NOFILL、IMG_ARC_EDGEDのいずれかの値を渡します。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

imagefilledarc($image, 100, 100, 200, 200, 0, 90, $red, IMG_ARC_PIE);

header("Content-Type: image/png");

imagepng($image);

楕円を描画する

楕円を描画するにはimageellipse関数かimagefilledellipse関数を使用します。
引数に渡せる値は同じです。

iamgeellipse(GDImage, center_x, center_y, width, height, color);
imagefilledellipse(GDImage, center_x, center_y, width, height, color);

center_xとcenter_yには中心の座標、widthとheightにはそれぞれ幅と高さを渡してください。

imagearc関数でも楕円を描画することができますが、コードを見直した時の観点から考えると描画する図形に合わせた関数を使用するのが望ましいです。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

imageellipse($image, 100, 100, 200, 100, $red);

header("Content-Type: image/png");

imagepng($image);

imagefilledellipse関数を使用するとこのようになります。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);

imagefilledellipse($image, 100, 100, 200, 100, $red);

header("Content-Type: image/png");

imagepng($image);

画像の回転

画像を回転させるにはimagerotate関数を使用します。
この関数は描画した図形だけを回転させるのではなく、画像そのものを回転させます。

imagerotate($GDImage, deg, color);

degに回転させる角度を渡します。

PHPで画像を作成すると、アートボードの上にimagecreate関数指定したサイズの画像が重なっているようなイメージになります。
例えば、imagecreate関数で幅200、縦200の画像を作成するとアートボードのサイズも幅200、縦200のようになるようです。
画像を常に覆えるようにアートボードのサイズが変動してくれるみたいです。
画像を回転させるとアートボードと画像の重なり合って内部部分が生じます。
この時の色を第三引数のcolorに渡します。

この関数の返り値を画像出力関数（imagepng関数など）に渡さないとWeb上の画像は回転していないので注意が必要です。

imagerotate関数で画像を回転させるとこのようになります。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocate($image, 255, 0, 0);
$blue = imagecolorallocate($image, 0, 0, 255);

imagefilledrectangle($image, 50, 50, 150, 150, $red);

$rotate = imagerotate($image, 45, $blue, true);

header("Content-Type: image/png");

imagepng($rotate);

テキストを描画する

テキストを描画するにはimagestring関数かimagettftext関数のいずれかを使用します。

imagestring関数

imagestring(GDImage, font_id, x, y, text, color);

GDImageはimagecreate関数などの返り値を渡してください。

font_idには1〜5の数値を指定します。
数値が5に近づくほど描画するフォントサイズが大きくなります。
imageloadfont関数でユーザー定義のビットマップを読み込んで独自のfont_idを使えるようにする方法もあります。
バイナリ形式のデータなので読み込むコンピュータに依存してしまいます。

imagecreate関数などで作成した画像の左上を0として、文字を表示する位置をxとyに渡します。

textには表示する文字を渡します。
マルチバイトには対応していないので日本語を渡すと文字化けします。

colorはimagecolorallocate関数の返り値を渡します。
2回目以降のimagecolorallocate関数の呼び出しは変数に代入しておくと使いやすいです。

白色の画像の中に黒色のDEMOという文字を表示して出力してみます。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);

$textColor = imagecolorallocate($image, 0, 0, 0);

imagestring($image, 5, 50, 50, "DEMO", $textColor);

header("Content-Type: image/png");

imagepng($image);

このようになっていれば正解です。

imagettftext関数

imagettftext(GDImage, size, angle, x, y, color, path, text);

imagettftext関数はimagestring関数より細かい設定が可能です。
imagestring関数ではフォントサイズを1〜5で設定していましたが、imagettftext関数はピクセルで指定できます。
他にも表示する文字の角度を変えたり、使用するフォントを選べます。
日本語に対応しているフォントであれば日本語を表示することも可能です。
imagettftext関数はデフォルトでアンチエイリアス処理が施されているのが特徴的です。

スクリプトと同じディレクトリにあるDIN Bold.otfのフォントでテキストを縦に表示しようとすると以下のようなコードになります。

$image = imagecreate(200, 200);

imagecolorallocate($image, 255, 255, 255);

$textColor = imagecolorallocate($image, 0, 0, 0);

imagettftext($image, 20, 270, 50, 50, $textColor, "./DIN Bold.otf", "DEMO");

header("Content-Type: image/png");

imagepng($image);

imagettftext関数を使用するとWebフォントを使用できるのが強いですね。
このようになっていれば正常に動作しています。

テキストの大きさを取得する

フォントサイズではなく、テキストを表示する領域の大きさを取得するにはimagettfbbox関数を使用します。

imagettfbbox($size, $angle, $font, $text);

テキストの表示領域を計算するには、

• 右下のX座標から左下のX座標を引いた絶対値
• 右上のY座標から右下のY座標を引いた絶対値

で求められます。

まとめ

• 画像にテキストを描画する方法としてimagestring関数とimagettftext関数がある
• imagestring関数は1〜5の間でフォントサイズを決定する
  imageloadfont関数でユーザー定義のフォントを読み込むことができるが、マシン依存してしまう
• imagettftext関数はフォントサイズをピクセルで指定できる
  また、表示するテキストの角度を変えたり、サーバーにあるフォントを読み込んでテキストのフォントを変更することができる
• テキストの表示領域サイズを求めるにはimagettfbox関数を使用する