small shell Basic 2

カスタムアプリ

前章で説明したBase App(ベースアプリ)がカスタマイズができないテーブル型のデータ管理に特化したツールであるのに対し、カスタマイズが可能なアプリをsmall shellではCustom App(カスタムアプリ)と呼びます。Custom Appはアプリをカスタマイズしながらチームで情報共有をより効果的におこなうことを目的に設計されていますが、カスタマイズ自体も段階的に行うことができます。いずれの段階でもCustom Appはチームでのデータ共有に貢献しますので、必ずしもコードの編集までできるようになる必要もありません

アプリの段階的カスタマイズ

STEP

1. データを管理するテーブルを生成する                               //small-shell基礎#1
2. メインページを生成・編集し、データとドキュメントを同時にアプリに収納する  //本章で説明
3. small shell frameworkを理解し、コードを直接編集しカスタマイズする   //small-shell応用

カスタムアプリ生成

それでは早速アプリ生成を生成していきましょう、ちなみにCustom AppはBase Appのうえに生成されますので事前に前章を参照しBase Appを生成してください。以下はtestという名前の共有パスコード（４桁数字）で認証できるアプリを生成しています。primary databoxというのはアプリが管理するデータボックスですが、前章で生成したitem.dbを指定してみましょう

カスタムアプリもgenコマンドでの作成となります

sudo /usr/local/small-shell/adm/gen -app

gen -app 実行例

$ sudo /usr/local/small-shell/adm/gen -app
Type of App (1.BASE | 2.FORM | 3.CUSTOM): 3
App Name: test
Type of Authentication (1.shared pass | 2.user key | 3.other | 4.none): 1
Shared Passcode: ****
Primary databox: item.db

The App will be generated in the following order. Please check it.
-----------------------------------------------------------------

App Type: 3.CUSTOM
App Name: test
Authentication: shared_pass
Access URL: http://***.***.***.****/test
Shared Passcode: ****

-----------------------------------------------------------------
Is that OK? (yes | no): yes

認証方式

Custom Appでは以下認証方式が実装可能です

[shared pass] 共用パスコードでアクセス
[user key] ユーザー毎に鍵を発行してアクセス
[other] 認証方式を自分で定義
[none] アプリへのアクセスに認証が不要

Note

user keyについてはアプリ毎にユーザーを作成のうえkeyを初期化URLで生成する必要があります。アプリとしてTeam Appを利用する際の例を参考にしてください

ログイン画面の確認

アプリケーションが正常に生成されているはずですので、上記genコマンドの対話にて表示されたAccess URLへアクセスしshared pass (4桁数字)を入力してください Screenshot

メインページの確認

認証が成功するとデフォルトのメインページが表示されます。このページはマークダウンの文法を含んだテンプレートとしてそのまま利用可能です

Screenshot

マークダウン

マークダウンはHTMLをより即席で生成するための文法ですが、small shellではページの編集に用いることができます。マークダウンの編集はBase App上で行うことができます。文法はデフォルトページに表示されていますので記述例をコピーしてつかっていただくのが効率的です。文法の詳細はこちらもご確認くださいMarkdown

Note

ページはアプリ毎に定義されますので、 Base Appのテーブル左メニューから"アプリ名.UI.md.def"を選択のうえ編集してください。以下はtestアプリの編集ページリンクです

Screenshot

メインページ編集

Base Appで直接ページを編集していきましょう、それぞれのフィールドを入力してSETボタンを押してメインページをリロードするとページが更新されます。

フィールド	記法	詳細
Body	Markdown or HTML	本文を記述します。markdownとHTMLどちらも併用できるため柔軟なページ編集が可能です
YAML for navbar-right-menu	YAML	ナビゲーションバーの"="に入れるテキストリンクをyamlで定義します。yaml例は初期値としてあらかじめフィールドに入っていますので参考にしてください。ちなみに値をすべて消すと"="メニュー自体を消せます
YAML for navbar-left-links	YAML	ナビゲーションバーの左に入れるテキストリンクをyamlで定義します。yaml例は初期値としてあらかじめフィールドに入っています
Logo	HTML	ロゴファイルのimgタグを記入することで、左メニューに表示されるようになります。ロゴファイルはimages.dbにてアップロードをしてください
Footer	text	footerを定義します

各フィールドに該当する部分は以下のとおりです Screenshot

イメージのアップロード

ロゴやイメージをアップロードしてカスタムアップに追加したい場合、Base App上のDataBoxのimages.dbにファイルをアップロードしてimgタグを取得して、編集画面のBodyもしくはlogoフィールドに貼り付けて下さい Screenshot

