読者です 読者をやめる 読者になる 読者になる

まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

TeraTermからAWSへ自動ログイン設定方法

こんにちは!まちいろの森です。

システムを開発している時、サーバーを構築している時、Windowsからサーバーに接続するためには様々なツールを利用し、接続していると思います。 WindowsだとTeraTermを利用している方が多いのではないでしょうか。 私もTeraTermユーザの一人で、利用してサーバーに接続しています! 利用していますが、毎回毎回ユーザとパスワードを求められ、面倒だな…自動でログインできたらなと思うこの頃です。

そんな面倒を無くし、ダブルクリックでサーバーにログインすることができる設定があります! ここでは、その設定方法をご紹介します!!!! 私はAWSのサーバーを利用しているので、AWSTeraTermから自動ログインする方法をご紹介します。

まず始めに…

ttlファイルを作成します。以下の通りテキストエディタで作成し、「.ttl」で保存します。

HOSTADDR = 'ホスト名'
USERNAME = '接続ユーザ名'
KEY_FILE = 'AWSへ接続用のキーファイルパス(拡張子が.pemのファイル)'
COMMAND = HOSTADDR
strconcat COMMAND ':22 /ssh /2 /auth=publickey /user='
strconcat COMMAND USERNAME
strconcat COMMAND ' /keyfile='
strconcat COMMAND KEY_FILE
connect COMMAND
end

次に…

作成したttlファイルに「TTPMACRO」のexeファイルを関連づけて、完了となります。 関連付ける手順は以下になります。

1.ttl上で右クリック⇒プロパティ⇒変更を押下

f:id:e_mori:20170112172634p:plain

2.TeraTermがインストールされているフォルダ配下の「ttpmacro.exe」を選択し、OKを押下します。

f:id:e_mori:20170112173018p:plain

上記で作成したttlファイルをダブルクリックすると以下のように自動でサーバーにログインできます。

f:id:e_mori:20170112174355p:plain

オススメ設定

これまでの手順で自動ログインは可能となりましたが、TeraTermにはほかにもおすすめの設定があります。 それはttlごと(接続先ごと)に背景色、文字色を変更できる設定です。 それについてここではご紹介します。

1.ttlでサーバーに自動ログインし、設定⇒ウインドウをクリックします。

f:id:e_mori:20170112175832p:plain

2.以下のような画面が表示されるので、背景色と文字色を好きな色に設定します。

f:id:e_mori:20170112175938p:plain

3.設定後、設定⇒設定の保存でiniファイルとして保存します。

f:id:e_mori:20170112180042p:plain

4.ttlファイルにiniファイルの設定を以下のように追記、保存すると設定が反映されます。 保存後、ttlファイルをダブルクリックすると先ほど設定されたもので起動されます。

ttlファイルの「KEY_FILE」の下に追記するもの

INIFILE = '作成したiniファイルパス'

ttlファイルの「strconcat COMMAND KEY_FILE」の下に追記するもの

 strconcat COMMAND ' /F='
 strconcat COMMAND INIFILE

最後に

サーバーが複数存在する場合に環境の誤りを防止するひとつの方法として、みなさんも活用して頂ければと思います。

Chrome拡張機能 EditThisCookieを使ってみる

こんにちは!まちいろの日高です。

Cookie使いこなせていますか?
私はつい最近、Cookieに値をセットする、セットした値を読み込むということを理解した超初心者です。

今回は、GoogleChromeCookieの中身を見ることができる拡張機能EditThisCookieについて紹介します。

 GoogleChromeCookieを確認する

ブラウザの初期機能としてもCookieを確認することは可能です。

Chromeの設定から【プライバシー】【コンテンツの設定】を選択します。
f:id:shidaka:20161130120557p:plain
コンテンツの設定画面から【全てのCookieとサイトデータ】を選択します。
f:id:shidaka:20161130120608p:plain
Cookieがセットされているサイトとその中身を見ることができます。
f:id:shidaka:20161130120618p:plain

 EditThisCookieでCookieを確認する

Cookieを見るだけであれば、標準機能で十分かもしれません。
例えば、Cookieを書き換えてテストをしたい、リアルタイムで確認したいなどであれば、
EditThisCookieの追加をオススメします。

まずはChromeに追加するところから始めます。
chrome.google.com
完了すると、Chrome検索バー横にアイコンが表示されます。
f:id:shidaka:20161130121147p:plain

保存されるCookieはこのように確認することができます。
f:id:shidaka:20161130121739p:plain

 EditThisCookieでCookieを変更する

EditThisCookieでは、保存されているCookieの変更・削除も可能です。

EditThisCookie画面で該当Cookieの【値】を編集します。
編集後はチェックアイコンをクリックすることで反映されます。
f:id:shidaka:20161130122041p:plain

