新商品のリリースにともなって、サイトをちょっとだけ書き換え。
ついでにエディットの方法もいろいろやってみました。


画像は、MacBook で作りますが、
今回のコーディングは、ほぼ、iPhone の【Textastic】。




【Textastic】は、サーバーとDropbox につないであります。

Dropbox にあらかじめ画像をアップしておいて、
【Textastic】にダウンロードしつつコーディング。




プレビューして確認できたら、
サーバーにアップ。　Dropbox にもアップ。


あーなんて便利！

キーボード買ってよかった！！


画像だけは、どうしても無理があるけど、
コーディングだったらなんの問題もないですね。

新規のデザインでも、おおまかに外観を組んで、
ダミーの画像でも入れておけばいいんですもんね？

iPhone にキーボードだけ。と身軽だから、
ちょっとした空き時間に作業ができることが助かりました。

仕事帰ってからやらないとなぁ・・・っていうと、
どっと疲れて腰が重くなっちゃうけど、
帰りがけ、ご飯食べながら書いちゃおうか？
と思えば、プレッシャーなくできたりしました。

やっぱり、楽しいな！ コーディング！！


ところで、このところ Adobe CC のおさらいをしていました。

っで、【Dreamweaver】もチェックしてみた。

私、スクールのとき以来開いてないかも・・・。
だって、当時、まともに css があつかえなかったんだもん。

わぁ！ いろいろできるようになったんですね！（遅れすぎ）

かといって、いまさら手打ちをやめるつもりもない。

だって、手打ち。 楽しいじゃん！


さて、そんな手打ち派に重要なのは、エディター。

私は、Winでは【Crecent Eve】Mac では【mi】を使っていました。
なぜといえば、シンプルだったからです！

【Crecent Eve】は、大好きなエディターでした。

もう何年もアップデートされていないので、
開発は終了されたのかと思います。

久しぶりに動かしたら、
私の環境では、プレビュー機能が怪しくなっていました。

今までたくさん使わせていただきました。
本当にありがとうございました！


【mi】は、私が Mac を買ったときから使っているエディター。
Webデザインをはじめてからも引き続き使ってます。

シンプルでコードも書ける【mi】はとてもいいエディターです。


でも、そろそろ新しいエディターも気になる・・・。

使ってみました！


【Visual Studio Code】

MS が無料で提供している、テキストエディター。
オープンソースでマルチプラットフォーム。


あっ・・・使いやすい・・・。

Win はもちろんですが、Mac でも問題ないです。


なんだよー MS のくせにー（完全な偏見）！

どうしても、MS で HTML っていうと IE のトラウマがあるもんで。

機能拡張のプラグインをインストールして、環境を整えていきます。

私はそんなに大そうなことはしない（できない）ので、
とりあえず、【Live HTML Previewer】を。
そのうち、入力補助機能を追加したいかな。


開いてみましょう！




見やすい！

書くことに関しては、なんの問題もありません。


では、プラグインのプレビュー機能はどうなんでしょう？




ショートカットもあるけど、ここをぽちっと。




スプリットして、プレビュー！

ただこれ、ほんとのプレビューのみ。
JavaScript は効きません。




なので、メニューは出てこない！




プレビューのリンクからは、ファイルが開きます。




そのつど、プレビュー。




ここもカルーセルは・・・。




スライドボタンを押したら、怒られた！


使えないじゃん！！

ということではないです。
これは、あくまでプレビューの機能。
デザインの確認に使いましょう。


サイトの確認はブラウザーで！




Win も Mac も【Ctrl ＋ Q ＋ W】です。


私、ここで勘違いをしました。

「Win で【Ctrl】だったら、Mac は【cmd】だよね？」って。




【Ctrl】でした！

そうだよね。【cmd ＋ Q】で、アプリ閉じちゃうもんね。

そういえば、Mac の【Ctrl】キーってなんの時に使いましたっけ？
調べたら、テキスト入力のカーソル操作に使えるんだ！

まったく触ったことなかった・・・こんどから使おう。


ここでちょっと戻って、【Textastic】。


【Textastic】 もブラウザーで開けますが。



メガネは、プレビュー。




このプレビューは、ブラウザーと変わりなく動く！

なんて優秀！！


私が個人的に【Visual Studio Code】で気にいった機能は。




画像のリンクが・・・。




開く！

ちなみに、ここからの画像は、Winです。
プラットフォームによる違いがないことがわかりますね。


そして。



カラーコードにサムネイルがついてる！


カーソルをコードに乗せると・・・。



ピッカーが！！


色見本をクリック。




表示が変わってくれる！！！


ぐりぐり色を変更。



元色も表示されてます。




アルファ値も指定できちゃう！！




お好みの表示で。


なんて便利なんでしょう！！！！！


文字や罫線・ベースのカラーは、
見やすさとデザインの間で本当に悩みます。
いつも、カラーチャートとにらめっこですから。
これで、思う存分お試しができちゃいますね。


テキストエディターでここまでできるなんて、すてき！


これからは【Textastic】と【Visual Studio Code】でいこうかな？



でも・・・ちょっとまって！

【Brackets】も、試してみましょう！

関連記事

• テキストエディターあれこれ【Brackets】
• テキストエディターあれこれ【Visual Studio Code】
• テンプレート変えました！【10年分の感謝です】