Cloud9でのショートカットキーを調べてみた。

移動時間やちょっとした空き時間にCloud9をいじるのが楽しい今日このごろ。
ブラウザエディタとは思えない便利なショートカットキーがたくさんあり、移動中のChromebookなど小さなパソコンでも楽しくコードが書けます。
そんなわけで、Cloud9のショートカットキーをまとめてみました。

Cloud9エディタのショートカットキー

Windows/Linux Cromebook Mac(未確認) Cloud9でのアクション
Ctrl-Alt-Up Ctrl-Option-Up マルチカーソルを追加して上の行に移動
Ctrl-Alt-Down Ctrl-Option-Down マルチカーソルを追加して下の行に移動
Ctrl-Alt-Right Ctrl-Alt-Right Ctrl-Option-Right マルチカーソルを追加し、次の「同じ文字」にジャンプ
Ctrl-Alt-Left Ctrl-Alt-Left Ctrl-Option-Left マルチカーソルを追加し、前の「同じ文字」にジャンプ
Ctrl-Shift-U Ctrl-Shift-U 小文字に変更します
Ctrl-U Ctrl-U Ctrl-U 大文字に変更します
Alt-Shift-Down Command-Option-Down 行を下にコピーして、その行に移動
Alt-Shift-Up Command-Option-Up 行を上にコピーして、その行に移動
Delete Alt-Backspace 削除する
Ctrl-Shift-D Ctrl-Shift-D Command-Shift-D 選択行をコピー
Ctrl-F Ctrl-F Command-F 検索・置換
Ctrl-K Ctrl-K Command-G 次を検索
Ctrl-Shift-K Ctrl-Shift-K Command-Shift-G 前を検索
Down Down Down, Ctrl-N 下の行に移動
Up Up Up, Ctrl-P 上の行に移動
Ctrl-End Command-End, Command-Down 文末に移動
Left Left Left, Ctrl-B 左に移動
Alt-Right, End Alt-Right Command-Right, End, Ctrl-E 行末に移動
Alt-Left, Home Alt-Left Command-Left, Home, Ctrl-A 行頭に移動
Ctrl-P Ctrl-P 括弧など(ブラケット)の間を移動
PageDown Alt-Down Option-PageDown, Ctrl-V ページダウン
PageUp Alt-Up Option-PageUp ページアップ
Right Right Right, Ctrl-F 右に移動
Ctrl-Home Command-Home, Command-Up 文頭に移動
Ctrl-Left Ctrl-Left Option-Left 左の単語に移動
Ctrl-Right Ctrl-Right Option-Right 右の単語に移動
Tab Tab Tab インデント
Ctrl-Alt-E Ctrl-Alt-E HTMLファイル編集時は選択した単語をタグに変換
Alt-Down Alt-Down Option-Down 選択行を下に移動
Alt-Up Alt-Up Option-Up 選択行を上に移動
Ctrl-Alt-Shift-Up Ctrl-Option-Shift-Up マルチカーソルの上移動(カーソルを増やさない)
Ctrl-Alt-Shift-Down Ctrl-Option-Shift-Down マルチカーソルの下移動(カーソルを増やさない)
Shift-Tab Shift-Tab Shift-Tab アウトデント
Insert Insert 上書きモード
Ctrl-Shift-Z, Ctrl-Y Command-Shift-Z, Command-Y やり直す
Ctrl-Alt-Shift-Right Ctrl-Alt-Shift-Right Ctrl-Option-Shift-Right マルチカーソルから現在の選択を削除し、次へ移動
Ctrl-Alt-Shift-Left Ctrl-Alt-Shift-Left Ctrl-Option-Shift-Left マルチ選択から現在の選択を削除し、以前に移動
Ctrl-D Command-D 行を削除
Alt-Delete Ctrl-K カーソルから行末までを削除
Alt-Backspace Command-Backspace カーソルから行頭(インデント含まない)までを削除
Ctrl-Backspace Ctrl-Backspace Option-Backspace, Ctrl-Option-Backspace 左の単語を削除
Ctrl-Delete Ctrl-Alt-Backspace Option-Delete 右の単語を削除
Ctrl-H Ctrl-H Command-Option-F 検索・置換
Ctrl-Down Ctrl-Down Command-Down 下に一行分スクロール
Ctrl-Up Ctrl-Up 上に一行分スクロール
Ctrl-A Ctrl-A Command-A 全て選択
Shift-Down Shift-Down Shift-Down 下の行まで選択
Shift-Left Shift-Left Shift-Left 左を選択
Shift-End Shift-Alt-Right Shift-End 行末までを選択
Shift-Home Shift-Alt-Left Shift-Home 行頭までを選択
Shift-PageDown Shift-Alt-Down Shift-PageDown PageDownでの移動範囲を選択
Shift-PageUp Shift-Alt-Up Shift-PageUp PageUpでの移動範囲を選択
Shift-Right Shift-Right Shift-Right 右を選択
Ctrl-Shift-End Command-Shift-Down 文末までを選択
Alt-Shift-Right Command-Shift-Right 行末までを選択
Alt-Shift-Left Command-Shift-Left 行頭までを選択
Ctrl-Shift-P 括弧など(ブラケット)の間を選択
Ctrl-Shift-Home Command-Shift-Up 文頭までを選択
Shift-Up Shift-Up Shift-Up 上の行まで選択
Ctrl-Shift-Left Ctrl-Shift-Left Option-Shift-Left 単語毎に左側に選択
Ctrl-Shift-Right Ctrl-Shift-Right Option-Shift-Right 単語毎に右側に選択
Ctrl-/ Ctrl-/ Command-/ 行をコメントアウト/アンコメント
Ctrl-Z Ctrl-Z Command-Z 直前の操作を取り消し