Cookieを削除したい場合は削除アイコンをクリックすることで反映されます。
f:id:shidaka:20161130122052p:plain

 まとめ

Cookieの閲覧・編集・削除を行うのは、GoogleChrome標準機能ではなくEditThisCookieを使うことをお勧めします。
ぜひ追加してみてください。

AdobeXDを使ってアプリのプロトタイプを作成してみよう

f:id:s_kadota:20161116114645p:plain

こんにちは、まちいろの門田です。

昨年の6月に日本版がリリースされた「AdobeXD」。
お手軽にワイヤーフレームモックアップを作成し、共有することができるため
今後デザイナーのプレゼンやコーダーとのやり取りに用いられるケースが増えてくるのではないでしょうか。

なによりプロトタイプ機能を使えば作成したオブジェクトからお手軽に画面遷移を行うことができ、
オンラインでの公開もワンアクションでできるため動きのあるモックを作成後すぐにレビューできるのが強みです。

まだまだベータ版であるため今後もアップデートが繰り返されることと思いますが
現時点でも業務で実際に運用するには十分な機能を備えております。

そんなAdobeXDでの基本的な操作と、実際に簡単な
アプリのプロトタイプを作成した流れをこちらにまとめました。

作成するもの

  • まちいろのキャラクター「だいこん丸」たちの紹介アプリ
  • トップ画面、リスト画面、各キャラクターの詳細画面を作成する。

アートボード

それではまず、AdobeXDを起動します。
ベースとなるアートボードを選択することができるので、今回は「iPhone6/7」を選択します。


f:id:s_kadota:20161116124548p:plain

アートボードが一つだけワークスペース上に作成されます。
次に、必要な画面の数だけアートボードを増やしましょう。
今回作成するページは

  • トップページ
  • キャラクター一覧ページ
  • 各キャラクターの紹介ページ(4キャラクター)

ですので全部で6ページになります。
画面左のサイドバーの「アートボード」の項目を選択します。


f:id:s_kadota:20161116124907p:plain

すると画面右のサイドバーに様々なデバイスやウインドウ幅の項目が出てきますので、増やしたいアートボードのサイズを選択しましょう。
今回は「iPhone6/7」サイズを6画面使うので、新たに5つ追加します。

また、一度選択した後にワークスペース上でアートボードを出したい位置でクリックすれば、
その場所にアートボードを出すことができます。

アートボードはボード上に何もオブジェクトが乗っていない場合のみ、
サイズや位置を画面左サイドバーの一番上の「選択範囲」を使用して自由に変形、
移動することができるのでまずはアートボードの位置を整理しましょう。

f:id:s_kadota:20161116125153p:plain

レイヤー

次に各アートボードに分かりやすく名前を設定しましょう。
画面左サイドバーの一番下にある「レイヤー」を開いてください。
現在展開されているアートボードの一覧が表示されます。
そこで各アートボードの名前を変更します。


f:id:s_kadota:20161116131449p:plain

これで下準備が完了しましたので、実際にモックアップを作成していきます。

オブジェクト

まずは共通となるヘッダーバーとメニューを作成しましょう。

画面左のサイドバーより「長方形」を選択してください。
四角形型のオブジェクトを自由に作成できるようになります。


f:id:s_kadota:20161116132532p:plain

これでヘッダー部分を作成します。
作成した長方形オブジェクトは画面右のサイドバーで線や色の設定をすることができます。


f:id:s_kadota:20161116132550p:plain

テキスト

次にトップページへリンクするためのオブジェクトを作成します。
また長方形オブジェクトを作成したり、インポートした画像を使うことももちろんできますが
今回は「テキスト」で簡易なリンクテキストを作成いたします。


f:id:s_kadota:20161116133153p:plain

「テキスト」で作成したTOPテキストをヘッダーオブジェクト内に配置します。
さらに「テキスト」で現在のページを表す見出しを作成します。
f:id:s_kadota:20161116133429p:plain

これでヘッダーは完成です。
このヘッダーを全てのアートワークにも配置していきます。
作成したヘッダーオブジェクトを丸ごとコピー&ペーストして他のアートボードにも載せていきましょう。 AdobeXDのコピー&ペーストはアートボードの設置位置も記憶されているので
貼りたいアートボード上のどこにカーソルを合わせてペーストしてもちゃんとヘッダー位置に貼り付けてくれます。

ここで、コピー&ペースト以外にAdobeXDには作成したオブジェクトを
テンプレート(シンボル)として保存できる機能がありますのでそちらの機能についても触れておきます。

シンボル

画面左のサイドバーの「レイヤー」の上にある「シンボルライブラリ」を選択してください。
このライブラリ内に作成して保存したいオブジェクトをストックしておくことができ、
いつでもシンボルとして引き出して使うことができます。


f:id:s_kadota:20161116135800p:plain

