らいふうっどの閑話休題

興味のあることをゆる～く書いていく

"Sketch" 1 day boot camp for the UI design I participated.

Sketch Design


"Sketch" 1 day boot camp for the UI design I participated.
UIデザインのための「Sketch」1dayブートキャンプに参加してきました。

Index / 目次
a Trigger / きっかけ
  今年、アシラス株式会社にジョインしました。
BOSSの @albatrosary からデザインに関するイベント情報をもらいました。
それが、UIデザインのための「Sketch」1dayブートキャンプ でした。
コーディング技術だけでなく、デザイン技術もスキルアップしたかったので、参加申込みしました。

キャンプでの資料が公開されたら、随時追記したいと思います。
まずは、参加当日の自分の手元のメモや当日のツイッターをもとに公開してみます。
this year, i had joined ashiras co,ltd.
i had recieved a Design Events information from my Boss @albatrosary.

it is "Sketch" 1 day boot camp for the UI design.

i will want to skill up design skill, As well as coding skill.
I participated this events.

If Information by camp is exhibited, I'd like to add at any time.
At First, i will write the day's memo and Twitter of the day.


Yasuhisa.Hasegawa / 長谷川恭久さん
  13:30 - 14:10（40分）　長谷川恭久さん：なぜSketchがUIデザインで力を発揮できるのか

DrawIt から Sketch になったとの事 資料：DrawIt と Sketch デザインツール乱立期 資料：なぜ多彩なデザインツールが出てきているのか 世界では、Hacking UI Sketch 48%占めているとか。 思いもしなかった話その１ The fact that I didn't also think Part.1 思いもしなかった話その２ The fact that I didn't also think Part.2 とても印象に残ったお話が、ジョン・マエダさんの一言でした。 impression very much, Mr Jhon.Maeda says word. このセッションで、非常に意外というかデザインツールも
ロジカルで、デザイナーとフロントエンジニアの連携を
重視している事がわかりました。

this session, i had understand.
Design tools was emphasized that
designer and front engneer combination


Asami.Yamamoto / 山本麻美さん
  14:15 - 15:15（60分）　山本麻美さん：Sketchの便利な機能を使えるようになろう！（前半）
15:25 - 16:25（60分）　山本麻美さん：Sketchの便利な機能を使えるようになろう！（後半）

自分もコミュニティで、イベントのお手伝いをしているので、
当日のトラブルは他人事に思えませんでした。
Because one is working as a maid of an event by a community, too.
The day's trouble didn't seem in a somebody else's problem.
 しっかりと覚えられた？手順の一つ
may be, i study steps as one.
 切り出したい画像をクリック => option + s => ナイフカーソルで、もう一度クリック
image is clicked => option + s => knife cursol is clicked one more.

「 Export Group Contents Only 」をクリック
[ Export Group Contents Only ] was clicked.

使い込めば、非常に使いやすいツールだと思いました。
When using for a long time, I thought the tool I tend to use very much.

紹介されたプラグイン / Introducing Plugin


Masaaki.Komori / こもりまさあきさん
  16:35 - 17:15（40分）　こもりまさあきさん：より便利に使うためのSketchの仲間達
プラグイン Runner の手順
steps of plugin runner
 紹介されたプラグイン / Introducing Plugin 全て把握できてないので、スライド資料を撮影しました。
Everything couldn't be grasped, so I took a picture of slide.

スライドの資料 [gallery ids="3573,3574,3575,3576,3577,3578,3579,3580"]


Summary / まとめ
凄い親近感を持った理由がこちら。
A reason with wonderful intimacy is this.
 Togetter of "Sketch" 1 day boot camp for the UI design UIデザインのための「Sketch」1dayブートキャンプのトゥギャッター https://togetter.com/li/1103352 まだ全然使えていないので、随時更新していきたいと思います。
It can't be used at all yet, so I'd like to renew at any time.


when failed that azure log in by mac + lftp tips

Azure lftp macOS Microsoft

when failed that azure log in by mac + lftp tips / mac と lftp で、Azure にログイン出来なかった時の tips

Index / 目次
a Trigger / きっかけ
  when Azure cann't log by mac & lftp, because i wirte memo.
