Atomエディタがさらに進化。メインエディタ候補筆頭に

使用感と拡張機能の充実ぶりもあって気に入っているBrackets。Adobeとの別仕様での開発から、もともとのオープンソースの単一での開発となりわりと経ちます。
制作経験のスタートがDreamweaverということもあってか、使用感や使いやすさなどについてはどうしてもDreamweaverを意識してしまいます。

エディタというよりもIDE(統合開発環境)なので、他のエディタと比較するのも違うのかもしれないDreamweaver、重いとかいろいろ言われてますが、今でもDreamweaver好きです(笑)

エディタについてはSublime Textを筆頭に主に使用する言語や好みでさまざまエディタがあります。なかでも使用感についてはBracketsが好印象で、手軽な作業などではたまに使用していました。

しかしながら、オープンソースということと随時更新されていることもあるので現時点(2016/01)ではとなりますが、今回のアップデートでなぜかギクシャク感を感じてしまい、あらためて他のエディタを検討してみることに。

Atom

Atom

そんななか、先日の某関係者とお話しをしている際にでたAtomを思い出し、改めてAtomをダウンロード。

正式公開当時に使用してみて、機能的にはなかなか良かったのですが、動作の重さなどまだまだ実制作では気になる点もあるかなあという印象でしたが、そこはGitHub製。その後も存在は気にしていました。

今回改めてAtomを使ってみての感想はびっくり。
以前のモッサリ感はどこへやら、BracketsやSublime Textに負けないぐらいサクサクの動作に。見た目の印象(わりと大事)も、もともとの印象通り洗練されている印象です。

パッケージも豊富で、下記に書いたものをまずはインストール。

UIテーマとシンタックステーマも豊富ですので、Sublime Text同様いろいろと探してみるのも面白いかもしれません。
たまに黒背景にもしますが個人的には白背景が好みなので、UI Theme: one-light-ui, Syntax Theme: octocat-syntaxに。

Bracketsは残しつつ、メインエディタとして使用してみます。

基本設定関連

好みになるかと思いますが、基本的な設定の変更箇所です。
通常、この基本設定で使用されているパッケージについてはデフォルトで入っていると思います。

●ファイルの自動保存
https://atom.io/packages/autosave
Preferences > Packages > autosaveを検索 > Settings→ 下部メニューのSetting→ Enabledをチェック。

●エディタ内の縦線を消す
wrap-guide
Preferences > Packages > wrap-guideを検索 > Settings→ Wrap Guideを無効化(DisableをクリックEnableに)。

●空白系の処理
whitespace
Preferences > Packages > whitespaceを検索 > Settings→ whitespaceを無効化(DisableをクリックEnableに)。
下部メニューの該当箇所のチェックを外す。

  • ・行末の空白を削除する
    Remove Trailing Whitespace のチェックを外す。
  • ・行末の空白を保存時に削除するように設定する。
    Ignore Whitespace Current Lineのチェックを外す。
  • ・atomで最終行を改行させない
    Ensure Single Trailing Newlineのチェックを外す。

スニペットの記述・設定と呼び出し

効率上で欠かせないスニペットの登録ももちろん可能です。

■スニペットの呼び出し
該当のファイルを開き(新規保存)、「opt + shift + s」でスニペットを検索します。

セレクタ(ファイル)名の検索はこちらから。
https://github.com/atom/autocomplete-plus/wiki/Autocomplete-Providers

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
31
32
#記述例1(同一ファイルタイプへひとつのスニペットを登録)
#  '.ファイルタイプ':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文 $1($1は展開後にカーソルを置く位置)'
#
#
#記述例2(同一ファイルタイプへひとつの複数行のスニペットを登録)
#  '.ファイルタイプ':
#    'スニペットの名前':
#    'prefix': 'キー(検索名)'
#    'body': """
#    スニペット本文
#    <!doctype html>
#    <html lang="ja">$1
#    """
#
#
#記述例3(複数ファイルタイプへ同一のスニペットを設定)
#  '.text.html.basic, .text.plain':
#    'スニペット名1':
#    'prefix': 'キー(検索名)'
#     'body': 'スニペット本文'
#
#
#記述例4(同一ファイルタイプへ複数のスニペットを設定)
#  '.text.html.basic':
#    'スニペットの名前1':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文'
#    'スニペットの名前2':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文'

おすすめのパッケージ

