おーみんだよ。

おーみんだよ。

プログラミング、Unityなどのアウトプットを主に行っています。

プリザンターの拡張スタイル・スクリプトで画面を変える!?

f:id:bookreadkun:20190625224431p:plain

おはようございます。おーみん(@Ooooooomin_365)です。

 

先日、プリザンターとはどのようなものか解説する記事を書きました。

OSSのWebデータベース「プリザンター」を触ってみた。 - おーみんだよ。

 

さて、その記事内にて拡張スタイルや拡張スクリプトを利用することでプリザンターの画面や仕組みをより細かく自分好みに変えることが出来ると書きましたが、今回は実際にそれを実践していきましょう!

 

プリザンターの拡張スタイル・スクリプトで画面を変える!?

 

 

今回は上記ツイートに掲載した爽やか風画面を作っていきたいと思います。

 

環境

  • Windows10
  • Pleasanter 0.50.32.22458

 

手順

まずはスタイルの設定からやっていきます。

f:id:bookreadkun:20190625231312p:plain

テーブル画面にて、「管理」→「テーブルの管理」(赤枠部分)を選択します。 

 

f:id:bookreadkun:20190625231432p:plain

「スタイル」をクリックしましょう。

 

f:id:bookreadkun:20190625231546p:plain

(上記画面は既にスタイルとスクリプトを作り終えた後なので「背景」やら「パンくずリスト」やらありますが、デフォルト状態では何もありません。)

 

f:id:bookreadkun:20190625231824p:plain

新規作成をクリックし、タイトルに「背景」、スタイルにスタイルを入力してください。入力後に「変更」をクリックします。

 

----------

スタイル(コピー用)

body{background:repeating-linear-gradient(90deg, #EEFFFF, #EEFFFF 100px, #CCFFFF 100px, #CCFFFF 200px);}

----------

 

 

 

以下、「パンくずリスト」~「画像表示」までも同様に設定していきます。

 

f:id:bookreadkun:20190625231939p:plain

----------

スタイル(コピー用)

#Breadcrumb{font-size: 18px; padding-bottom: 20px;}
.item a:hover{color: #FF9900; font-size:20px;}

----------

 

f:id:bookreadkun:20190625232056p:plain

----------

スタイル(コピー用)

#MainCommandsContainer {background: rgba(157, 236, 250, .55); height:80px; padding-top:20px;}
#MainCommandsContainer .ui-widget.applied{font-size: 24px;}

----------

 

f:id:bookreadkun:20190625232120p:plain

----------

スタイル(コピー用)

.grid-row{background-color:#CCFFFF;}

----------

 

f:id:bookreadkun:20190625232146p:plain

----------

スタイル(コピー用)

#FieldSetGeneral{background-color:#CCFFFF;}

----------

 

f:id:bookreadkun:20190625232208p:plain

----------

スタイル(コピー用)

#Navigations{height:60px; font-size:18px;}
#NavigationMenu li{padding: 15px 0 15px 0;}
.ui-menu-item-wrapper{padding-top:45px;}
.ui-menu{margin-top: 10px;}
#SearchField{padding-top:15px;}
.fixed{position: fixed;top: 0;}

----------

 

f:id:bookreadkun:20190625232231p:plain

----------

スタイル(コピー用)

#glayLayer{display:none; position:fixed; top:0; left:0; height:100%; width:100%; background:black; opacity: 0.60; filter:alpha(opacity=10); z-index:10}
#overLayer{display:none; position:fixed; top:50%; left:50%; margin-top: -300px; margin-left: -230px; z-index:11}

----------

 

 

f:id:bookreadkun:20190625231546p:plain

全て設定した後は上図のような画面になっているかと思います。

「更新」ボタンをクリックしてスタイル設定は完了です。

 

 

次にスクリプトの設定になります。

f:id:bookreadkun:20190625232550p:plain

「スクリプト」をクリックしてください。

 

f:id:bookreadkun:20190625232724p:plain

タイトルに「写真表示」と入力し、スクリプトを入力します。

----------

スクリプト(コピー用)

$(function(){
$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
$("#glayLayer").click(function(){
$(this).hide();
$("#overLayer").hide();
});

$(".body.markup.applied a").click(function(){
$("#glayLayer").show();
$("#overLayer").show().html("<img src='"+$(this).attr("href")+"' />");
return false;
});
});

----------

 

 

スクリプト入力後は「変更」をクリックしてください。

 

f:id:bookreadkun:20190625233123p:plain

上記のような画面になっていることを確認し、「更新」ボタンをクリックしてください。

 

以上で完成です。

下図のような爽やか風な画面に仕上がりましたでしょうか?

 

f:id:bookreadkun:20190625233322p:plain

 

f:id:bookreadkun:20190625233338p:plain

 

画像をクリックするとモーダルウィンドウになってるはず!

f:id:bookreadkun:20190625233441p:plain

 

最後に

ということで、「プリザンターの画面の変え方」について解説しました。

拡張スタイルや拡張スクリプトを利用すると、このように自分好みの画面を作ることが出来るのです。いや~、楽しいですよね~!

 

ぜひぜひ皆さんも試してみてください。では!