mac と lftp で、Azure にログイン出来なかったので、メモ。

Azure Resource name is AzureCIExample.
Azure のリソース名は、AzureCIExampleとします。
  
    lftp :~> open ftp://xxxxxx.ftp.azurewebsites.windows.net -u ftp-user-name
    Password:
    lftp ftp-user-name@xxxxxx.ftp.azurewebsites.windows.net:~> ls
    ls: Login failed: 530 User cannot log in.
    lftp ftp-user-name@xxxxxx.ftp.azurewebsites.windows.net:~>


The cause / 原因
  i'll ckeck it.
調べてみることに。
ftp debug mode is 5.
ftp のデバッグモードを 5 にします。
  
    lftp ftp-user-name@xxxxxx.ftp.azurewebsites.windows.net:~> debug 5
    lftp ftp-user-name@xxxxxx.ftp.azurewebsites.windows.net:~> ls
    ---- Connecting to xxxxxx.ftp.azurewebsites.windows.net (23.102.158.190) port 21
    <--- 220 Microsoft FTP Service
    ---> FEAT
    <--- 211-Extended features supported:
    <---  LANG EN*
    <---  UTF8
    <---  AUTH TLS;TLS-C;SSL;TLS-P;
    <---  PBSZ
    <---  PROT C;P;
    <---  CCC
    <---  HOST
    <---  SIZE
    <---  MDTM
    <---  REST STREAM
    <--- 211 END
    ---> LANG
    <--- 200 Language is now English, UTF-8 encoding.
    ---> OPTS UTF8 ON
    <--- 200 OPTS UTF8 command successful - UTF8 encoding now ON.
    ---> HOST xxxxxx.ftp.azurewebsites.windows.net
    <--- 504 Server cannot accept argument.
    ---> USER ftp-user-name
    <--- 331 Password required
    ---> PASS XXXX
    <--- 530 User cannot log in.
    ---> PWD
    ls: Login failed: 530 User cannot log in.
    <--- 530 Please login with USER and PASS.
    ---> QUIT
    <--- 221 Goodbye.
    lftp ftp-user-name@xxxxxx.ftp.azurewebsites.windows.net:~>
  i know that log in failed.
ログイン出来ていない事が分かりました。


a resolve / 解決
  i asked mr.@albatrosary, It's solved readily.
@albatrosary さんに聞いたら、あっさり解決。

reson why, ftp user name is this.
open ftp-site-url -u azure-resouce-name\\ftp-user-name

理由は,ftp ユーザー名が下記の通りです。
open ftpサイトurl -u azureリソース名\\ftpユーザー名
  
    lftp :~> open ftp://xxxxxx.ftp.azurewebsites.windows.net -u AzureCIExample\\ftp-user-name
    Password:
    lftp AzureCIExample\ftp-user-name@xxxxxx.ftp.azurewebsites.windows.net:~> ls
    01-30-17  05:21AM       ＜DIR＞          LogFiles
    01-30-17  05:21AM       ＜DIR＞          site



CHIRIMEN Boot Animation

B2G CHIRIMEN Echigo Firefox Firefox OS IoT JavaScript Mozilla

About CHIRIMEN Boot Animation / CHIRIMEN のブートアニメーションについて

Index / 目次
a Trigger / きっかけ
  with replace boot logo(Tux) and recovery background(Android robot) with CHIRIMEN logo #114 in issue in CHIRIMEN Open Hardware, and I was interested, so it was checked.
CHIRIMEN Open Hardware の issue で、replace boot logo(Tux) and recovery background(Android robot) with CHIRIMEN logo #114 がポストされていて、興味があったので調べてみました

Android端末起動時のアニメーション（boot animation）を変更する方法！
there is files in animation information.
bootanimation.zip というファイルにアニメーション情報があるようです。

it seem able to get a file as bootanimation.zip from Echigo rev.1.
Echigo rev.1 から bootanimation.zip というファイルを取得出来るようです。

place is /system/media.
格納場所は、/system/media です。


connect an Echigo rev.1 / Echigo rev.1 との接続
  at first, CHIRIMEN Board Echigo rev.1 has connected at PC.
まず最初に CHIRIMEN ボード Echigo rev.1 を PC に繋ぎます。




