卒研メモ: UTF-8Nで保存!

 古いエディタ(TeraPadなど)を使っていると,文字コードをUTF-8にして保存したPHPスクリプトやHTML, CSS, JavaScriptでトラブルが起きるケースに頻繁に出会います。つい先日アップしたFullCalendarのPHPスクリプトでもこの現象に出会いました。

 こちらのblog記事「文字コードはUTF-8? UTF-8N?」に,トラブルの原因となるBOMについての詳細が解説されていますので参照して下さい。

 ということで,TeraPadを使ってWeb開発を行う際には必ず「UTF-8N」で保存して下さい。

 ・・・つーか,開発したいならTeraPadではなく,「UTF-8N」などというセーブ方法のない秀丸AtomVisual Studio Code, Sublime Text, Eclipse等のプログラム開発に向いたエディタの最新版を使って下さい。これらのエディタには元々「UTF-8N」などという選択肢もないので,安心して「UTF-8」で保存できます。

卒研メモ: FullCalendar利用方法

 卒研でjQueryファミリーのJavaScriptライブラリであるFullCalendarを利用するテーマがありましたので,勉強がてら触ってみました。かなり粗削りですし,一応動いてスケジュールの追加・削除・保存もできるという最小限の機能しかありませんが,日本語のまとまった情報が見つかりませんでしたので,ここでまとめて公開しておきます。例によって無保証ですので,以下の記述は自己責任でお使い下さい。

 準備として,FullCalendar ver. 3.4.0をダウンロードして解凍し,カレントディレクトリ(./)を起点として,必要なJavaScriptファイル(moment.min.js, jquery.min.js, fullcalendar.js, locale-all.js)を./jsディレクトリに,CSSファイル(fullcalendar.css)を./cssディレクトリに,PHPスクリプト(utils.php)を./phpディレクトリにコピーしておいて下さい。

 次に,データベース”schedule”にテーブル”contents”を作り,5つのフィールド”id”, “start”, “end”, “title”, “memo”を保存できるようにします。

 カレントディレクトリに”index.php”を作り(まだPHPスクリプトは組み込まれていませんが,今後これにログイン機能などを作り込んでいきます),ここにFullCalendarを表示して操作できるようにします。完成版のindex.phpは下記の通りです。デフォルトは月表示(‘month’)です。

 完成版の画面(Chrome使用時)は下記のようになります。デバッグ用に右側にConsoleが開いてあります。JavaScriptの変数の中身を見たい時には重宝します。

 画面上部右の「月」「週」「日」ボタンで表示(view)が切り替わります。例として週間表示と一日表示の例を挙げておきます。

  • 週間表示
  • 一日表示

 基本的な使用方法は下記のようになります。

  • 新規イベントの追加(日付をクリック)・既存イベントの更新(イベントをクリック)時には,下記のように画面下部に編集ウィンドウが開きますので,ここで追加・編集を行って下さい。
  • イベントの消去は画面下部左の「ゴミ箱」までイベントをドラッグし,ドロップして下さい。確認画面が出て,「OK」ボタンを押すと即座に消去されます(ホントに消しちゃう不親切仕様)。
  • イベントを全て保存したい時には画面下部の「データ登録!」ボタンをクリックして下さい。これで編集後のイベントが保存されます。但し,保存されるのは画面に表示されている範囲のイベントのみです。未保存かどうかのチェックはまだ行っていません(これも不親切仕様)。

 MySQLデータベースとのやり取りはPHPスクリプトを介して行います。直接呼び出して使用しているのは下記の3つです。

  • read.php ・・・データベースから保存されているイベントを読み込む。
  • update.php・・・編集・新規追加したイベントを全部データベースに保存。
  • delete.php・・・ゴミ箱に捨てられたイベントをデータベースから消去。

 この3つのPHPスクリプトは,FullCalendarが用意しているutils.php(Eventクラス,isWithinDayRange関数等)を読み込み,データベース接続を行うため,下記に示すdatabase.phpを必ず冒頭で呼び出しています。

 これら4つのPHPスクリプトも,./phpディレクトリに格納しておいて下さい。

 以上,FullCalendarが用意している機能に加えて,新規に作成したdatabase.php, read.php, update.php, delete.php, index.phpを組み合わせて使いやすい(かな?)スケジュール帳機能が実現できました。

 今後は,これを順次作っていく教育用コンテンツに仕上げていく予定です。

サーバ緊急再起動

 本日(2017-05-11)19時頃,突然このサーバが極端に重くなり,Web接続がかなり遅くなりました。コンソールから見たところ,httpd(Apache)プロセスがout of memoryを吐きまくっており,RAMを使い切っているように見えました。

 ということで,再起動して様子を見ているところです。Apacheのログを見てもそれらしい怪しいアクセスは見当たらないので,何か別の要因があるのかもしれません。

 また繋がりづらくなった時には幸谷までお知らせ下さい。