移動中に小さい画面&マウスなしの環境でちょっとしたコードを書いたりしていると、ショートカットキーのありがたみと便利さが身にしみます。
vimとか勉強してみようかなという気にさせられたり、させられなかったり。。。

Cloud9でサーバがつながらなくなったときの対処方法(仮)

Cloud9で、しばらく放置していたWorkspaceなどを軌道すると、サーバが繋がらなくなることがあります。
「Run]をクリックして、ブラウザで確認してもエラーの表示がでてつながらないとき。

cloud9でサーバが繋がらなくなった時
↑↑こんな感じになったとき。

下記の方法で回復することができます。

  1. 画面右上の「Disk」「Memory」「CPU」の表示をクリック
    Sitemap
  2. 「Restart」をクリック

この手順で、再びサーバが繋がるようになりました。


試し試しいじっている感じでのレポートなので、他にもっと良い方法があるかもですが・・・

ブラウザ埋込み型のJavascriptエディタ「ACE」を実装してみた。

2015-10-02
この記事は結構見てくださっている方が多いこともあり、すこし修正して
Qiitaにて公開しました。

http://qiita.com/shin1kt/items/48ed9c5d3d485757d19b
こちらも合わせてどうぞ。


最近Chromebookをいじってばかりいるせいで、ブラウザ上で動くエディタとかにとても興味がでてきて、いろいろ試しています。
Cloud9とかすごいですね。うまく使えばいろいろな開発環境が劇的にかわるかもとか思い始めています。
「あぁ、もうそういう時代がきているのね感」みたいのを日々感じる今日このごろ。

そんな中、Cloud9のエディタがすげー便利だな。。なんかWindowsやMacで使われているSublimeTextみたいなことがJavascriptエディタでできるなんて。。とか感じていたのですが、どうやら「ACE」というJavascriptエディタをつかっているらしい。とのことで、すごく興味がわきさっそくですが自分のサーバに実装してみました。

まずはこちらを御覧ください。
https://www.katacom.jp/a/ace-builds-master/editor.html
DEMO用のファイルをすこし変更してアップロードしただけなので、ただ入力できるだけ。
なんですが、「HTML」を入力してみてください。
いろいろ便利でしょ?

Javascriptエディタ「ACE」HTML入力の使い方例

タグを入力

  1. 普通にタグを入力すると終了タグが自動的に入ります。
  2. あとは中身を入力するだけ