get a animation file / アニメーションファイルの取得
  next, open a terminal, typing command,excute command.
次にターミナルを開き、コマンドを入力，実行します。

  
    ➜  ~ mkdir work/boot-animation
    ➜  ~ cd work/boot-animation
    ➜  boot-animation adb kill-server
    ➜  boot-animation adb root
    * daemon not running. starting it now on port 5037 *
    * daemon started successfully *
    adbd is already running as root
    ➜  boot-animation adb pull /system/media/bootanimation.zip bootanimation.zip
    [100%] /system/media/bootanimation.zip
    ➜  boot-animation
  following excute images / 実際の実行図


The contents of animation file / アニメーションファイルの中身
  The animation files got actually is this.(zip file is already defrosted.)
実際に取得した画像がこちらです。（zip file 解凍済み）

folder:part0

folder:part1



The Future / 今後
  the future, I'll argue a CHIRIMEN Boot animation by a CHIRIMEN Open Hardware Community and look for.
今後、ブートアニメーションを CHIRIMEN Open Hardware コミュニティで議論・募集をしていきます。

and more, A method change in the image file is checked.
そして、イメージファイルの変更のやり方を調べます。

I'm waiting for your advice.
皆様のアドバイスお待ちしております。


Remote Connect of Echigo Rev.1

B2G CHIRIMEN Firefox Firefox OS IoT

Remote Connect of Echigo Rev.1 / Echigo Rev.1 のリモート接続

Index / 目次

 

I was learned that Remote Connect of Echigo Rev.1 at CHIRIMEN Open Hardware Community.
I jsut do it.
this steps is makes in mac.
CHIRIMENOpen Hardware コミュニティでリモート接続の手順を教わったのでやってみた。
この手順は、mac でやっています。

  1. android vnc server setteing / android vnc server 設定
  2. VNC Operation / VNC 操作
  3. Conclusion / 結論
  4. Addtion /おまけ
android vnc server setteing / android vnc server 設定
  android VNC was downloaded.
android VNCをダウンロードします。
https://goo.gl/2jxVAg
A zip file is defrosted, file is putted on desktop.
zipを解凍して、androidvncserverをデスクトップに置きます

ターミナルを立ち上げ、下記コマンドを打ちます 
  
    # adb kill-server
    # adb root
    # adb remount
    # adb push Desktop/androidvncserver /system/bin
    # adb shell
    > chmod 755 /system/bin/androidvncserver
    > exit
  -----these steps first Preparations. / ここまで初回のみの準備。 ------


VNC Operation / VNC 操作
  VNC operation is performed. / VNC操作を行います。 terminal was opened. / ターミナルを開きます。
command was typing & excute / コマンドを入力、実行します。
  
    # adb shell
    > /system/bin/androidvncserver -p password
  one more terminal was opened. / もう一つターミナルを開きます。
command was typing & excute / コマンドを入力、実行します。
  
    # adb forward tcp:5901 tcp:5901
  Finder was opened, menu [move] > [server]
macのFinderのメニュー [移動] > [サーバーへ接続] と開き
 
input server address : vnc://localhost:5901
サーバーアドレスを入力します：vnc://localhost:5901

input passwor is [password] / パスワードに [password]と入力します。
if server connect was succeed, follow
ing images / 接続が成功すると下図のようになります。


Conclusion / 結論
 
  • It's late / heavy to use it daily.
  • 日常的に使うには遅い／重い
  if you will need to setteing, when you don't have display and mouse, these steps try it.
もしディスプレイやマウス無しで、設定を行いたい時に試してみて下さい。


Addtion /おまけ
 


新訳：ADB Helperをハックしてみた（まとめ）

Firefox Firefox OS JavaScript Mozilla

この記事は『Firefox OS / B2G OS Advent Calendar 2016』 25日目の記事です。
Firefox OS で、使用されている「ADB Helper」を再度まとめ直してみました。

目次

 

今回は、adb-helper のまとめをしていきたいと思います

  1. フォルダ内のファイル構成
  2. 今回のまとめ
  3. 関連記事
  4. 今年のAdvent Calendar
フォルダ内のファイル構成
  [ 解凍フォルダ内のjsファイル群 ]
