テキストエディターあれこれ【Visual Studio Code】

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


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


VScode_20

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

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


VScode_21

プレビューして確認できたら、
サーバーにアップ。 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】を。
そのうち、入力補助機能を追加したいかな。


開いてみましょう!


VScode_01

見やすい!

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


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


VScode_02

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


VScode_03

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

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


VScode_04

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


VScode_05

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


VScode_06

そのつど、プレビュー。


VScode_07

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


VScode_08

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


使えないじゃん!!

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


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


VScode_09

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


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

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


VScode_10

【Ctrl】でした!

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

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

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


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


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

VScode_11

メガネは、プレビュー。


VScode_12

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

なんて優秀!!


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


VScode_22

画像のリンクが・・・。


VScode_23

開く!

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


そして。

VScode_13

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


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

VScode_14

ピッカーが!!


色見本をクリック。

VScode_15
VScode_16

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


ぐりぐり色を変更。

VScode_17

元色も表示されてます。


VScode_18

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


VScode_19

お好みの表示で。


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


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


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


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



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

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




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

03 | 2024/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -

月別アーカイブ