こんにちわ。リーデックス小川です。
今回は、2017年2月5日（月）に追加された新機能「拡張スタイル」「拡張スクリプト」「画像機能の追加」を試してみたいと思います。「拡張スタイル」「拡張スクリプト」は管理画面のUIがかなり変えることができると思いますので、重要度の高いバージョンアップと思っています。今回は、インストールから簡単なUI変更とスクリプト追加を行ってみようと思います。
バージョンアップ
まずは、最新版の実行ファイルをダウンロードしましょう。プリザンターの公式Webページ（https://pleasanter.org/）からダウンロードを行います。ページ上部にある「無料ダウンロード」ボタンをクリックするとダウンロードが始まります。
ダウンロードしたファイルをSetup.batを右クリックして、「管理者として実行」としてください。Dosウィンドウが表示され、SAのパスワードを聞かれるので、インストールで使用したSAのパスワードを入力します。バージョンアップの際には、カスタマイズした「インストールディレクトリ\App_Data\」以下のファイルが書き換わりますので、カスタマイズをしている方は、必ずバックアップをしてから実行してください。
念のため、バージョンを確認してみましょう。ログイン後、画面右上メニューのユーザー→バージョンをクリックしてください。バージョンは0.46.1.25007となります。
スタイルを試してみる
さて、準備が整いました。それではスタイルを変更してみましょう。ページ右上部の「管理」→「テーブルの管理」をクリックし、タブ「スタイル」をクリックします。
以前の画面を知っている方は、画面が大きく変更されたことがわかるかと思います。3つのテキストボックスがあったのですが、表示画面ごと何個でも追加できるような仕様に変更されていますね。
それでは、スタイルを変更してみます。新規作成ボタンをクリックします。入力画面が出てきました。
タイトルに「背景色を変更する」、スタイルに画面の背景色を変更する「body{background-color:#CCFFCC;}」を入力します。出力先はすべてのままとします。「変更」ボタンをクリックし、もとの画面で「更新」ボタンをクリックします。このまま、一覧画面に戻ると・・・
おお、見事に緑色に変更されていますね。いい感じです！
それでは次に、個別の画面に設定してみましょう。先ほどと同様にスタイルの新規登録画面を表示します。
タイトルに「新規作成画面の背景色を変更する」、スタイルに「body{background-color:#66FFFF;}」を入力します。出力先の「全て」のチェックボックスを外すと、出力先のチェックボックスが上記のように選択肢が増えますので、「新規作成」のチェックボックスにチェックを入れます。「追加」ボタンをクリックし、元の画面で「更新」ボタンをクリックします。
画面右上の「新規作成」ボタンをクリックすると・・・
おお、見事に一覧とは違う色になりました。これで、画面ごとにガシガシとカスタマイズすることができそうですね。
スクリプトを試してみる。
それでは、スクリプトを試してみます。スタイルを選択した画面で「スクリプト」タブをクリックします。「スタイル」タブの隣にありますね。
スタイルの時と同じような画面ですね。「新規作成」ボタンをクリックします。
タイトルに「全ページにalertを出力する」、スクリプトに「alert("ようこそ");」と入力します。あとはスタイルのときと同様に「変更」ボタン→「更新」ボタンをクリックすると保存が完了します。
それでは、一覧ページに移動しましょう。左上のテーブル名をクリックすると・・・
ページ遷移前に「ようこそ」が表示されましたね。OKボタンをクリックすると、一覧画面に遷移します。同じように、右上の新規作成画面をクリックすると、画面遷移前にalertが表示されますね。JavaScriptの書き方によって、表示タイミングは変更することができるかもしれません。
それでは、スタイルと同様に、ページごとにスクリプトを設定してみます。先ほどと同様に、スクリプトを表示し、新規作成ボタンをクリックします。
タイトルに「新規作成ページにalert("新規作成ページです")を出力する」、スクリプトに「alert("新規作成ページです");」を入力します。出力先は新規作成を選択します。「変更ボタン」をクリックし、「更新」ボタンをクリックします。
それでは、ページ上部にある「新規作成」をクリックすると、
↓
設定の順番どおり、alertのメッセージが「ようこそ」→「新規作成ページです」と表示されました。
なお、一覧の順番を変更するとどうなるか、実験して見ました。どうやら
・全ページに設定されているJavaScriptが個別ページのJavascriptより先に実行される
・全ページ、個別ページに設定されているJavaScriptは上から実行される
というルールで実行されるようです。
例えば、
ID1、全て、alert("全ページ１");
ID2、全て、alert("全ページ２");
ID3、新規作成、alert("新規作成1");
ID4、新規作成、alert("新規作成2");
と設定すると、「全ページ1」→「全ページ2」→「新規作成1」→「新規作成2」とアラートが表示されます。これを、
ID4、新規作成、alert("新規作成2");
ID2、全て、alert("全ページ２");
ID1、全て、alert("全ページ１");
ID3、新規作成、alert("新規作成1");
と順番を変更した場合、「全ページ２」→「全ページ１」→「新規作成2」→「新規作成1」とアラートが表示されます。思わぬバグを生む可能性がありますので、ぜひ実行してみてください。また、スタイルも同じ順番になると思われます。試してはいませんので、もし試された方は、お知らせください。
画像を表示してみる。
それでは、最後に画像を表示してみます。テキストエリアであればどこでも表示可能です。使い方は簡単で、画像をコピー（Ctrl+Cや右クリックで画像をコピー）し、貼り付けたい場所にカーソルを合わせてペースト（Ctrl+Vや右クリックで貼り付け）を行います。入力時は文字列が表示されていますが、フォーカスが外れると画像が表示されます。
↓
物件情報のまとめや写真のスクラップなど、画像を扱うことが簡単にできるようになりますね。非常に便利な機能です。
ということで、今回は拡張スタイル・スクリプトと画像の貼り付けを行ってみました。スタイル、スクリプトはガシガシと変更することで、自分の思い通りのUIや、JSON(P)などでデータを外部から取得することができますね。みなさんも試してみてください。