windows
mac
linux
install.rdf
○
○
○
main.js
○
○
○
adb.js
○
○
○
adb-client.js
○
○
○
adb-running-checker.js
○
○
○
adb-socket.js
○
○
○
bootstrap.js
○
○
○
scanner.js
○
○
○
device.js
※1
※1
※1
devtools-import.js
※1
※1
※1
devtools-require.js
※1
※1
※1
fastboot.js
※1
※1
※1
subprocess.js
※2
※2
※2
subprocess_worker_win.js
※3
※3
※3
subprocess_worker_unix.js
※4
※4
※4
  ※1 : version 0.7.1 時点では無かったファイル
※2 : version 0.7.1 時点で有ったファイル
※3 : version 0.7.1 時点で有ったファイル、Windows用ファイル
※4 : version 0.7.1 時点で有ったファイル、mac，linux用ファイル

OS毎に使用されるファイルが有る事が確認できます。



今回のまとめ
  subprocess.js,subprocess_worker_(win/unix).js は、アドオンのバージョンアップにより device.js,devtools-import.js,devtools-require.js,fastboot.js 等の モジュールに置き換わっていますので、ハックは割愛します。

最初に投降した「ADB Helperをハックしてみた（前篇）」が2014年11月6日ですから 完遂するのに 2 年以上経っている事になります。

逆に2 年以上経っているからこそ、モジュールの効率化が
どのように進化を遂げているかが分かりました。

バージョン 0.7.* の時は、Windows 用と mac,Linux用でjs ファイルが別だったのが
現在は全ての OS で同じ js ファイルを使われている事からも分かります。

ADB Helper をハックしてみて、Android SDK 無しで簡単に Firefox OS 端末(Fx0, Flame)や Open Web Board, CHIRIMEN ボード Echigo Rev.1 に接続して Web 開発と 同じ要領で、デバイスへアプリをインストールする仕組みを理解する事が出来ました。

これまでの投稿記事で、記載内容に誤りや補足、アドバイスなど頂ければ幸いです。


関連記事


今年のAdvent Calendar


去年のAdvent Calendar

新訳：ADB Helperをハックしてみた（fastboot.js）

Firefox Firefox OS JavaScript Mozilla

この記事は『Firefox OS / B2G OS Advent Calendar 2016』 24日目の記事です。
Firefox OS で、使用されている「ADB Helper」を再度まとめ直してみました。

目次

 

前回、新訳：ADB Helperをハックしてみた（devtools-require.js）に引き続き、
adb-helperをハックしていきたいと思います

  1. フォルダ内のファイル構成
  2. fastboot.js
  3. 予備知識
  4. モジュール構成
  5. 今回のまとめ
  6. 関連記事
  7. 今年のAdvent Calendar
フォルダ内のファイル構成
  [ 解凍フォルダ内のjsファイル群 ]
windows
mac
linux
install.rdf
○
○
○
main.js
○
○
○
adb.js
○
○
○
adb-client.js
○
○
○
adb-running-checker.js
○
○
○
adb-socket.js
○
○
○
bootstrap.js
○
○
○
scanner.js
○
○
○
device.js
※1
※1
※1
devtools-import.js
※1
※1
※1
devtools-require.js
※1
※1
※1
fastboot.js
※1
※1
※1
subprocess.js
※2
※2
※2
subprocess_worker_win.js
※3
※3
※3
subprocess_worker_unix.js
※4
※4
※4
  ※1 : version 0.7.1 時点では無かったファイル
※2 : version 0.7.1 時点で有ったファイル
※3 : version 0.7.1 時点で有ったファイル、Windows用ファイル
※4 : version 0.7.1 時点で有ったファイル、mac，linux用ファイル

OS毎に使用されるファイルが有る事が確認できます。


fastboot.js
  前回に引き続き、devtools-import.js ファイルをハックしていきたいと思います。
  ご覧の通り、各OSでの差異はありません。
2014.11.06 時点では、このファイルは存在していませんでした。
モジュールは下図の通りです



モジュール構成
  上記予備知識をもとにハックしていきます！