ただし、全てのシンボルはグループ化されて、アクションなどがリンクされており文章などを削除すれば全てのシンボルに反映されます。
そのため、シンボル化するオブジェクトはボタンやアイコンなど全体で共通する外観のものが望ましいです。 (画像で追加されているヘッダーオブジェクトは見出し文章がアートボードごとに変更して使用するためシンボル化するには実際は不適切)
もしシンボルで個別に編集をしたいものがある場合は
右クリックでメニューを開き「シンボルをグループ解除」してから行う必要があるので注意が必要です。

ですので今回のケースの場合、コピー&ペーストするのが一番簡易な作業です。
しかしもっと大きなプロジェクトで、使い回すオブジェクトが増えてきた場合にはこのシンボル機能が
大きな効果を発揮すると思われますので、是非覚えておいてください。

デザイン作成

各アートボードにヘッダーを配置し、テキストも適した形に変更します。
f:id:s_kadota:20161116141442p:plain
さて、ここから個別にアートボード内で作業し、
作成したオブジェクトを用いたり画像をインポートしてデザインを作成していきます。


とりあえずトップページをざっくりこのような感じで作成し…

f:id:s_kadota:20161116141652p:plain

キャラ一覧ページもざっくりこのような感じで作成し…

f:id:s_kadota:20161116141758p:plain

各キャラ紹介ページもとりあえずこんな形で作成しました。


f:id:s_kadota:20161116141937p:plain

いったん、これらでアプリの各ページの準備が整いました。

プロトタイプ

次に、実際にボタンやリンクをクリックした際に
画面が切り替わる「プロトタイプ」を作成していきます。

ウインドウ左上にある「プロトタイプ」をクリックします。

f:id:s_kadota:20161116142657p:plain
そうするとワークスペースが「プロトタイプ」作成用に切り替わります。
「デザイン」をクリックするとデザイン制作画面に戻ります。

それでは早速、画面移動の設定をしていきましょう。
ここではまず、トップページからキャラ一覧ページへ移動するためのボタンオブジェクトを選択します。

f:id:s_kadota:20161116143057p:plain
すると青いタブのようなものが出てきます。
こちらをクリックするとこのオブジェクトクリック(タップ)した際に

  • どのアートボードに
  • どんな動作で
  • どんな速度で

移動するかを選択することができます。

ちなみにアートボードに対してホームアイコンのついたタブが表示されますがこちらは
青くなっているものが起動時に最初に表示されるホーム画面(index)扱いになります。
クリックすることで切り替えることができます。

まずはホーム画面のボタンから
「listページ」のアートボードに「左にスライド」で「イーズアウト」を0.4秒で移動に設定します。

ここでいったん、ウインドウ右上の再生ボタン「デスクトップレビュー」を
クリックして実際に動くか試してみましょう。

f:id:s_kadota:20161116143513p:plain
こちらが実際のレビュー動画になります。




成功ですね。
この要領で他のアートボード間をどんどんひも付けていきます。
基本的に動作は進む場合は「左にスライド」、戻る場合は「右にスライド」で作成していきます。


最終的にこのような形になりました。
かなりごちゃごちゃしてしまっておりますね。


f:id:s_kadota:20161116144522p:plain

今回は想定している全てのリンクにアクションをつけましたが
実際に作成されるモックアップでは最低限のリンクにのみアクションを設定するだけで良いでしょう。
今回は規模が小さいものなので、せっかくなので全てに設定いたしました。

それでは実際にこちらも「デスクトップレビュー」で動作を確認してみましょう。




問題なく想定した通りの動作をしています。
単純な操作で、ここまでできてしまうのはかなりの強みではないでしょうか。

また、スマートフォン側にAdobeXDのプレビュー用アプリを
インストールしておけばUSB経由で実機でのプレビューも行うことができます。


f:id:s_kadota:20161116144829p:plain

共有

さて、最後に共有の設定をしていきます。
「デスクトップレビュー」の右にある「オンラインで共有」をクリックします。


f:id:s_kadota:20161116144938p:plain

オンラインで公開する際のタイトルと、アクセスするためのリンクや埋め込みコードを生成することができます。
生成したリンクにアクセスすれば、プレビュー画面で実際に動作を試していただくことができます。
今回作成したモックアップのレビューはこちら

▶︎ まちいろテストアプリ


リンクを共有さえすれば、作成したプロトタイプを
すぐにプロジェクトメンバーやクライアント先に見てもらうことが可能です。






いかがでしょうか。
モックに動きをつけるツールやサービスは色々とありますが、
AdobeXDはかなり簡易に利用できるツールだと思います。

アプリにとどまらずWEBサイト制作にも、プレゼン用の資料などにも活用することができるため
今後も活躍の場が増えていく、期待できるツールになると思われます。