タグ間を移動

終了タグにカーソルがあるときに、開始タグに一気に移動したいときとか。。

  1. 終了タグ内にカーソルがある状態で
  2. Ctrl+Alt+Shift+左 (MacはAltをOptionで)
  3. で開始タグに移動

複数タグを同時編集

例えばulで囲ってたけど、olに変えたいなという感じのとき

  1. 終了タグにカーソルがある状態で
  2. Ctrl+Alt+左 (MacはAltをOptionで)
  3. 左を押すたびにタグを移動してカーソルが複製されていきます。
  4. 編集したいタグ全部にカーソルが表示されたらあとは、編集するだけ。
  5. あとは、Ctrl+Alt+Shift+(右|左)を押して移動すると複製されたカーソルを解除しながらタグ間を移動します。

行をコピー

  1. コピーしたい行にカーソルがある状態で
  2. Ctrl+Shift+d
  3. で、行がコピーされます

てな感じで、HTMLタグ編集も楽々です。
その他ショートカットキーは
https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

こちらで確認できます。

Javascriptエディタでここまでできるんですねぇ。。

というわけで、実装してみます。

javascriptエディタ「ACE」を実装してみる。

  1. ダウンロード
    https://github.com/ajaxorg/ace-builds
    ここに、使いやすくまとまったコードがありますので、まずはそれを。
  2. そしたら展開。
  3. editor.html というのがDEMOファイルになっています。
  4. まずは、editor.html を少しいじります。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Editor</title>
      <style type="text/css" media="screen">
        body {
            overflow: hidden;
        }
    
        #editor {
            margin: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
      </style>
    </head>
    <body>
    
    <pre id="editor">
    エディタにデフォルトで入れたいコードはココに書く
    </pre>
    
    <script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/html");
    </script>
    </body>
    </html>
    
  5. 上記をそのままコピーしても大丈夫だと思いますが、ポイントは、
    • 28行目:src/ace.js を参照するようにします。
    • 31行目:テーマを決めます。SublimeText風にしたいので、monokaiを指定
    • 32行目:モードを決めます。今回はHTMLモードにします。

    テーマやモードは、srcフォルダの中に theme-●●.js 、mode-●●.jsが準備されていますので、そこからいろいろお試しください。

  6. editor.html と srcフォルダ をアップロードして、editor.htmlにアクセスします。
  7. というだけの作業で公開されるのが、
    https://www.katacom.jp/ace-builds-master/editor.html
    です。

あとは、この値を取得してあれこれとか、これを利用してWebサービスのあの部分に使おうとか。いろいろとアイディアが湧き出てきそうですね。
まずは、今回実装まで。
今後いろいろといじっていきたいと思います。

参考にさせていただいたサイトは
http://d.hatena.ne.jp/tsugehara/20130419/1366380767
http://blog.asial.co.jp/934
です。ありがとうございます。m(_ _)m

Chromebook(クロームブック)でFTP接続 その2。「Cloud9」をFTP接続でオンラインエディタとして活用する。

Chromebookを使っていると、外出先でFTP接続をしないといけない局面がでてきます。
そんなときは、、、ということで

ChromebookでFTP接続できる。オンラインエディタ「ShiftEdit」
をご紹介しました。

今回はまた別のアプリを使った方法です。

Cloud9をFTP接続でオンラインエディタとして使用する

Chromebookを購入した直後に、せっかくだからChromebookで開発やりたいよね。てなノリでいろいろ探ってたら巡りあったオンライン統合開発環境「Cloud9」。これがすごいアプリでブラウザ上からWordpressだとかRailsだとかの開発環境が構築して、そのままガリガリコードをかけるという。さらに無料プランあり。な、とっても楽しいアプリなのですが、このCloud9、実はFTP接続してリモートサーバ上のファイルも編集できるのです。

