iPhoneでHTMLエディタの無料アプリを使用してみたのですが、意外とPCではない環境でHTMLやCSSのコーディングするのも悪くないかなと思いました。
iPhoneで使用した無料のHTMLエディタの機能を全て使ってみた訳ではないですが、HTMLエディタを使用する主な機能は使ってみたので、興味がある方は参考にしてみてください。
使ってみた感想というより、使ってみて覚えた機能の使い方の紹介に近い内容で書いてます。
iPhoneで使用できるHTMLエディタに出会う
iPhoneで使用できるHTMLエディタに出会ったのは、app storeでエディタと全く関係のないゲームを探していたときに、偶然見つけ画像に惹きつけられて使ってみようと思ました。
LiquidLogicという無料のアプリなのですが、iPhoneとiPadでHTMLエディタを使用できます。
以下のような方におすすめなようです。
- どこでも快適に編集したいWeb制作者
- タブレットでコーティングを行うプログラマー
- いつでもしっかり文書を書きたいライター
- レポートやノートをスマホで書く学生
- 下書きをするブロガーやSNSユーザー
- 今のアプリが物足りないと感じている方
テキストを編集することがある方におすすめということですね。
LiquidLogicという無料のアプリとの出会いを果たしたいと思った方はapp storeからダウンロードできます。
さっそくiPhoneで無料のHTMLエディタを使用
さっそく私はiPhoneに無料のHTMLエディタLiquidLogicをダウンロードして使用してみました。
LiquidLogicは無料アプリですが内課金があるようです。でも無料アプリのまま使ってみます。
iPhoneでエディタを使用するのが初めてなので違和感を感じますが、何はともあれHTMLエディタをiPhoneで使用する場合の機能や使用感を知るために、普段PCで使う機能と同じことがどのくらいできるのか確認しました。
iPhoneでhtmlファイルの作成と編集
まずはダウンロードしたLiquidLogicをiPhoneで開いてHTMLファイルの作成をして使ってみます。
エディターを開くと新規という名前のファイルになってるので、そのまま保存をタップでHTMLファイルにファイル名を決めることができます。
もしくはエディタを開いているiPhoneの画面左のほうにあるブルーのアイコンをタップしてメニューを開き、「New File」でファイル作成もできました。メニューにはiPhoneでエディタを操作する主要な機能が詰め込まれているようです。
そして作成するhtmlファイルを保存しようとするとhtmlファイル名を決められます。名前のとこでタップしてiPhoneのキーボードを表示させ、好きなHTMLファイル名を入力し、拡張子をhtmlにします。
htmlファイル名を決めたら、とりあえずhtmlファイルをファイラーのローカルに入れてみました。
作成したhtmlファイルがローカルに入ると、ローカルフォルダに中に作成したhtmlファイルが含まれるので、作成したhtmlファイルをタップするとiPhoneでhtmlエディタが開き、先ほどのhtmlファイルが編集可能になります。
ファイル作成の流れはPCで作成する流れがiPhoneでタップ操作になっただけの違いしかないので、特に難しくもなく使うことができます。
Dropboxからファイル選択して編集
先述したhtmlファイル作成のときはローカルにファイル保存しましたが、iPhoneにダウンロードしたLiquidLogicとDropboxを紐付けしておくと、Dropboxに入っているファイルやフォルダを選択してLiquidLogicのエディタを編集することができます。
やってみました。
ファイラーを開くとDropbox項目があるのでDropboxアカウントやGoogleアカウントなどで紐付けします。
紐付けすると、Dropboxにあらかじめ保存しているhtmlファイルのフォルダごと選択できるので、あとはiPhoneで使うエディタで編集したいhtmlファイルやcssファイルを選んで編集していくだけです。
編集したいHTMLファイルをDropboxを経由してiPhoneで編集できるようにするという感じなのかと思います。
Dropboxだけでなく、icloudやGoogle Driveでも紐付けしてiPhoneでhtmlエディタを使い編集ができるので便利だなぁと使用して思いました。
HTMLエディタで編集をする入力方法
htmlエディタで編集をするときに使う入力方法もiPhoneで使ってみることにします。
上の画像のようにiPhoneでhtmlファイルをエディタに開いてキーボードを表示すると、htmlエディタとiPhoneのキーボードの真ん中にhtmlエディタ上で入力や移動できるバーが表示します。
入力バーには3つの種類があってhtmlの閉じタグや終了タグとかcssの記述に使える波カッコとかコロンやセミコロンなど一通りの種類が揃ってます。
htmlエディタの移動には、バーの中央にある上下左右の矢印がある丸ポチを使って移動できます。そして丸ポチをダブルタップすることで選択モードになるのですが、コピーしたい要素で選択モードにして移動してコピペするなどの使い方ができました。
私は選択モードにした移動が少し慣れません。要素のコピーをしてペーストしたら閉じカッコだけコピーできてないとかあるので慣れやコツが必要なのかもと思います。
テキストエディタを分割して編集
iPhoneで使うテキストエディタでhtmlファイルの編集をするときにも、htmlファイルと一緒にcssファイルもエディタ上に表示する使い方をしたいですが、2つのファイルを分割することも可能でした。
iPhoneでテキストエディタの画面にファイルを2つ表示したら、ファイル名の一番右にある四角のアイコンをタップすると「通常表示」「上下分割」「左右分割」で編集するエディタを分割できます。
htmlエディタを使用するiPhoneの向きに合わせて分割方法も合わせることができる使い方ができるのですね。
上の画像はiPhoneを縦にしてテキストエディタのhtmlファイルとcssファイルを上下分割した表示です。
使ってみた感じだとiPhoneを縦画面で上下分割するのはいい感じですが、左右分割するとエディタが細っそ長くなるので使いづらくなりました。左右分割ならiPhoneは横向きに限ります。
マークアップしたタグの置換
htmlファイルでマークアップしたタグなどの置換もできます。
エディタを開いてる画面の左上に最初は検索アイコンがあるのですが、タップすると置換するためのボックスを表示できます。
Aに置換する前のタグを入力するとタグがハイライトされ、Bに置換するタグを入力して置換ボックス横のABボタンで置換します。
iPhoneで初めてエディタの置換機能を使ってみましたが、操作慣れするまでは少し苦戦しそうな使用感でした。
iPhoneでHTMLエディタのプレビュー
HTMLエディタを使うときの重要な機能「プレビュー」はiPhoneで使うエディタ右側の四角をタップしたプレビュー設定でできます。
上の画像はエディタの上にプレビューしたときです。
その他にも、エディタの右にプレビュー、ブラウザーでプレビューもできます。
iPhoneでもhtmlファイルのプレビューを確認しながら、htmlやCSSのコーディングができるのは、とても便利だなぁと思えます。
iPhoneでコーディングしたHTMLとCSSの検証
iPhoneでテキストエディタを使ってコーディングしたhtmlやcssの階層を表示して検証もできました。
iPhoneでコーディングしたhtmlやcssの検証をする場合は、エディタの画面右上にある地球儀のようなアイコンをタップしてブラウザのプレビューをします。
そしてブラウザプレビューの上に表示されている工具箱のようなアイコンで検証ツールを開いて使用ができます。
HTML階層を表示して検証
検証ツールでHTML階層表示にすると、コーディングしたhtmlファイルの階層が表示できます。
編集をタップすると、その要素に指定している属性の編集ができて、要素全体を編集にすると編集でタップした要素全体だけを編集することができるのですね。
HTML階層表示の編集の横にあったcssという部分をタップすれば、その階層に適用してるcssの確認や継承元も確認できます。
また確認や編集をしたいhtml階層をタップすると、プレビューにはタップした要素を視覚的に確認できるように一瞬ですがハイライトした感じになります。
CSSの階層を表示して検証
cssの階層を表示して検証することもiPhoneでできました。
cssの各セレクタに分かれてるプロパティと値を見ることができるのですが、さらに階層表示したcssのプロパティと値の横の編集をタップしてみます。
すると上の画像のようにプロパティを追加したり値を変えたりなどスタイル編集ができます。
なんだかchromeのデベロッパーツールのような感じをiPhoneで使用できますね
iPhoneでHTMLエディタを使用してみた感想
iPhoneでhtmlエディタを使用できることが分かり初めて使用してみたのですが、感想としてはガッツリHTMLやCSSのコーディングするときには操作慣れが必要かもしれません。ですがエディタとしての機能は便利でした。
そのためiPhoneで使えるHTMLエディタは、事前に編集予定のファイルをDropboxなどに保存しておき、何かちょっとしたHTMLやCSSを試してみたいときやブログの下書きをするときに、だらだらとベッドに横になりながら活用しています。
そしてiPhoneはiOS13以降でマウス接続できるため、iPhoneのHTMLエディタがより使いやすくなることでHTMLやCSSを使う場所と時間が増えたので活用時間は日々増えています。
