紙の手順書って使いにくい…だったら手順書アプリを内製！？

![手順書アプリを内製！？.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/ad47b446-82f0-b40f-98eb-c3614250fe59.jpeg)

## 紙媒体の手順書
皆さんは、紙媒体の手順書って使いにくいな～って思いませんか？
<b>私は思ってます。</b>
手順書を作る側としても、見る側としても。
作る側としては更新の手間がかなりかかります発送やら製本やら。見る側としても冊子を持ち歩くのって邪魔です。

## スマホアプリにしてしまえば便利では…？
世の中にはねノーコードでアプリ開発できてしまうツールがあるんですよね、これが。
<b>そこで…！</b>
今回はGlideというノーコードアプリ開発ツールを活用して
業務改善に役立つかもしれない手順書ビューワアプリを作ってみましょう。

## 出来上がったものがコチラ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">手順書をスマホで見られたら便利だよね〜ってずーっと思ってました！アプリにしてみました！　<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/glide?src=hash&amp;ref_src=twsrc%5Etfw">#glide</a> <a href="https://twitter.com/hashtag/%E3%82%A2%E3%83%97%E3%83%AA%E5%86%85%E8%A3%BD?src=hash&amp;ref_src=twsrc%5Etfw">#アプリ内製</a> <a href="https://twitter.com/hashtag/%E3%83%8E%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89?src=hash&amp;ref_src=twsrc%5Etfw">#ノーコード</a> <a href="https://t.co/IfFgsvtcc6">pic.twitter.com/IfFgsvtcc6</a></p>&mdash; ok-93 (@ok931024869) <a href="https://twitter.com/ok931024869/status/1686651200903786496?ref_src=twsrc%5Etfw">August 2, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 使用ツール
<ul>
<li><a href="https://www.glideapps.com/">Glide</a>
</ul>
なんと今回は<b>コレ</b>だけです…！

## 作り方
#### 下準備
まずは『Data』タブを開き、目次となる表と手順書の各項目を記した表を作成します。
![qiita1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/fa7d83bc-8b7f-10aa-4531-c7206a52eee9.jpeg)
![qiita2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/5e68cb68-8e4e-f705-89b0-0dd760721ab8.jpeg)


#### 『Layout』タブから各画面を配置していきます
<details><summary>実装の詳細はコチラ</summary><div>

まずは目次ページを作成。『COMPONENT』から『list』を選択
![qiita3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/51e41bd1-bab1-c59b-9609-5552f2542366.jpeg)
『Source』を下準備で作成した手順書目次を指定。
![qiita4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/b36ee8ce-0099-c455-2cad-6dcd3ea121aa.jpeg)

続いて目次からの遷移先を作ります。
TITLEの『Simple』とCOLLECTIONSの『List』を配置します。
![qiita5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/d9b7710a-3706-928b-2ab4-3cda6efb392a.jpeg)
TITLEの設定
![qiita6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/19a0d15a-5993-a791-1aa2-81dacd47634c.jpeg)
COLLECTIONSの設定
![qiita7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/8b83ea0b-07f4-1930-845b-325c23677e51.jpeg)
DATAのSourceで手順書の各項目を記した表を指定。
検索ボックスやフィルター機能を付けたいときはOptionsの
![qiita8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/2dd52636-7f94-fe3e-f2ec-4461aac98e69.jpeg)
この辺を弄りましょう。
![qiita9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/5091160f-1c1b-f783-156b-9336ad2899ab.jpeg)
各手順書のページはTITLEの『Simple』とCONTENTSの『Image』を配置します。
![qiita10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459001/f1b75b9c-cc51-ac5c-94a4-3b42e5ea4596.jpeg)
あとは先ほどの『Image』に手順書となる画像をアップロード。
各ページでこれを繰り返します。

</div></details>

## 最後に
今回も作成したものを職場の人にお披露目してみました笑
お披露目する際に<b>「2～3時間学んだだけでアプリ作れるようになったんすよ～」</b>と調子コキめに話し始めてます。

*「そんなの作れちゃうの！？」* (パート　Sさん)
 *「ちゃんとアプリの体してる！」*(同僚　Mさん） 
簡単に作れてしまうというのを知ってもらう事で皆さんが興味を持ってくれると良いなと期待を込めつつ…
アプリの体をしている＝スムーズに利用ができるということなので、取っつきにくさは感じてなさそうですね！

 *「更新作業が紙より相当楽そう！」*(上司　Mさん） 
画像の作業しか発生しない見込みなので、作業量は10分の1くらいになるかもしれないことを説明。

*「手順書ページの画像って拡大できないの？」* (上司　Hさん） 
はい…拡大できないんです…方法を探したんですが結局解決できず。
<ul>
<li><a href="https://note.com/shinya_matsui/n/n2b0010d32ce7">【Glide】細部までくっきりイキイキと！画像拡大アクション</a>
</ul>
参考にしたのは上記の記事。同じ設定項目が『Action』内にいらっしゃらないんですよねぇ…
<br/>
<br/>そもそも本当は画像ではなくPDFを表示できるようにしたかった！が、方法ググっても見つけられず…

<b>く゛や゛し゛い゛</b>
言わなければ突っ込まれないだろうと思っていたダメな部分をモロに指摘されてしまいました笑
この辺が改善できれば「かなり業務本番環境で活用できそう！」という評価を得ました。
引き続きGlideを触って実用度を上げていきます！