さわらブログ

さわら(@xhiroga)の技術ブログ

React Nativeのフォントは結局何が使えんねん一次調査

React Nativeでシステムにもともと入っているフォントを指定するにはどうしたらいいのか、試行錯誤したメモ。
めっちゃエラー喰らいました。
f:id:hiroga_cc:20180812155758p:plain

実験方法

以下の指定方法で、fontFamilyの値を入れ替えてみました。

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'System' }}>テスト</Text>

結論

普通に調べたら使えるフォント一覧が見つかりました...が、'San Francisco'だけはなぜか指定できませんでした。 github.com

それを踏まえて、うまくいく指定とダメな指定。

うまくいく指定

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'System' }}>システムフォント</Text>
// この指定方法でSan Franciscoが使えます。

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'Hiragino Mincho ProN' }}>ヒラギノ明朝</Text>
// 上記のフォント一覧は基本的にOK(San Francisco以外?は)

ダメな指定

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'San Francisco' }}>サンフランシスコ</Text>
// なぜかエラーになります。

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'HiraKakuProN-W3' }}>ヒラギノ角ゴ</Text>
// ヒラギノ角ゴはiOS SDK9以降から削除されている...っぽい?
// 追記: ヒラギノ角ゴの英字表記が'Hiragino Sans'になったことが原因のようです。

VSCodeの設定をgit/Githubで管理する

Visual Studio Codeのキーバインディングスニペットを、一括してgitで管理+GitHubに公開しました。
f:id:hiroga_cc:20180811111640p:plain

VSCodeの設定はUserフォルダ以下にまとまっているので簡単です!

手順

  1. ローカルのVSCodeのgitリポジトリを作成
  2. Githubでリモートリポジトリを作成
  3. .gitignoreを設定し、コミットしてプッシュ

1. ローカルのVSCodeのgitリポジトリを作成

Macの場合)ターミナルで以下のディレクトリまで移動し、git initします。
~/Library/Application Support/Code/User

f:id:hiroga_cc:20180811111943p:plain ※.gitignoreはこの後作ります。

2. Githubでリモートリポジトリを作成

普通にリポジトリを作成します。ローカルリポジトリにファイルがあるので、READMEは作らないほうがいいですね。

3. .gitignoreを設定し、コミットしてプッシュ

.gitignroeでworkspaceStorageを無視します。
完了したらコミットして、VSCodeリポジトリにプッシュ!

まとめ

いきなりMacが起動しなくなった場合とか、普段とは違う環境で作業するときに備えてみました。
ちなみに私のVSCodeの設定は以下のリポジトリです。よければご参考にどうぞ!

github.com

ハッカソンからブラッシュアップして #MFTokyo2018 参戦した感想と反省!

Maker Faire Tokyo 2018(2018/08/04~05)に「IoT仮想通貨ゴミ箱」チームとして出展してきました。

f:id:hiroga_cc:20180807084101j:plain 写真はRaspberry Pi もくもく会のみなさんと。

実際に出展してみて、来場者より出展者の方が絶対楽しい!と思ったのでシェアします。

IoT仮想通貨ゴミ箱について

蓋の裏側のWebカメラビットコインウォレットのQRコードを撮影し、ゴミが捨てられたらウォレットにビットコインを振り込むプロダクトです。お祭りなどでゴミをポイ捨てせずに捨てた人にクーポンとかあげたいな、という考えからスタートしました。


※ 解説にはBCHとありますが、BTCの誤りです(というか、BCHに直そうと思っていたけど時間がなかった)

リポジトリはこちら。
github.com

感想

出会いがあって刺激になる

自分の展示があると、自分のプロダクトに興味がある人が向こうからやって来てくれます!

例えば、仮想通貨関連サービスを運営している社長さんが見に来たりしました。

仮想通貨周りのサービスの仕組みがよくわかっていない人(結構います、取引所とウォレットの違いがあいまいな人とか)と話して理解してもらうのも、ビットコインを布教しているみたいで楽しかったですね。

ハッカソンの友達に会えて楽しい!

Startup WeekendやMashup Awards、Space App Challenge、ショッカソンなどなど...
色々なハッカソンの運営者・参加者さんと再開できて楽しかったです。

写真はStartup Weekendでご一緒した武村さんと、今回知り合った安藤さん。広島のコミュニティからの参戦。

反省

次は自分のこだわりを見せつけたい

ぶっちゃけハッカソン後の勢いで申し込んだので、技術的なこだわりとか自分の趣味とか十分に込められなかったのが悔しい!
来てくれたお客さんにも申し訳ないので、次は純粋に自分の趣味からスタートしたいな。

