シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > GithubのWeb開発用エディタ「Atom」が、いつの間にか進化し過ぎている件!
注目記事ピックアップ
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/10/31 22:40

GithubのWeb開発用エディタ「Atom」が、いつの間にか進化し過ぎている件!

github_atom_01
どうも、まさとらん(@0310lan)です!

みなさんは、GitHubが提供する「Atom」というエディタをご存知でしょうか…?

プログラミングの学習から、Webアプリの開発まで幅広く利用することが出来るわけですが、驚くべき点は…その「拡張性」の高さにあります。

今回は、「欲しい機能」を簡単にエディタへ組み込むことが出来るその魅力を、厳選してご紹介しようと思います!


プログラミングの「学習」から「開発」までをサポートしてくれる!
github_atom_02_2
「Atom」は、Windows、Mac OSX、Linuxなどで利用可能な無料エディタですが、インストールしたばかりだと普通のエディタと変わりません。

そこで、スマホのアプリみたいなノリで、必要な「機能」を追加していくことが出来ます。

例えば、
プログラミング中に、「配列内の要素を並び替えるにはどうするんだっけ…?」というケースがあったとします。
そんな時に【Ask Stack】という機能を追加します。

すると、画面上に知りたい内容を入力できるウィンドウを表示することが出来ます。
github_atom_03


入力すると、世界中のエンジニアが意見交換するサイト「Stack Overflow」での回答内容が直接エディタ内で見れるようになるのです。
github_atom_04


しかも、サンプルコードをボタン1発で貼り付けてくれる機能まであるので便利!
github_atom_05


「正規表現」などを使う場合には、【regex railroad diagram】を利用すれば、とても分かりやすく「図式化」してくれます。
github_atom_06


ある程度、コードが完成したら【minifier】を使ってみましょう!
github_atom_07


JavaScriptやCSSなどを極限まで圧縮し、「高速化」してくれます!
github_atom_08


また、ちょっとしたコードを書いている途中で、すぐに実行結果を見たい場合は【atom runner】を使うと実現できます。
github_atom_09
現在…、JavaScript、CoffeeScript、Ruby、Python、Go、Bash scriptsに対応しています。


本格的に、ターミナルからの作業が必要になったら【term2】を使うと、エディタ内でコマンド操作を実現できます。
github_atom_10
自分のローカルPCと繋がっているので、ココからすべてのファイル操作も可能です。

コマンド操作が出来ると、Railsのようなフレームワークを使った開発も「Atom」だけで作れるので、いちいちターミナルに切り替える必要が無くて良いですね。


もちろん、【web view】を使ってURLを入力すると…、
github_atom_11


普通のブラウザとしても機能します!
github_atom_12
そもそも「Atom」は、Google Chromeのベースとなっている「Chromium」で作られているので、ブラウジングがエディタ内で出来るのは当然かもしれません。(ちなみに、デベロッパーツールもそのまま使えます…)


コードの管理は、【Git Log】などを利用すると…かなり効率的です。
github_atom_13
さすがに、Git系の機能拡張は豊富に揃っているので、ご興味ある方は覗いてみると良いかも…。(参考


欲しい機能を追加するのは、驚くほど簡単で便利!
さて、とても便利な「機能拡張」ですが、誰でも簡単に組み込めるように設計されているのも魅力の1つです。

まず、エディタの「設定画面」を開きます。
github_atom_14


そして、「パッケージ」の項目にある検索ボックスに、例えば「git」と入力して検索すれば、関連する機能一覧が表示されます。
github_atom_15
あとは、ここから好きなモノを選んで「Install」ボタンをクリックするだけでOK!
簡単ですね。


ちなみに、エディタが無くてもブラウザから専用サイトにアクセスすれば、同じように機能一覧を見ることが出来ます。
github_atom_16
「人気の機能」や、「最新の機能」なども合わせて見れるので、どんな機能が実現できるのかをあらかじめ確認することも出来るでしょう。

他にも、ベジェ曲線をグラフィカルに描ける【bezier curve editor】や、色の指定をGUIで選択できる【color picker】、日本語周りの不具合を修正してくれる【japanese wrap】などは必須かもしれません。


おまけ
最後に、「Atom」を提供しているGitHubで、現在も公開されている究極の「時間泥棒ゲーム」を合わせてご紹介しておきます。

GitHubにソースコード公開中の「時間泥棒確定ゲーム10選」の猛者たちがスゴすぎ!
github_atom_17
まず、実際に遊んでみてから、今回ご紹介した「Atom」のようなエディタを使って、実際にソースコードを分析してみると良い勉強になりますよ。


まとめ
「Atom」は、2014年に公開されたばかりの新しいエディタなのに、今回ご紹介したような多彩な機能が日々公開され続けています。

世界的に「github」がみんな好きなのかどうか分かりませんが、驚くほど活発なエディタではないでしょうか。
こんな短期間に、よくこれだけの機能が拡張されているなぁ…と、感心せずにはいられません。

このまま進化を続ければ、ひょっとしたらトンデモナイ優良エディタに化けるかもしれませんね…。


written by まさとらん

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る