パッケージの検索はこちらから。
https://atom.io/packages

インストールは「Preference > Setting / install」から。

japanese-menu
日本語化。個人的には現段階では使用してませんが、一応検討ということで。
●Linter
構文チェック。この本体(Linter)をインストールする必要があるのですが探してみても見当たらず、試しに言語用の以下パッケージをインストールしてみると、勝手(自動?)にLinter本体をインストールしてくれました。

color-picker
カラーピッカーを表示させます。
minimap
ミニマップを表示。
wordpress-dictionary
WordPressのスニペット・コードヒント。
atom-beautify
コードフォーマット。
run-in-browser
ブラウザプレビュー。
atom-html-preview
タブでプレビュー。
highlight-selected
同じワードをハイライト表示。
autoclose-html
自動で閉じタグを入力。
autocomplete-paths
autocomplete-plus の拡張。ファイルパスをサジェスト表示。
trailing-spaces
行末の空白をハイライト。
sync-settings
複数のPCやMacでGithubアカウントを使ってパッケージを同期。

TwitterのPeriscopeがタイムライン上での自動再生に対応

Twitterが提供するアプリで、スマホからライブ映像をストリーミング配信できる Periscope。

Periscope

最近若干目にする機会も増えましたが、開始当初から全世界を対象とした作りで、各国各地の動画配信をたまに見てました。

楽曲やなにかしらの映像コンテンツを持っている方とか、YouTubeとはまたちがった手軽感で世界への配信が行え、あまりメジャーではない状態ですからちょっとチャンスかもしれませんね。

そのPeriscope ですが今まではTiwtter で配信をクリックされた後、Periscope へ移動していたのですが、今回、Twitter のタイムラインで動画の埋め込みが自動再生されるようになったそうです。

Twitter提供の動画配信系だと、Instagram のタイムラプスアプリ Instagram HyperlapseのようなVine もありますが、動画の長さや交流ができるというのが、基本的なPeriscopeとの違いでしょうか。

Facebookの動画投稿(投稿の仕方にもよりますが)やプロモーション広告などのように、タイムラインをスクロールしていくとそのまま動画(音声はストップ)が自動再生されます。

もうワンクリック(ラストワンクリック)のあるなしってやはり大きく、はじまりの絵面が面白そうだとついついスクロールやめて見ちゃいます。

また、Twitter が提供ということもあり、Periscope やVine はやはり親和性が高く、今回の変更でPeriscope のアカウントを持っていない人でもTiwtter のタイムライン上で映像配信を見ることができます。

今年はスマホからの映像配信など、より動画・生中継の活用が注目されると思いますが、Twitterがプラットフォームということもあり、利用者層としてティーンや20代前半などをより意識されるサービス提供者さんとか気になるサービスではないでしょうか。

Periscope もVine もTwitterアカウントがあれば利用可能です。

Kazunori Iguchi(@kazunoriiguchi)さん | Twitter
Kazunori Iguchi on Periscope
Kazunori Iguchi – Vine

ICカード(EMV カードシステム)対応 Squareリーダー

スマートフォンやタブレットなどでクレジットカード決済が簡単に行える「Square」。
最近増えてきたICカード(EMV カードシステム)へ対応可能なリーダーを購入してみました。

ICカード(EMV カードシステム)対応 Squareリーダー

注文は昨年だったのですが、出荷の遅延により年明けの先日到着。

ICカード対応の読み取り端末としては安値でコンパクトだそう。
機能的に必須のなのでしょうが、USBからの充電が必要のようで少しばかり手間が増えた印象。

ICカード対応 Squareリーダーの充電の様子

充電については初回で数分?程度で完了のようで、若干大きくなりましたが従来の磁気カードのみのクレジットカードについても対応可とのことなので、利便性は相変わらずですね。

SquareリーダーのICカード対応と磁気カードのみの大きさの比較

カードリーダーの価格は¥4,980ですが、2016年1月31日までに初回決済を行うと、ご購入合計額と同額までの決済手数料が還元されるキャンペーンも行われています。

EMV カードシステムについて

Square & EMV – より安全な決済方法を皆様へ。
ICカード対応 Squareリーダー: スタート ガイド
ICカード対応ステップ・バイ・ステップ ガイド(1) | Square Japanブログ
カードリーダー代金還元キャンペーン適用条件と、よくあるご質問

change_history