以下はアップロードしたロゴファイルのimageタグをコピーする例です Screenshot

アプリへのユーザー追加

key認証を選択した場合、ユーザー毎に鍵を生成する必要があります。以下コマンドでユーザー毎の鍵生成URLを作成して下さい

sudo /usr/local/small-shell/adm/ops app:<アプリ> add.usr:<ユーザー名>

テンプレートの利用

small shellの周辺プロジェクトとしてテンプレートがいくつか公開されています、ここではTeam Appをインポートして使ってみましょう。Team Appではチームの共同作業に必要な機能をパッケージ化したsmall shellフレームワークを利用したツールです。チームのカレンダー共有、ファイル共有、タスクの可視化、外部からの問い合わせ受付などが行えます。また、Team Appに管理したいDataBoxを追加することもできます

Team App install

早速Team Appをインストールしましょう、git cloneした後deploy.shを実行するとアプリとDataBoxが自動生成されますが、small-shell-appsパッケージは前ページでの日本語化の際にすでにgit cloneをしているため以下実行例ではcloneコマンドをコメントアウトしています。

テンプレートのダウンロードはgit cloneコマンドでおこないます

git clone https://github.com/naruoken/small-shell-apps

なお、small-shell-appsパッケージは前ページでの日本語化の際にすでにgit cloneをしているため以下実行例ではエラーが表示されています

実行例

# ダウンロード
$ cd $HOME; git clone https://github.com/naruoken/small-shell-apps
※前ページでの日本語化パッケージインストールの際にgit cloneをしているため以下エラーが表示される可能性があります
fatal: destination path 'small-shell-apps' already exists and is not an empty directory.

# Team Appのインストール
$ cd ${HOME}/small-shell-apps/team_app; sudo ./deploy.sh
small-shell root (/usr/local/small-shell): ※特に何も入力せず、ENTERを押してください

# Team Appの日本語化
$ cd ${HOME}/small-shell-apps/dictionary/JP; sudo ./deploy.sh
small-shell root (/usr/local/small-shell): ※特に何も入力せず、ENTERを押してください

Team Appユーザー追加

Team AppはBase Appのユーザーを引き継ぎませんので、deploy.shのインストラクションに従って作成しましょう。以下ではteam Appにtestというユーザーを作成しています

testユーザーの追加例

$ sudo /usr/local/small-shell/adm/ops app:team add.usr:test

ユーザー生成後に、Initialize URL（鍵の初期化URL)が生成れるのでユーザーへURLを案内しましょう。Base Appと同じくInitialize URLへアクセスするとTeam Appへアクセスするための鍵とリンクが生成されます。Initialize URLは一回アクセスすると無効になるので気をつけてください

Team Appログイン

Team Appへログインして右上のeven(=)メニューをクリックするとメニューが展開します。各種機能をお試しください, Team eventやtaskをカレンダーに一元的に表示できるので便利です。ドライブを使うとファイル共有も簡単に行えます

Team AppログインURL

http://{サーバアドレス}/team

Screenshot

データボックスの追加

Teamで管理したいDataBoxを追加したい場合も、容易に追加ができます。Team Appのサブアプリとしてアプリケーションを追加しましょう、3.CUSTOM を選択してapp_nameを定義する際に@teamと付けることでTeam App配下のsub Appという宣言が可能です。その後追加したいDataBoxを指定しましょう。以下ではitem.dbを追加します。Team App以外のカスタムアップでも同様に@をつけることでサブアプリの作成とデータボックスの追加が可能です

実行例

$ sudo /usr/local/small-shell/adm/gen -app
Type of App (1.BASE | 2.FORM | 3.CUSTOM): 3
App Name: item@team
Subapp Databox: item.db

最終確認が問題なければyesと入力してください

実行例(続き)

The App will be generated by following order, please check it
-----------------------------------------------------------------

App Type: 3.CUSTOM
App Name: item
Parent App: team
Sub App Databox: item.db

-----------------------------------------------------------------

Is it OK? (yes | no): yes

Team Appにデータボックスが追加されましたのでブラウザでメニューを確認をしてみましょう

Screenshot

もしメニューの文言を更新したい場合は、Team Appについてはportal編集機能がありませんので直接ファイルを編集して更新してください

実行例

$ nano /var/www/def/common_parts/team_common_menu 
※item.dbに関するメニューを更新する場合は以下行のitem.db Tableという文言を修正
<li><a href="./team?%%session&subapp=item&req=table"><p style="text-transform: capitalize;">item.db Table</p></a></li>

