Tweet

Pocket

前回、「Dropboxを使ってAzure WebAppにアップロードする方法」を試してみたのですが、これってもしやiPhoneでもサイトの修正＆アップロードができるのでは？と思いまして…。
WordPressサイトであれば、管理画面からある程度の修正ができますが、静的サイトとなるとHTMLの修正はできてもアップロードにはFTPクライアントが必要になります。
iPhoneってFTPクライアントが無いイメージがあったんですが、調べてみると一応あるけど有料の模様…。（いざというときのために購入しておいてもいいかもしれませんが）

というわけで、今回は有料アプリを購入せず「iPhone（無料アプリ）＋Dropbox＆Azure WebAppで本番サイトへ修正の反映」まで試してみたので手順をメモ。
「ノートPCもタブレットも無いけど今すぐ修正せんといかん！」的な場合の最終手段としてお使いください！ｗ

用意するもの

• iPhone（私はまだiPhon5です…）
• Dropboxをデプロイ設定済みのWebアプリ（今回は「demo-iph-drb」を作成）
• 無料アプリ（Dropbox、iEditor）
• クラス名などサイト構成を覚える記憶力＆チマチマ修正にも折れない心

今回はHTMLやCSSの修正ができるエディタとして「iEditor」を使用します。
無料アプリなので、広告バナーが入ったりしますが簡易的な修正であれば問題ないかなと。（もっと高機能な有料版もあり）
そして今回のポイントはおそらく、一番最後の項目が重要になるかと思いますが…。
（iPhone5の画面、本気で小さすぎた）

事前にWebアプリ作成とDropboxの認証をしておく

今回は「Azure WebAppにアップロードされているサイト」が前提なので、新規Webアプリを作成しておきます。
ちなみに、iPhoneからAzureの管理ポータルに入って新規Webアプリ作成もできます。（検証済み）
どうしても新規Webアプリを作らないといけない場合も、まあ何とかなりそうです。

Dropboxをアップロードで使う手順はこちら。

実際にiPhoneで修正してみる

一番上に表示されている文章を変更（HTMLの修正）します。（表示はPCサイトの方がみやすいのでPCサイトをキャプチャしました）
今回の作業は、新規Webアプリ作成以外は全てiPhoneのみで行います。

Dropboxの操作

Dropboxアプリを起動して、修正したいファイルを表示します。
「アプリ ＞ Azure ＞ demo-iph-drb（作成したフォルダ名）」

「別のアプリを開く」をクリックすると、各種アプリが表示されます。
HTMLを編集したいのでエディタの「iEditor」を選択。

iEditorの操作

選択した「index.html」が表示されているのでクリック。

ヘッダー部の赤枠部分をクリックすると、ソースが表示されます。ここで該当部分を修正しましょう。
今回はテキストの修正のみですが、タグ書いたりクラスやID振ったりもできます。
ちなみに検索も使えるので、修正箇所を狙い撃ちできるのは便利。

修正が終わったら、一番下の「Save」をクリック。
これで上書き保存されます。

一度トップページに戻って、もう一度「index.html」を選択。
下に「Open in」の表示があるのでクリック。

「More」をクリックすると「Dropboxに保存」項目を追加できます。（デフォルトでDropboxは出てない）
「Dropboxに保存」を選ぶと、どのフォルダに保存するか聞かれます。
「アプリ ＞ Azure ＞ demo-iph-drb（作成したフォルダ名）」を選択し保存。
「ファイルの置き換え」を聞かれるので、上書きします。
これでHTMLファイルの修正は完了です。

Azureの操作

管理ポータルにアクセスし、該当のWebアプリを選びます。
プレビューポータルは見にくかったのでスマホのときはクラシックポータルの方がいいかもです。
あと、画面は横向きにした方が見やすかったｗ

「デプロイ」を選んで、同期。
これで修正したHTMLが反映されます。

修正箇所が書き換わりました！

最後に

今回はテキストの書き換えのみでしたが、頑張ればタグの追加などできます。
かなりチマチマした作業になりますが、思いのほかうまく修正作業できるので自分でやっておきながらビックリしたりｗ
ちなみに、Azure WebAppはFTP設定もできます。
ですので、保険の意味でデプロイ方法でDropboxを追加しておくと、色々できて便利なのかなーと。

しかしながら、iPhoneでの修正はかなりイラっとするし無駄に時間かかるので、本気の最終手段にしておいた方がいいと思います！ｗ