ファイル位置
処理概要
1 ～ 33 行目
  • コメント
    fastboot utility をラッパーしたものです。
  • コメント
    （アドン SDK 使って、アドオンをビルドした。）
    CommonJS モジュールとしてロードされているかどうかにかかわらず
    CommonJS モジュールない時、これはJavaScriptモジュールである。
  • Cc, Ci, Cu, Cr にchrome ライブラリ読み込み
  • subprocess にライブラリ読み込み
  • file にライブラリ読み込み
  • XPCOMABI にライブラリ読み込み
  • setTimeout にライブラリ読み込み
  • client を用いて、adb-client.js を読み込み
  • Cu に Services.jsm をインポート
  • 変数 promise に Promise.jsm を代入
  • 変数：promise を定義
  • 変数：promise に Promise オブジェクトを代入
  • Devices に Devices.jsm 読み込み
  • 変数：fastbootTimer を定義
  • 変数：fastbootDevices を定義
35 ～ 265 行目
Fastboot オブジェクト
  • fastbootDevices() プロパティ
  • fastboot_init() 関数
  • fastboot_do() 関数
  • fastboot_startPolling() 関数
  • fastboot_stopPolling() 関数
  • fastboot_devices() 関数
  • fastboot_getvar() 関数
  • fastboot_flash() 関数
  • fastboot_reboot() 関数
267 ～ 285 行目
  • Fastboot.init() 関数を実行します。
  • FastbootDevice() 関数
    デバイス ID を格納します。
  • FastbootDevice オブジェクト
  Fastboot オブジェクトが、かなりのボリュームなので、下表にまとめました。
関数名
処理概要
fastbootDevices() プロパティ
  • get プロパティ　変数：fastbootDevicesに格納します。
  • set プロパティ　変数：fastbootDevicesにセットします。
fastboot_init() 関数
  • platform に Services.appinfo.OS を代入
  • uri に resource://adbhelperatmozilla.org/ 代入
  • platform の条件分岐（OS 毎）
  • 上記結果を元に Services.io.newURI 用いて url を取得
  • 各判定ごとにログを出力します。
fastboot_do() 関数
  • Deferred オブジェクト deferred を promise.defer() 用いて生成
  • 配列変数：out_buffer，err_buffer を定義
  • 変数：serial が string の場合、配列にを変数：serial 追加します。
  • 変数：binary に this._fastboot を代入します。
  • callPayload オブジェクト
    • command オブジェクトに変数：binary を代入
    • arguments オブジェクトに引数：args を代入
    • stdout() 関数　配列変数：out_buffer に
      引数：data を追加します。
    • stderr() 関数　配列変数：err_buffer に
      引数：data を追加します。
    • deferred.resolve() 関数 を実行します。
  • subprocess.call() 関数 を実行します。
  • deferred を返します。
fastboot_startPolling() 関数
  • 変数：fastbootTimer != null の場合、処理をスルーします。
  • doPoll オブジェクト
    • devices() 関数 を実行します。
    • 配列変数：added，removed を定義
    • devices.sort() 関数とthis.fastbootDevices.sort() 関数の
      実行結果が同じの場合、処理をスルーします。
    • this.fastbootDevices.indexOf が -1 の場合
      配列変数：added にプッシュします。
    • devices.indexOf が -1 の場合
      配列変数：removed にプッシュします。
    • this.fastbootDevices オブジェクトに devices を
      オブジェクト代入
    • 配列変数：added 分繰り返します。
      デバイス情報を登録します。
    • 配列変数：removed 分繰り返します。
      デバイス情報を登録解除します。
  • 変数：fastbootTimer に 2 秒間隔で、タイマー用
    doPoll オブジェクトを登録します。
fastboot_stopPolling() 関数
  • 変数：fastbootTimer を初期化します。
fastboot_devices() 関数
  • do() 関数 を実行します。
  • doPoll オブジェクト
    • 処理実行が成功の場合
      変数：devices にプッシュします。
      変数：devices を返します。
    • 処理実行が失敗の場合
      空の配列変数を返します。
fastboot_getvar() 関数
  • do() 関数 を実行します。
  • 処理実行が成功の場合
    • 変数：line に加工し、格納します。
    • 変数：line.indexOf != -1 の場合、変数：line を返します。
  • 処理実行が失敗の場合、空文字を返します。