Note

インポートしたアプリについては諸々編集権限がないため細かいカスタマイズを行うには直接編集が必要になりますが、1から生成したカスタムアプリであればBase Appでメニュー含めて更新可能です。カスタムアプリについてはsmall-shell基礎#2をご確認ください

Webドキュメントの生成

small-shellをアプリケーションの生成・実行環境として利用する代わりに、Webドキュメントの生成ツールとして利用することもできます。たとえば、WLSやChromebook上のLinuxで作成したドキュメントをエクスポートして、電子ファイルとしてメールやチャットなどで共有することが可能になります。以下はWebドキュメントを生成し、電子ファイルとしてダウンロードしてローカル保存するまでの例となります

NoDataboxアプリの生成

まずはDataboxを持たないカスタムアプリを生成します、アプリ生成の際はDataboxをnoneとしてください。以下例ではアプリケーション名をgenDocとしています。なお、上述カスタムアプリの項目でも説明していますが、各種アプリケーションはBase Appをベースレイヤーとしてその機能を一部参照するかたちで生成されますので、まずはBaseAppを生成しておいてください。

実行例

$ sudo /usr/local/small-shell/adm/gen -app
Type of App (1.BASE | 2.FORM | 3.CUSTOM): 3
App Name: genDoc
Type of Authentication (1.shared pass | 2.user key | 3.other | 4.none): 4
Primary Databox: none

上記対話の後、最終確認をyesとするとアプリケーションが生成されますので、生成されたAccess URLへアクセスしてみましょう。IPアドレスが前頁からの例のとおり172.28.9.180であった場合は、http://172.28.9.180/genDocになります。テンプレートページが表示されていると思いますが、DataBoxボタンやメニューからtableをクリックするとエラーになります。今回はgen対話時にデータボックスをnoneとしていますので想定どおりの挙動になります。不要なボタンや、メニューはドキュメントの編集で消していく必要があります。

ドキュメントの編集

BaseAppにログイン後にgenDoc.UI.md.defを選択してページの編集をしていきましょう Screenshot

以下段取りでページを編集しています

1. ナビゲーションバーの右メニュー(navbar-right-menu)を消す
2. 左上のgenDocという記述をManualに変更
3. フッター(footer)も消す
4. Bodyにマークダウンでドキュメントを記述
5. イメージをアップロードしimgタグを挿入

なお、メインページの編集方法についてはメインページの編集を、イメージをアップロードして挿入する方法についてはイメージのアップロードを参考にしてください。以下はマークダウンのサンプルを利用して編集・生成した画面になります。電源アイコンのサンプルはフリー素材のサイトなどから入手してください

Screenshot

ドキュメントのエクスポート

dist.shを利用することで、ドキュメントを電子ファイルとしてエクスポートすることができます

sudo /usr/local/small-shell/util/scripts/dist.sh $App $EXPORT_DIR

以下は実行例となりますが、アプリケーションとしてgenDocを指定し、ディレクトリとしてはHOMEディレクトリを指定するかたちでエクスポートを実行しています

実行例

$ sudo /usr/local/small-shell/util/scripts/dist.sh genDoc $HOME
genDoc/
genDoc/電源のアイコン素材.png
genDoc/index.html
genDoc/genDoc.css
============================================================
App is successfully exported to your directory
PATH: /home/ubuntu/genDoc.tar.gz
============================================================

ドキュメントの表示

Windows,Chromebookともにパソコン上で圧縮ファイルを確認することができます、以下格納先を確認いただきダブルクリックして展開して表示してください。また、圧縮ファイルをコピーして送付するといったことも可能ですので高機能なドキュメントとして利用してください

WINDOWSの例

Linux > Ubuntu > home > ユーザー名配下に圧縮ファイルが出来上がっていますのでダブルクリックして展開してください Screenshot

index.htmlというファイルが見つかりますのでダブルクリックして表示してください Screenshot

CHROMEBOOKの例

Linuxファイル配下に圧縮ファイルが出来上がっていますのでダブルクリックして展開してください Screenshot

index.htmlというファイルが見つかりますのでダブルクリックして表示してください Screenshot

その他操作

Custom Appへのtag追加

カスタムアプリのテーブルにタグを追加したい場合、以下コマンドを実行してください

sudo /usr/local/small-shell/adm/ops add.tag:$databox{key{word}} app:$app_name

実行例

# statusがon-goingなタスクをフィルターするtagを追加
$ sudo /usr/local/small-shell/adm/ops add.tag:tasks{status{on-going}} app:tasks