会場の電波が悪いので、API叩く系は相性が悪い

ビットコインの振込のためにインターネットに接続しなきゃだったんだけど、そもそも電波が繋がらなかった。
(実は内部でもエラーが起きてたんだけど...)
そのほか、MacbookからRaspberry Piへのssh接続ができなかったり、普段のハッカソンとは違う技術が求められてるな...と感じました。

まとめ

めっちゃ面白いし最高の機会なので来年も絶対出たいけど、次は自分のこだわりを見せるぞ!と思った次第です!

ECRへのdocker pushが"no basic auth credentials"で失敗すると思ったら、普通に手順間違いだった件

AWSのECRにDockerコンテナをpushする仕組みって、awscliツールを使ってdocker cliがログインするためのtokenを発行
→ そのtokenを使ってdocker cliでログイン、という流れになっています。

そのためのaws ecr get-loginなのですが、私はこの記述を読み飛ばしており... f:id:hiroga_cc:20180803180325p:plain

延々とno basic auth credentialsで怒られていました。笑 f:id:hiroga_cc:20180803180850p:plain

SQL初心者に贈る、自分のブラウザ閲覧履歴をSQLで見るためのセットアップ!

SQLを勉強するには手元で書いてみるのが第一だと思いますが、そもそもデータベースを用意するのが面倒ですよね。
実はGoogle Chromeなどのブラウザは、パソコン内部にSQLiteというDBを持っています!
これをSQLクライアントと繋げば自宅でもSQLの練習ができるってわけです!

f:id:hiroga_cc:20180801220245p:plain 以下、手順を解説します。

手順

  1. SQLクライアントの導入
  2. SQLiteのセットアップ
  3. 実際にSQLを発行

1. SQLクライアントの導入

なんでも大丈夫ですが、ここではDBeaverをオススメします。
dev.classmethod.jp

2. SQLiteのセットアップ

まずはSQLiteのパスを取得します。
(以下はGoogle Chromeの場合です。FirefoxSafariの場合はご自分で調べてください。)

History(拡張子なし)というファイルがDBです。私の場合は以下のパスにありました。
/Users/hiroaki/Library/Application Support/Google/Chrome/Default/History

次にコネクションを設定して、セットアップは完了です。
f:id:hiroga_cc:20180801215508p:plain

※注意
以下のような表示が出たら、Google Chromeを終了してみるといいかもです。
f:id:hiroga_cc:20180801215650p:plain

3. 実際にSQLを発行

SQLを発行する前に、テーブルがたくさんあるので中身を見てみるのがいいかも知れませんね。 f:id:hiroga_cc:20180801215911p:plain

SQLを自前で発行しなくても、右クリックして、"Read data in SQL console"で表示できます。
f:id:hiroga_cc:20180801220135p:plain

テーブルの中身がだいたい分かったら、好きなSQLを打ってみるのがよいと思います。
冒頭のSQLはこんな感じでした。

SELECT kst.term, datetime(v.visit_time/1000000-11644473600,'unixepoch','localtime') as visit_time
FROM keyword_search_terms as kst
inner join visits as v
on kst.url_id = v.url
order by v.visit_time DESC;

まとめ

こういう身近なところから勉強できたほうが楽しいですよね。
他にも教材ややり方ご存知の方いらっしゃいましたら、ぜひ教えてください。

久しぶりにOneNoteにアクセスしたら「申し訳ございません。現在、ノートブックを取得できません。後でもう一度お試しください」と表示される

久しぶりにOneNoteにアクセスしたら、なぜかノートが開けません。
こんなメッセージが表示されました。
「申し訳ございません。現在、ノートブックを取得できません。後でもう一度お試しください」 f:id:hiroga_cc:20180728205655p:plain

Microsoftアカウントを長期間使わないとOneDriveのファイルが凍結されてしまうらしく、その中にファイルを保存しているOneNoteも影響を受ける、ということのよう。
画面の指示通りにOneDriveのファイルを解凍すればOKです。 f:id:hiroga_cc:20180728205858p:plain

私の場合は数分で見られるようになりました。ファイルがほとんどなかったから早かったのかな?

DBeaverでHerokuのPostgreSQLにアクセスする時に、自分以外のDatabaseを非表示にする

HerokuのPostgreSQLをDBeaverでスッキリ見るための方法です。
f:id:hiroga_cc:20180724161547p:plain

やり方

1: Connection Settingsから Show non-default databasesのチェックを外す。
f:id:hiroga_cc:20180724161631p:plain

2: Connection Settings → General からDefault Schemaに自分のDatabaseの名前を入力する。
f:id:hiroga_cc:20180724161822p:plain

以上の2ステップで完了です。