fastboot_flash() 関数
  • do() 関数 を実行します。
  • 処理実行が成功の場合
    • flashProgress オブジェクトを定義
    • 変数：first を定義
    • 変数：first 結果毎に条件分岐
    • flashProgress オブジェクトを返します。
  • 処理実行が失敗の場合、空文字を返します。
fastboot_reboot() 関数
  • do() 関数 を実行します。
  FastbootDevice オブジェクトを下表にまとめました。
関数名
処理概要
type() プロパティ
"fastboot" 代入
devices() 関数
Fastboot.devices() 関数にバインド
flash() 関数
Fastboot.flash() 関数にバインド
getvar() 関数
Fastboot.getvar() 関数にバインド
reboot() 関数
Fastboot.reboot() 関数にバインド
startPolling() 関数
Fastboot.startPolling() 関数にバインド
stopPolling() 関数
Fastboot.stopPolling() 関数にバインド


今回のまとめ
  今回は、モジュールの初回起動時の動作をハックしました。 次回は、ADB Helper のまとめをする予定です。


関連記事


今年のAdvent Calendar


去年のAdvent Calendar

新訳：ADB Helperをハックしてみた（devtools-require.js ）

Firefox Firefox OS JavaScript Mozilla

この記事は『Firefox OS / B2G OS Advent Calendar 2016』 23日目の記事です。
Firefox OS で、使用されている「ADB Helper」を再度まとめ直してみました。

目次

 

前回、新訳：ADB Helperをハックしてみた（devtools-import.js）に引き続き、 adb-helperをハックしていきたいと思います

  1. フォルダ内のファイル構成
  2. devtools-require.js
  3. 予備知識
  4. モジュール構成
  5. 今回のまとめ
  6. 関連記事
  7. 今年のAdvent Calendar
フォルダ内のファイル構成
  [ 解凍フォルダ内のjsファイル群 ]
windows
mac
linux
install.rdf
○
○
○
main.js
○
○
○
adb.js
○
○
○
adb-client.js
○
○
○
adb-running-checker.js
○
○
○
adb-socket.js
○
○
○
bootstrap.js
○
○
○
scanner.js
○
○
○
device.js
※1
※1
※1
devtools-import.js
※1
※1
※1
devtools-require.js
※1
※1
※1
fastboot.js
※1
※1
※1
subprocess.js
※2
※2
※2
subprocess_worker_win.js
※3
※3
※3
subprocess_worker_unix.js
※4
※4
※4
  ※1 : version 0.7.1 時点では無かったファイル
※2 : version 0.7.1 時点で有ったファイル
※3 : version 0.7.1 時点で有ったファイル、Windows用ファイル
※4 : version 0.7.1 時点で有ったファイル、mac，linux用ファイル

OS毎に使用されるファイルが有る事が確認できます。


devtools-require.js
  前回に引き続き、devtools-import.js ファイルをハックしていきたいと思います。
  ご覧の通り、各OSでの差異はありません。
2014.11.06 時点では、このファイルは存在していませんでした。 モジュールは下図の通りです


予備知識
  DevTools/Hacking https://wiki.mozilla.org/DevTools/Hacking


モジュール構成
  上記予備知識をもとにハックしていきます！
ファイル位置
処理概要
1 ～ 29 行目
  • 定数：devtools に devtools-import.js を用いて、
    DevTools ライブラリ読み込み
  • コメント
    Firefox 44 以降のバージョンは、再構成されています。
    以下を参照してください
    https://bugzil.la/912121
  • devtools 用配列変数：ID_RENAMES を定義します。
37 ～ 55 行目
devtoolsRequire() 関数
  • devtools.require() 関数を実行し、結果を返します。
  • 例外発生時は以下の処理を行います。
    • コメント
      Firefox 43 以前のバージョンは、リネームされています。
    • ID_RENAMES の配列分繰り返します。
    • リネームします。
    • devtools.require() 関数を実行し。結果を返します。


今回のまとめ
  今回は、devtools-require モジュールをインポートした時の処理をハックしました。 次回は、fastboot.js をハックする予定です。


関連記事


今年のAdvent Calendar


去年のAdvent Calendar