Screenshot

Initialize URLの再生成

Custom Appの鍵生成URLを再生成する場合、app:オプションを指定する必要があります

sudo /usr/local/small-shell/adm/ops app:<アプリ> initialize.usr:<ユーザー名>

実行例

# team Appを指定する場合
$ sudo /usr/local/small-shell/adm/ops app:team initialize.usr:test

フォーム利用の検討

アカウントを持たない外部ユーザーから所定の入力項目をもとにデータを収集し、DataBoxに格納するために外部Formの作成をすることができます。ここでは外部ユーザーからの意見収集のためのアンケートformの作成を例としてご説明します。

アンケートBox作成

初めに収集したいデータを格納するDataBoxを作成しましょう、ここでは架空の製品である"XYZ"についての感想をアンケートとして収集しましょう。その際一意となるkeyは特に想定されないため、primary_keyはhashidとします

Note

primary_keyをhashidとすることで一意となるkeyを指定せずに、IDをシステム側で自動生成させることが可能です

gen -databox 実行例

$ sudo /usr/local/small-shell/adm/gen -databox
Target Databox: survey.db
Primary Key Name: hashid
                    ↑ ここをhashidとしてください、その後は対話を続けてください

対話結果例は以下のとおりです。なお、対話時に入力する際は""にかこまれた箇所を入力してください（たとえば、2列目のnameは"generation"ではなくgenerationと入力してください)

gen -databox 実行例(続き)

Data box will be generated by following order, please check it
-----------------------------------------------------------------

Databox Name:survey.db
#primary_key
name="hashid"
label="#ID"
type="text"
option="required"

#column2
name="generation"
label="世代"
type="select"
params="10-20代,30-40代,50-60代,70歳以上"
option="required"

#column3
name="impression"
label="使ってみた印象"
type="radio"
params="良い,普通,悪い"
option="required"

#column4
name="comment"
label="コメントがあればお願いします"
type="textarea"
option="" <- Set this as required ?をNoで回答

-----------------------------------------------------------------

Note

入力値をパラメーターとして選べるようにする際、区切り文字として上記例のとおりカンマ,を使って並べて記載することができます。

Warning

対話モードの際にバックスペースを使って日本語を修正すると入力値が壊れるため、できるだけコピペなどで生成してください

フォームの生成

DataBoxの作成に続いて、外部向けの入力フォームを生成しましょう、ここでもgenコマンドをお使いただきます。アプリケーションタイプとして2.FORMを選択し、名前は仮にsurveyとしましょう。DataBoxとしては先ほど作成したsurvey.dbを指定します

Form作成実行例

$ sudo /usr/local/small-shell/adm/gen -app
Type of App (1.BASE | 2.FORM | 3.CUSTOM): 2
Form Name: survey
Target Databox: survey.db
Description of the Form : xyzにつてのアンケートにお答えください

その後、フォームに含むkeyを選びますが今回はすべてのkeyを追加しましょう

Form作成実行例(続き)

Select key that must be in the Form (generation | impression | comment) : generation
Add more keys to the Form? (yes | no): yes
Select additional key that must be in the Form (impression | comment) : impression
Add more keys to the Form ? (yes | no): yes
Select additional key that must be in the Form (comment) : comment

最終確認がありますので、問題なければyesと入力して下さい

Form作成実行例(続き)

Form will be generated by following order, please check it
-----------------------------------------------------------------

App type: 2.FORM
Form Name: survey
Target Databox: survey.db
Description: xyzにつてのアンケートにお答えください
Included keys: generation,impression,comment
Access URL: http://{サーバアドレス}/survey

-----------------------------------------------------------------

Is it OK? (yes | no): yes

フォームが生成されますので、最終確認時にAccess URLとして記載のあったURLにアクセスしてみましょう。認証なしで入力フォームへアクセスでき、データの追加ができるはずですので試してください

Screenshot

BaseAppで登録されたデータを見てみると、一意のIDも自動生成されていることが確認できます。 Screenshot

実環境の構築

small shellの学習環境としてUNIX基礎#1ではWSLとChromebookをご紹介しましたが、WSL,chromebookはともに外部からのアクセスができないためローカルでの学習にとどまります。アプリをネットワーク上でアクセス可能にするためには、クラウドの利用をする必要があります。クラウドサービスとしてはAWSやVPSを利用することが考えられますが、インターネットへのサーバ公開に際してはセキュリティ対策が必要になりますので予め注意してください。サーバに関する専門知識をつけた上で運用することをおすすめします