今回、不特定多数に公開せず、ローカル環境でドキュメントを公開する方法を模索しました。
htmlの扱いがやや面倒だなあという話で、最終的にいきついた結果をまとめます。
静的ウェブサイトをローカルじゃなけいところで共有したいならレンタルサーバーに置く方法が楽です。
目次
htmlをiOSやAndroidのブラウザで開く!viewerは?
MacとWindowsはhtmlで開くことは昔から問題ありません。
iOSとAndroidはHtml viewerは探しましたが、開発用のものしか見当たらず、ブラウザでプレビューするにはFileAPPマネージャーみたいなものを使う流れになるが、あまり一般的ではない。。しかも、最近Appleストアからなくなっているものもある。。
apple公式のファイルからもうまく開けなかった(外部CSS・外部JS)
htmlをgoogleドライブで表示/公開/プレビューする
では、別のアプローチとして不特定多数が閲覧できないサーバーに置いてプレビューを共有しちゃえばいいじゃん、という発想になりがちです。
Googleは6日、Googleドライブでウェブページを公開できる機能の提供を開始した。
https://internet.watch.impress.co.jp/docs/news/586894.html
ただ、昔はGoogleドライブでWebページを公開するみたいなことはできたようですが、今はセキュリティ上の理由でできない模様！2013年ごろにはじまり、2016年に終わっていました。
うーん、パパッと作ったhtmlファイルを、Dropbox か Google Driveで共有しようと思ったが、どちらもブラウザでプレビューはさせず、ローカルにダウンロードさせようとするのね。
— Akimasa_K (@Akimasa_K) April 20, 2020
セキュリティ上しょうがないような気もするが、不便じゃのう。自分でWebサーバ立てるのはめどいし…
DropBox、OneDriveでhtmlを開く
ブラウザーの OneDrive から HTML ファイルが開けないのは仕様の様ですね。
https://answers.microsoft.com/ja-jp/msoffice/forum/all/onedrive%E3%81%AE%EF%BD%88%EF%BD%94%EF%BD%8D/9992d5b2-2048-4035-8202-2d9f7648f758
DropboxにJavaScript付きのHTML置いても、スマホで動作確認ができなかった
— Masan-k (@Masank10) January 9, 2022
スマホでDropboxのファイルを開くと、専用のViewerが起動してしまう
うーん
GitHubのPages機能使うか
（振り出しに戻る）
https://t.co/WpjcML2sc2
— Masan-k (@Masank10) January 9, 2022
>GitHubは1月7日（現地時間）、無料ユーザーでもプライベートリポジトリを使えるようにしたと発表した。
最近知った衝撃的なニュース
ただ非公開にすると、Git Hub Pagesを使ったホスティングサービスが使えないのが痛い
スマホの動作検証どうやってやろうか（うーん
Dropbox、oneDriveも同様で、
無料プランの場合、githubはPrivate RepositoryでWikiやGitHub Pagesが使えないみたい。 要は社内向けに非公開にはできないようですね。
ほかにもevernoteなどあるけど、同じかなあ。
社内のAPI仕様をswagger-uiで公開するために、とりあえず無料でどこにホスティングしようか検証してたんだけども
— kumakumakuma (@bkw_kuma) December 12, 2021
GitHub Pages→privateはダメ
Netlify→Basic認証は課金しないとダメ
Heroku→node.js +express でなんとかなりそう
Herokuは無料プランが廃止されました。無料プランはいつか廃止されたり広告がついたりするから面倒だけな気もします。
レンタルサーバーのBasic認証なら格安
そもそも無料サーバーは管理会社が何らかの労力がかかるため、無料でなんとかしようというのが難しく、社内向けや会員制サイトならレンタルサーバーにBasic認証がお気軽です。月500円あればなんとかなります。
スターサーバーのBasic認証
「ホームページは全世界に公開されているけれど、出来れば身内にだけ公開したい…。」
https://www.star.ne.jp/free/manual/homepage_password.php
そこで役に立つのがパスワード制限。パスワード制限を設定すると、パスワードを知らない人からのアクセスを防ぐことができます。
WordPressのブログも運営できてブログを運営したら月500円ぐらいなら軽く回収できます。レンタルサーバーの詳細はこちら!
ドキュメントをgoogleドライブで表示/公開/プレビューする方法
ドキュメント管理の第3の道を探すePUB
Macで使えるMarkdownメモアプリで
— 立薗理彦 (@mshk) August 9, 2021
・Evernoteみたいにアプリ内でノートを管理できる
・シンプル
・個別のノートのTable of Contentsを表示できる
ものがあったら教えて下さい。
要するにGitbookのローカル版が欲しいんですけど、TOCを表示する機能が意外とないんですよ
同じようなことで悩んでいる人はいるのですね。
サーバーにあげちゃて鍵をかけるという方法とは別にやはりローカルでも開きたいところ。
アプローチを変えることにしました。
もともとmarkdownで書いているため、じゃあ、コンバーターでモバイルはePUBにしちゃおうというところに落ち着きました。ePUBはamazon kindleやAppleも含めて電子書籍のメインのフォーマットのため廃れることはおそらくないでしょう。目次もあるし動画の再生もできます。HtmlはCSSやJavaScriptなどが外部ファイルになる場合もありますが、ePUBは一つのファイルになります。
一発で変換できるようにしたら2回目から手間ではありません。
iOSならAppleBookを使えばいい感じで見れます。DropboxやGoogleドライブ経由で簡単に共有できます。
PCはHtmlに変換して使い分けています。
- mac:html
- windows、windowsタブレット:html
- iPad、iPhone:ePUB
- andorid:ePUB
pacdocを使ってドキュメント管理をしています。
GoogleドライブをWebサーバーにしてしまう「Editey」
Google DriveからインストールできるアプリEditeyがあるようです。html、CSS、JavaScriptを扱えるようです。こちらは未検証なので紹介だけとさせてもらいます。ただ、公開urlがEditey.comなのでクローズドな環境ではないのかな。そうなると、自分のサーバーに公開するのと変わらない気もしますね。
口コミはこんな感じです。
googleドライブをホスティングサーバにできるediteyってのを入れてみたんだがドライブ内の全ファイルと接続されてて、これ大丈夫なのかなー。
— イイダリョウ@ふろんとえんど・えんじにあ (@idr_zz) January 15, 2019
googleとは別会社のようなんだが。
できれば指定したファイルだけ接続したい。
これが普通の状態でみんな使ってるよー、であれば安心できる。
ある日,Editeyからある空間を開こうとすると,こんなエラーメッセージが出たこともあったけれども,自分はまだ原因がわからない.
— Kenshun MACHIDA 町田賢俊 (@machi_syo_g) February 7, 2019
次の日,同じようにgoogleドライブにデータを持っていってEditeyで同じように手続きしたつもりだったのだけれど,なぜかうまくいった…… pic.twitter.com/L7TOglp5QT
Googleドライブでtxtファイルを開こうとしたら「Editey」というツールが立ち上がって「ゲームオーバー これ以上無料で提供することができません」みたいなテキストが表示された。。
— イイダリョウ@ふろんとえんど・えんじにあ (@idr_zz) April 9, 2019
安定性やいろいろ制限はあるかもですね。
不特定多数に共有しないなら、ePUBになりますかね。Pandocを使うと、htmlにもePHBにも一発変換できます。
ローカルでJavaScriptは動くのか
ブラウザアプリがローカルで動かない原因の大半は「ローカル上のJAVASCRIPTはファイル制御に制限がある」なのでブラウザに変に引数与えてどうこうするよりもローカルで鯖立てたほうが速い、かと言ってその環境をエンドユーザに要求するのは酷だしと。
— ゆあはうす (@KYOKUTOTABAITAI) September 10, 2021
@Gno4166 Flash とか JavaScript とか絡むパターンでローカルだとセキュリティ上の制約で動かないパターンは非常に多いので試しにまるごとサーバに上げて動くか試して見たほうがいいかも知れない。今一応俺もアーカイブダウンロードしてるところ。
— おおぶ (@oovch) August 11, 2013
注意事項があるようです。ただ、検証したところ、なんでも動かないではなく関数によっては問題なく使えるようです。GitBookもJSを使っているが、検索以外は動きました。関数によってはセキュリティ的にまずそうです。
バックアップデータもhtmlのものは少なくありません。
PCのローカルサーバーでHtmlを表示するならSimple Web Serverが簡単!
簡単にローカルサーバーを立ち上げる方法として、Simple Web Serverがあります。試したところ、フォルダ指定するだけでそのローカルサーバーが立ち上がるので、わりと便利です。
ローカルサーバーに便利なWeb Server for Chromeはサポート終了。
— neru【AI活用開発者!プログラム&アート】 (@neruplan) November 28, 2023
代替としてSimple Web Serverがあるらしい！
というか後続アプリですね。Electronで開発されているようです。今度、試してみましょう！φ(´・ω・｀)https://t.co/LPJdzqUC1j#liveserver #Python #エンジニアと繋がりたい
Simple Web Serverの使い方
1分でできました。
新規サーバー > フォルダ選択 > サーバー作成
フォルダ選択する際に、Htmlのフォルダではなく、CSSやJSも含まれているフォルダを選択します。
閲覧が終わったら、サーバーを削除のボタンを押すだけです。
ご参考になれば幸いです。
コメント