【iPadでサイト作り3】プレビュー機能もFTPもEmmetもあるよ！アプリ「Textastic」でどこでもHTMLコーディング

イラストページ作ってましたけど脱線。

ちょっとした表なんですがせっかくなんでHTMLで組むことにしました。さらにせっかくなんでiPadでやってみます。

Textastic買いました

iPadで快適にどこでもコーディングできたら楽なのでとりあえず1,200円払って導入しました。まー完全にストレスフリーはありえんだろなーと少々半端な期待を抱きつつ買ってからろくに触らず3ヶ月ぐらい経ってたとか言うどうでもいい話はさておき、むしろ簡単なコーディングぐらいだったら全然問題ないのではないかと思うぐらいコスパがいい感じです。

ファイルの新規作成

iPadではPCのようなディレクトリの扱いができないのでまどろっこしいところがありますが、そのアプリ毎に専用の場所が用意されている感じなんですかね。よく考えたらだいぶ一緒な気がした。

という事でまずはファイルの新規作成→保存、共有先の指定です。

基本的な画面はエディタ画面だったと思います(忘れた)

iOSのキーボードで出しづらい記号を並べてくれている神対応…(ちなみにスクショは外部キーボード接続時の画面です)

右上の共有アイコンから、設定されている場合サーバーやクラウドに送ったり、メールに添付したりすることができます。

保存先・共有先を設定するのは左下のネットワークアイコン(地球儀みたいなやつ→🌐)から行えます。繋ぎ方は様々なソフトと同じだったので割愛します。

左側がローカルフォルダで右が共有先です。この画面の場合は「Googleドライブ」とこのサイトのサーバーに繋いでいます。ドライブにも共有してた方がFTP繋がってなくても…これは自分が心配性なだけな気がする。とにかく色々接続できます。個人の作業スタイルに合わせてで良いですね。

次にファイルの新規作成です。

エディタのローカルフォルダが一覧されている下の「+」をクリックすると上のようなウインドウが出ますのでファイル名.拡張子を入力してDoneします。

今更だけどDone(ダン)って完了って意味だったらしい。

新しく作ったファイルはローカルファイル一覧に表示されます。

ファイルのアップロード

先ほどの🌐アイコンで設定した先にアップロード、先からダウンロードも簡単にできます。一度行うとエディタの共有アイコンから1発で同じ場所に送信して上書きできるのも楽ですね。

共有フォルダをタップ→指定して、それぞれ下方にある「Upload」「Download」をタップで行うことができます。上書き確認もちゃんとしてくれます。

いつも使ってるFTPソフトとさほど変わりないので慣れたらサクサクいけそう。

Emmet使えます

いつもの「！」入力でTabすると最初のHTML出てきますねー感動。

(2020.01.30 わかりづらかったので画像追加しました)

キーボードがなくても記号などが並んだキーの一番左、「→」矢印でできます。

HTMLなどのプレビュー

このメガネアイコンからプレビューを開けます。

ちなみに1度bootstrap をCDNで読み込んでもちゃんと反映されました。

CSSもパスがあっていればローカル上でプレビューもちろん可能。

JSのアラートもプレビューできました！(誤字;;;;;)

まとめ

という事で、今回はTextasticの使い方でした。

1,200円はなかなかコスパいい感じです！

ちなみにやっぱりキーボードがあると画面を塞がないので効率が格段に上がりますねー。キーボードはやっぱり必須です。

あると便利な外付け機器

マウス

キーボード

関連記事

iPad入力のあれこれ。デフォルトキーボードが邪魔だけど自在に動かせる方法があるらしい

【iPadでサイト作り2】Illustratorの代替になるもの探し…Vectornator（無料アプリ）使ってみた

【やり方】クリスタとiPad Proで厚塗りメイキング動画−iMovieで速度編集

余談ですが、サガシリーズ特有のモンスターランクの早見表なんですけど、リマスター版が出るのでいろいろ先手ってことでVC版で遊んでます。ポケモンの色違いといい閃きシステムといい、ゲームのモチベーションはいつもこの辺ですね。

最終更新：2021.02.07