最近のこと
日記的な記事
かなり久しぶりに日記らしい日記。12月を前にして、アドベントカレンダーがいよいよ始まる季節なので、ちょっとずつ記事を書くモチベーションを上げていこうと思います。
アドベントカレンダー
ちなみに以下の2つのアドベントカレンダーに参加しました。
一つ目のyurueのカレンダーは、yurueのメンバーが立ち上げてくれたので張り切って5,6つくらいエントリー・・・。ポエムも含まれるので、半分以上の記事はこっちのブログに書いていくつもりです。
「宣言効果」的なものを狙って、ここで宣言しておきます。
開発合宿をやった
11月の23~26日の3泊日程で、yurueのメンバーでアプリ開発合宿をしました。
詳しい内容は、yurue Advent Calendarの12月4日の枠で書きます。当記事のアイキャッチ画像は合宿で泊まった"蔵"です。今回はAirbnbを利用して、民宿で開催という形になりました。
感想を端的に言うと、とっても楽しくて、充実した時間になりました。こういう催しは、「合宿やってみる?」「やりましょ!」というノリがあるからこそ出来るものだと思うし、そういう空気感がある今のチームが好きです。
年末に向けて
個人的にやっていかねばならないことはたくさんあるけど、コツコツ進めていきます。
- 研究活動
- yurueのアプリ開発
- アルバイト
- 某ビジネスコンテストへ応募したプランをブラッシュアップ
- 内定先のイベント参加
そんな感じで、日記です。
Sketch - データ構造
これまでSketchを「雰囲気で」使ってきた部分が大きく、実際にSketchを使いこなせていない感がありました。 そこで、Sketch入門書を手に取りながら、実践し、記事にまとめていきたいと思います。 まずは、Sketchのシステムがどういったデータ構造でデータが格納されているのかを知りたいと思います。
Sketchのデータ構造
Sketchはどのようにしてデータ構造を保っているのかを、概念的に理解していきます。
最初に大きくどういった構造になっているのかを図で説明したいと思います。
- まず、Sketchにて新規ファイルを作成すると
sample.sketch
というように拡張子「.sketch」でファイルが保存されます。 - その下に「Page」があります。実質的な最上位の概念です。目に見えるものではなく、次の概念である「アートボード」をまとめるためのものです。
- 次に「アートボード」があり、これが作業スペースとなり、例えば「iPhone 8 plus」のサイズであったり、「A4用紙」であったりサイズも任意のものに設定できます。
- 次にあるのが「レイヤー」です。これはテキスト、画像、シェイプ(円形や四角などの部品)などのオブジェクトの重なりを制御できたりする概念です。
- そして、UIを形作る各オブジェクトがあります。
Sketchの特徴的な部分は、アプリであれば、「ホーム画面」「マイページ画面」「設定画面」などのアートボードに相当する単位のものを、「ページ」としてまとめられるところにあります。
参考
- 作者: 吉竹遼
- 出版社/メーカー: ビー・エヌ・エヌ新社
- 発売日: 2017/05/23
- メディア: 単行本
- この商品を含むブログを見る
Adobe学割 - Illustrator 単体プランからフォトプランへ無料で切り替える
結論から言うと、イラレプランからフォトプランへの切り替えはWeb上のAdobeIDのメニューからはできず、アドビカスタマーサポートへ電話することで可能でした。
イラレプランを解約したかった
1年ほど前からAdobeの学割を利用してIllustratorを利用しています。 Webやアプリデザインの際に利用する等していましたが、最近はSketchなどを使うことも多く、あまり利用していなかったので「解約しようかな」と考えたりしていました。
年間プランで契約している場合、契約満了月までに解約をしようとすると、残っている期間の月額料金の半額が解約金として請求されます。自分の場合はあと半年残っていたので、それなりの金額に・・・。このこと自体は了承した上で契約しているので仕方がないのですが、イマイチ解約に踏み切れない要因になってました。(以後、ぐだぐだ半年の間、ほぼ使わないのに契約し続けることに…)
フォトプランへの切り替えはWeb上でできない
最近、ミラーレス一眼を手に入れて、よく写真を撮るようになりました。現像とか写真の整理にAdobeのLightroomを使いたいなと思っていたところ、こちらも学割があることを知りました。なお、契約料金もIllustratorのプランと同額です。
ということもあり、「イラレプランから解約金無しで、フォトプランへ切り替えられないの?」と疑問に思い、ネットで色々調べましたが同様のケースで切り替えられたという記事などがなく、「そんな都合の良いことできないか」と自分で納得してました。
一応、AdobeIDのページで「プランの切り替え」も試みました。が、「コンプリートプラン」への切り替えは可能な一方で、「フォトプランへの切り替え」の選択肢がそもそもないという状態でした。(2017年9月現在)
アドビカスタマーサポートへ電話する
上記リンクのフォームにて「アカウントに関する問題」→「プランの変更・アップグレード」→「電話サポート」の手順で、サポートへ繋がりました。
問い合わせた内容としては、「現在、学割でイラレプランを契約しているが、使っていないのでフォトプランへ切り替えたいが、これを無料でできるか」という感じです。
意外とあっさり「切り替えなら解約金なしで来月から切り替えられますよ」とのことでした。
その後、その場でイラレの年間プラン解約の手続きをしていただき、フォトプランの新たな契約は別途契約窓口のサポートへ引き継がれ、無事、スムーズにフォトプランへ乗り換えることができました。
さっそく、Lightroomいじりまくろうかなと! 以上です。
MacbookPro - 勝手にクリック(連打)される現象の対処
勝手にクリックされる現象に対処する
一応、再現するスペックのMacbookProは以下です。 通常、トラックパッドを使ってカーソル移動やクリックを行っています。
- MacBookPro(13-inch, 2016)
- macOS Sierra 10.12.6
結論から言いますと、「トラックパッドの付着した皮脂が原因による動作不良」でした。すみません。少し汚い話ですが、毎日触っているとどうしても防げないところではあります。
対処法としては、除菌ウェットティッシュなどで軽く拭くことで解決します。
当初のこの現象を調べてみたところ、「アプリケーションの再起動」「macOS自体の再起動」「Preferencesフォルダ内のマウス関連ファイルの削除(初期化)」などが対処法として挙げられている中で、あまり「掃除すると良い」という声がなかったので、記事にしてみました。
週一くらいでクリーニングクロスで拭いてはいたのですが、それでは少し不十分ということで、これからはたまにウェットティッシュでさっと拭くのも習慣にしていこうと思います。
- 出版社/メーカー: 大王製紙
- 発売日: 2010/01/22
- メディア: ヘルスケア&ケア用品
- 購入: 5人 クリック: 12回
- この商品を含むブログを見る
エレコム クリーニングクロス 大判サイズ AVD-TVCCMN
- 出版社/メーカー: エレコム
- 発売日: 2010/06/17
- メディア: エレクトロニクス
- クリック: 3回
- この商品を含むブログを見る
Rails5 - 404/500ページをカスタマイズする
デフォルトの404/500ページをカスタマイズしたい
何かのWebサービスを利用していて、404や500を返された時、「このサービス、Railsで作られているんだ」と思わぬ発見があったりします。
エラーステータス: 404
エラーステータス: 500
このままでも特段問題はないのですが、少し素っ気ないのと英語なのでユーザーを戸惑わせてしまう原因にもなるため、カスタマイズしたいと思います。
カスタマイズ手順
/public/
ディレクトリに以下の静的htmlファイルがあるためこれらをすきなデザインに変更するだけです。
404.html
500.html
- (
422.html
もあります)
html形式の静的ページなので、画像パスなどは適切に対応する必要があります。 文言だけ、かんたんな日本語に変更したものが以下になります。
これだけでも、日本人ユーザー向けのサービスであれば親切になりました。
いろんなWebサービスの404ページデザインを調べてみる
cookpad
サービスの色いっぱいで、安心感があります。
esa.io
マネーフォワード
シンプルです!白紙(404)って感じがします。
Airbnb
システムも予期せぬリクエストに「びっくりした」という感じが表現されているんでしょうか。イラストがかわいいです。
参考
Sketch - テキストをSVGでExportする
なぜSVGなのか
最近、Webページを作成するときのロゴはなるべくSVGを使用するようにしています。 たとえば、自分が所属しているチームのWebサイトを新しくする際にロゴも一緒に新調したのですが、SVGで出力したロゴを表示しています。
拡大してもきれい
SVGは、Scalable Vector Graphicsの略称であり、XML形式の2次元ベクターイメージ用の画像フォーマット記述言語です。 また、ファイルサイズが小さいのも特徴であり、画像のクオリティを維持したまま拡大や縮小に対応できます。
上記の例のように、拡大してもビットマップ形式の画像に見られるジャギー(階段状のギザギザ)が発生しません。 様々なデバイスの表示に柔軟に対応できるので、レスポンシブデザインがトレンドになり始めたころからよく使われるようになったようです。
SketchでデザインしたテキストロゴをSVGで出力する
今回は、Takizawa Hackathon - Facebookページのシンプルなテキストロゴを出力してみます。後ほど、Webサイトを作成した際にヘッダーロゴとして使用します。
「Convert to Outlines」する
このまま、テキストをSVGで出力する前に、テキストレイヤーをベクターシェイプに変換しましょう。この作業をすることで、テキストを編集することができなくなりますが、あらゆるブラウザーで同一の表示とするために変換する方が良いと思います。
方法は簡単で、上部の [Layout] メニューから [Convert to Outlines] を選択するだけです。
変換が完了すると、各文字がベクターシェイプに変換されたことが分かります。
青くなっているのがアウトラインです。
SVGで出力する
あとは、右のサイドバーの一番下のExportメニューからFormat形式をSVGに選択して、出力すれば完了です。
参考
Rails5 - utf8mb4(主にiOSの絵文字)に対応する
実行環境
文字コードのutf8mb4に対応する
今回、主にiOSの絵文字に対応するためにutf8mb4
に変更する必要がありました。MySQLであればバージョン5.5以降でutf8mb4
をサポートしています。
以下がそのために行った設定です。
config/database.yml
を設定する
default: &default adapter: mysql2 pool: 5 timeout: 5000 encoding: utf8mb4 collation: utf8mb4_general_ci socket: /var/lib/mysql/mysql.sock
今回、重要なのはencoding
とcollation
です。それぞれの大まかな意味としては、以下のとおりです。
MySQL自体の文字コード設定を確認する
show variables like 'char%';
で現在の全体的なMySQLの文字コード関連の設定を参照できます。
MariaDB [(none)]> show variables like 'char%'; +--------------------------+----------------------------+ | Variable_name | Value | +--------------------------+----------------------------+ | character_set_client | utf8 | | character_set_connection | utf8 | | character_set_database | latin1 | | character_set_filesystem | binary | | character_set_results | utf8 | | character_set_server | latin1 | | character_set_system | utf8 | | character_sets_dir | /usr/share/mysql/charsets/ | +--------------------------+----------------------------+ 8 rows in set (0.00 sec)
utf8mb4
には対応できていないので、設定する必要があります。
文字コードをutf8mb4
に変更する
/etc/my.cnf.d/server.cnf
にあたる設定ファイルを編集します。
$ sudo vi /etc/my.cnf.d/server.cnf
[server] character-set-server = utf8mb4 [mysqld] character-set-server = utf8mb4 plugin-load = handlersocket.so [client] default-character-set = utf8mb4
再起動して、文字コードが反映されたか確認してみます。
$ sudo service mysql stop Shutting down MySQL... SUCCESS! $ sudo service mysql start Starting MySQL.170531 23:11:49 mysqld_safe Logging to '/var/lib/mysql/localhost.localdomain.err'. 170531 23:11:49 mysqld_safe Starting mysqld daemon with databases from /var/lib/mysql SUCCESS! $ mysql -uroot -p MariaDB [(none)]> show variables like 'char%'; +--------------------------+----------------------------+ | Variable_name | Value | +--------------------------+----------------------------+ | character_set_client | utf8mb4 | | character_set_connection | utf8mb4 | | character_set_database | utf8mb4 | | character_set_filesystem | binary | | character_set_results | utf8mb4 | | character_set_server | utf8mb4 | | character_set_system | utf8 | | character_sets_dir | /usr/share/mysql/charsets/ | +--------------------------+----------------------------+ 8 rows in set (0.00 sec)
うまく設定が反映されているのがわかります。character_set_system
がutf8
のままですが、こちらの変数はシステムの使用する文字セットで常にutf8が使用される設定のため問題ありません。
試しにマイグレーションしてみる
今回は新たにマイグレーションしてみることで、utf8mb4
に対応できているかを確認してみます。マイグレーション生成は省略します。
$ rake db:migrate rake aborted! StandardError: An error has occurred, all later migrations canceled: Mysql2::Error: Specified key was too long; max key length is 767 bytes: CREATE UNIQUE INDEX `index_piyo` ON `piyo_tables` (`hoge`, `piyo`) Tasks: TOP => db:migrate (See full trace by running task with --trace)
Mysql2::Error: Specified key was too long; max key length is 767 bytes
といったエラーが出ます。
Mysql2::Error: Specified key was too long; max key length is 767 bytesを解決する
このエラー自体は以下の説明が分かりやすいです。
デフォルトでは最大インデックス長は767バイトですので、UTF8では255文字まで、UTF8MB4では191文字までしかインデックスを張れません。 しかし、こちらはMySQL 5.5.14以降からINNODB_LARGE_PREFIXオプションで最大3072バイトまで拡張できるので、そんなに大きな問題ではないです。
これに対応するために、MySQLの設定ファイルにINNODB_LARGE_PREFIXオプションを追加し、インデックスのキープレフィックスを拡張します。
$ sudo vi /etc/my.cnf # 以下を追加 [mysqld] innodb_file_format = Barracuda innodb_file_per_table = 1 innodb_large_prefix
主に3つの指定をしています。
innodb_large_prefix
を有効にする- 上記設定を有効にするために
innodb_file_format
をBarracuda
にするinnodb_file_per_table
を有効にする
- 上記設定を有効にするために
設定後、MySQLを再起動します。
$ sudo service mysql stop Shutting down MySQL.. SUCCESS! $ sudo service mysql start Starting MySQL.170531 23:24:12 mysqld_safe Logging to '/var/lib/mysql/localhost.localdomain.err'. 170531 23:24:12 mysqld_safe Starting mysqld daemon with databases from /var/lib/mysql SUCCESS!
これでおそらく、インデックスのキープレフィックスが拡張できました。
テーブル作成時にオプションを追加するようにパッチを当てる
kamipoさんのモンキーパッチを使い、テーブル作成時のオプションを指定します。
config/initializers/ar_innodb_row_format.rb
ActiveSupport.on_load :active_record do module ActiveRecord::ConnectionAdapters class AbstractMysqlAdapter def create_table_with_innodb_row_format(table_name, options = {}) table_options = options.merge(:options => 'ENGINE=InnoDB ROW_FORMAT=DYNAMIC') create_table_without_innodb_row_format(table_name, table_options) do |td| yield td if block_given? end end alias_method_chain :create_table, :innodb_row_format end end end
再度、マイグレーションしてみる
$ rake db:migrate:reset Dropped database 'piyo_development' Dropped database 'piyo_test' Created database 'piyo_development' Created database 'piyo_test' == 20170531130735 CreatePiyos: migrating ========================= -- create_table(:piyos) -> 0.0109s == 20170531130735 CreatePiyors: migrated (0.0191s) ================
完了できました。
db/schema.rb
にダンプされたテーブルを見てみる
ActiveRecord::Schema.define(version: 20170531130735) do create_table "piyos", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=DYNAMIC" do |t| 省略 end end
うまく設定ができています。
以上でutf8mb4
対応は完了です。