もしかしてあなたは、ローカルファイルをiPhoneで確認したいと思っていませんか。
デスクトップブラウザのSafariやfirefoxなどの検証ツールを使っても、実際にどのように表示されるのかがわかりにくいですよね。
僕もChromeの検証ツールを使ってレスポンシブ表示を見ていましたが、しっくりこず。。。
iPhoneで見る方法を探していたのですが、見つけました。
この記事を最後まで読んでいただければ、iPhoneでローカルファイル(html/css)を見る方法を知っていただけます。
手順をはじめに示しておきます。
- 『ファイル』をインストール
- iCloud Driveにファイルをコピー
- iosアプリ『FileApp』をインストール
- FileAppにファイルをコピー
カタカナと横文字が多いですが、この記事通りに進めていただければちゃんとできます。
『ファイル』をインストール
こちらは、ios11から登場したファイルのアプリです。おそらく、iosをアップデートしていれば搭載されていると思いますが、使い道を見出せず削除していました。
もし同じように削除していれば、AppstoreからDLしましょう。
『ファイル』もしくは『files』で検索すれば出てきます。
iCloud Driveにファイルをコピー
見たいファイルをiCloud Driveにコピーしましょう。
macのfinderを開くと、下の方にあるはずです。
こちらにフォルダごとコピーします。
このままでも見れるのでは？と思い、開いて見ましたが、残念ながらhtmlファイルのみで、cssが反映されていませんでした。
iosアプリ『FileApp』をインストール
そこで登場するのがこちらのFileAppというiosアプリ。
FileAppもAppStoreで検索すれば出てきます。
こちらをDL。
ここまで終わればほぼ終了です。最後の工程に進みます。
FileAppにファイルをコピー
FileAppのトップ画面にある、『ファイルとフォルダ』をクリック。
するとこのような画面が表示されます。
この右上の＋ボタンをクリックし、インポートをクリック。するとブラウズというボタンが出てくるのでクリック。
すると先ほどiCloud Driveにコピーしたフォルダが出てくるはず。
その中から見たいhtml,cssファイルをクリックしましょう。
そうすればFileAppにインポートされ、cssが反映されたhtmlファイルをiPhoneで見ることができます。
まとめ
簡単でしたね！難点は、FileAppでインポートする際、一つ一つ選ばないといけないこと。
もし一括でインポートする方法があれば教えてください〜。
宣伝
高品質なスライドをまとめたサイト「スライドデザイン」を2024年にオープンしました。
資料作成・スライド作成時や、グラフィックデザインのインプット学習にお使いください。よろしければXで「なんだこの神サイト…！」みたいにフォロワーが2,3人URLをクリックしてしまう感じのpostしていただけると、とてもうれしいです。