Cloud9でFTP接続の手順

  1. まずはCloud9にサインアップ。
  2. ダッシュボードを開きます。
  3. 新しくワークスペースをつくります。「CREATE NEW WORKSPACE」をクリックし、出てきたメニューから「Create a New Workspace」を選択します。
    Create a New Workspace
  4. Hosting: の項目で「FTP」を選択します。
  5. FTP情報を入力する画面が開くので、あとはアクセスに必要な情報を入力するだけ。
    Screenshot 2015-01-30 at 00.27.33
  6. 一応入力情報も書いておきます。
    • Hostname: サーバ名(ホスト名)を書きます。
    • Port: 特に特別なことがなければ21で大丈夫。
    • Username: 接続ユーザ名
    • Password: 接続パスワード
    • Initial Path: 一番最初に開きたいパスです。
  7. 全文入力したら「LOGIN TEST」をクリックして接続できるか検査して
  8. 最後は「CREATE」をクリックするとFTPでサーバにつながり、そこにあるファイルを「Cloud9」で編集できるようになります。

使ってみての感想

  • 前回紹介した「ShiftEdit」に比べて動きが早い感じがする。
  • FTPでの接続ステータスみたいのが、画面下にいつもでています。
  • 複数人で同時に編集したりできるらしく、ちゃんと使いこなせば、もっと楽しくなりそう。

セキュリティ的な問題

FTPで接続しますから、やっぱりセキュリティ的な不安はありますよね。
Cloud9のフォーラムで接続元IPアドレスを紹介していましたので、接続元IP制限をかけてみてはどうでしょうか。

  • 107.23.232.64
  • 54.236.78.114
  • 107.23.123.140
  • 108.59.80.73
  • 173.255.114.210
  • 23.236.51.71
  • 23.236.56.181
  • 23.236.53.189
  • 23.236.57.43
  • 23.251.146.16

※出典を書こうと思ったけどページを見失ってしまいました。Cloud9のページにあったのですが・・・

まあ、私は上記を接続元として設定したところ、無事に接続元制限で接続できました。

前回紹介した「ShiftEdit」もそうだけど、ブラウザだけでこんだけのことができるなんて、すごい世の中になったものです。

楽しい毎日をありがとう。

Chromebookと相性抜群のCloud9が凄すぎてゲボ吐きそうになるレベル。

Chromebookを大変便利につかわせていただいている毎日ですが、開発環境とかどうやろうか?といろいろ探しているうちに出会った Cloud9
ブラウザからいじれるWebアプリ開発の統合開発環境とのことで、最初は、色物っぽいけどなかなか面白そな試みですな。なんて上から目線での試してみたけど、そのすごさに度肝を抜かれて、「この世に神はいた」って思えるくらいな今日この頃。

これ、本当にすごいです

まずは、こちらの記事を
Cloud9でクラウド上にWordPressのテスト環境を10分で作成する方法、もちろん無料
http://nelog.jp/cloud9-wordpress-test

ほんとに10分あれば構築できます。

今までは、打合せとかしているときに「あ、それならWoedpressにあのプラグインをたしたら実現できそうじゃね?」とか思っても、その場でレンタルサーバを用意したりWordpressインストールしたりとかできないので、「じゃあ、今度サンプルてきなの作ってきますよ」的に”宿題”になっていたのですが、Cloud9ならホントに10分あればWodpressのテスト環境が構築できますから、その場で「それって、こんな感じでどうですかね?」とプロトタイプを提出できるようになります。
これは、ホントにすごいことで、今まで2回とか3回分の密な打合せが可能になります。

  1. こんなことできませんか?に対して
  2. 検索すると近いプラグインがでてくる。
  3. すぐにCloud9でテスト環境構築してプラグインをインストールしてみる。
  4. こんなでどうですか?とプレゼン。
  5. ここまでホントに15分程度

なにより、ブラウザから全部できるので、私のChromebookからもサックサクに動きました。
ここ数日、客先訪問のときはChromebook持ち歩いているので、かなり活躍してくれます。

ファイルマネージャ、テキストエディタ、ターミナル、そして確認用のブラウザ、まで全部ついてこのお値段(無料!)ってすごすぎてゲボ吐きそう・・・
Wordpressだけでなく、Railsやnode.jsなども試せるとなると、なんだかワクワク感すら感じてしまいますね。