22時に寝ようと思って2時に寝る。

備忘録や日記を書いてます。きょうは早く寝よう。

Sketch - データ構造

Sketch UIデザイン 備忘録

これまでSketchを「雰囲気で」使ってきた部分が大きく、実際にSketchを使いこなせていない感がありました。 そこで、Sketch入門書を手に取りながら、実践し、記事にまとめていきたいと思います。 まずは、Sketchのシステムがどういったデータ構造でデータが格納されているのかを知りたいと思います。

Sketchのデータ構造

Sketchはどのようにしてデータ構造を保っているのかを、概念的に理解していきます。

最初に大きくどういった構造になっているのかを図で説明したいと思います。

f:id:azuuun:20171116141422p:plain

  • まず、Sketchにて新規ファイルを作成するとsample.sketchというように拡張子「.sketch」でファイルが保存されます。
  • その下に「Page」があります。実質的な最上位の概念です。目に見えるものではなく、次の概念である「アートボード」をまとめるためのものです。
  • 次に「アートボード」があり、これが作業スペースとなり、例えば「iPhone 8 plus」のサイズであったり、「A4用紙」であったりサイズも任意のものに設定できます。
  • 次にあるのが「レイヤー」です。これはテキスト、画像、シェイプ（円形や四角などの部品）などのオブジェクトの重なりを制御できたりする概念です。
  • そして、UIを形作る各オブジェクトがあります。

Sketchの特徴的な部分は、アプリであれば、「ホーム画面」「マイページ画面」「設定画面」などのアートボードに相当する単位のものを、「ページ」としてまとめられるところにあります。

参考

UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド

Adobe学割 - Illustrator 単体プランからフォトプランへ無料で切り替える

備忘録 Adobe

f:id:azuuun:20170909004626p:plain

結論から言うと、イラレプランからフォトプランへの切り替えはWeb上のAdobeIDのメニューからはできず、アドビカスタマーサポートへ電話することで可能でした。

イラレプランを解約したかった

１年ほど前からAdobeの学割を利用してIllustratorを利用しています。 Webやアプリデザインの際に利用する等していましたが、最近はSketchなどを使うことも多く、あまり利用していなかったので「解約しようかな」と考えたりしていました。

年間プランで契約している場合、契約満了月までに解約をしようとすると、残っている期間の月額料金の半額が解約金として請求されます。自分の場合はあと半年残っていたので、それなりの金額に・・・。このこと自体は了承した上で契約しているので仕方がないのですが、イマイチ解約に踏み切れない要因になってました。（以後、ぐだぐだ半年の間、ほぼ使わないのに契約し続けることに…）

フォトプランへの切り替えはWeb上でできない

最近、ミラーレス一眼を手に入れて、よく写真を撮るようになりました。現像とか写真の整理にAdobeのLightroomを使いたいなと思っていたところ、こちらも学割があることを知りました。なお、契約料金もIllustratorのプランと同額です。

ということもあり、「イラレプランから解約金無しで、フォトプランへ切り替えられないの？」と疑問に思い、ネットで色々調べましたが同様のケースで切り替えられたという記事などがなく、「そんな都合の良いことできないか」と自分で納得してました。

一応、AdobeIDのページで「プランの切り替え」も試みました。が、「コンプリートプラン」への切り替えは可能な一方で、「フォトプランへの切り替え」の選択肢がそもそもないという状態でした。（2017年9月現在）

アドビカスタマーサポートへ電話する

helpx.adobe.com

上記リンクのフォームにて「アカウントに関する問題」→「プランの変更・アップグレード」→「電話サポート」の手順で、サポートへ繋がりました。

問い合わせた内容としては、「現在、学割でイラレプランを契約しているが、使っていないのでフォトプランへ切り替えたいが、これを無料でできるか」という感じです。

意外とあっさり「切り替えなら解約金なしで来月から切り替えられますよ」とのことでした。

その後、その場でイラレの年間プラン解約の手続きをしていただき、フォトプランの新たな契約は別途契約窓口のサポートへ引き継がれ、無事、スムーズにフォトプランへ乗り換えることができました。

f:id:azuuun:20170909010914p:plain

さっそく、Lightroomいじりまくろうかなと！ 以上です。

MacbookPro - 勝手にクリック（連打）される現象の対処

備忘録 Mac

勝手にクリックされる現象に対処する

f:id:azuuun:20170707162551j:plain

一応、再現するスペックのMacbookProは以下です。 通常、トラックパッドを使ってカーソル移動やクリックを行っています。

  • MacBookPro(13-inch, 2016)
  • macOS Sierra 10.12.6

結論から言いますと、「トラックパッドの付着した皮脂が原因による動作不良」でした。すみません。少し汚い話ですが、毎日触っているとどうしても防げないところではあります。

対処法としては、除菌ウェットティッシュなどで軽く拭くことで解決します。

当初のこの現象を調べてみたところ、「アプリケーションの再起動」「macOS自体の再起動」「Preferencesフォルダ内のマウス関連ファイルの削除（初期化）」などが対処法として挙げられている中で、あまり「掃除すると良い」という声がなかったので、記事にしてみました。

週一くらいでクリーニングクロスで拭いてはいたのですが、それでは少し不十分ということで、これからはたまにウェットティッシュでさっと拭くのも習慣にしていこうと思います。

エリエール 除菌できるアルコールタオル 本体 100枚入り

エリエール 除菌できるアルコールタオル 本体 100枚入り

エレコム クリーニングクロス 大判サイズ AVD-TVCCMN

エレコム クリーニングクロス 大判サイズ AVD-TVCCMN

Rails5 - 404/500ページをカスタマイズする

Ruby on Rails 備忘録

デフォルトの404/500ページをカスタマイズしたい

何かのWebサービスを利用していて、404や500を返された時、「このサービス、Railsで作られているんだ」と思わぬ発見があったりします。

エラーステータス： 404

https://gyazo.com/356569ff5b74b17de26e105969655ed8

エラーステータス： 500

https://gyazo.com/9742c92e63237d0bf10661fca8b5b794

このままでも特段問題はないのですが、少し素っ気ないのと英語なのでユーザーを戸惑わせてしまう原因にもなるため、カスタマイズしたいと思います。

カスタマイズ手順

/public/ディレクトリに以下の静的htmlファイルがあるためこれらをすきなデザインに変更するだけです。

  • 404.html
  • 500.html
  • （422.htmlもあります）

html形式の静的ページなので、画像パスなどは適切に対応する必要があります。 文言だけ、かんたんな日本語に変更したものが以下になります。

https://gyazo.com/4b278c46a39f5d47d84c378de4f2fd7d

これだけでも、日本人ユーザー向けのサービスであれば親切になりました。

いろんなWebサービスの404ページデザインを調べてみる

cookpad

https://gyazo.com/fe0559e284ed3962590c5baa76696920

サービスの色いっぱいで、安心感があります。

esa.io

https://gyazo.com/c2e91ea1dc12352d3c159e7f7b83f857

こちらも、esa.ioらしいデザインで、かわいいです。

マネーフォワード

https://gyazo.com/fa764775b1d31de08087f837e42517fe

シンプルです！白紙（404）って感じがします。

Airbnb

https://gyazo.com/4ccddc35e648b807404ba2a1028771db

システムも予期せぬリクエストに「びっくりした」という感じが表現されているんでしょうか。イラストがかわいいです。

参考

qiita.com

Sketch - テキストをSVGでExportする

Sketch 備忘録

なぜSVGなのか

最近、Webページを作成するときのロゴはなるべくSVGを使用するようにしています。 たとえば、自分が所属しているチームのWebサイトを新しくする際にロゴも一緒に新調したのですが、SVGで出力したロゴを表示しています。

yurue.xyz

拡大してもきれい

f:id:azuuun:20170620174154p:plain

SVGは、Scalable Vector Graphicsの略称であり、XML形式の２次元ベクターイメージ用の画像フォーマット記述言語です。 また、ファイルサイズが小さいのも特徴であり、画像のクオリティを維持したまま拡大や縮小に対応できます。

上記の例のように、拡大してもビットマップ形式の画像に見られるジャギー（階段状のギザギザ）が発生しません。 様々なデバイスの表示に柔軟に対応できるので、レスポンシブデザインがトレンドになり始めたころからよく使われるようになったようです。

SketchでデザインしたテキストロゴをSVGで出力する

今回は、Takizawa Hackathon - Facebookページのシンプルなテキストロゴを出力してみます。後ほど、Webサイトを作成した際にヘッダーロゴとして使用します。

f:id:azuuun:20170620180607p:plain

「Convert to Outlines」する

このまま、テキストをSVGで出力する前に、テキストレイヤーをベクターシェイプに変換しましょう。この作業をすることで、テキストを編集することができなくなりますが、あらゆるブラウザーで同一の表示とするために変換する方が良いと思います。

方法は簡単で、上部の [Layout] メニューから [Convert to Outlines] を選択するだけです。

f:id:azuuun:20170620183610p:plain

変換が完了すると、各文字がベクターシェイプに変換されたことが分かります。

f:id:azuuun:20170620183701p:plain

青くなっているのがアウトラインです。

SVGで出力する

f:id:azuuun:20170620183707p:plain

あとは、右のサイドバーの一番下のExportメニューからFormat形式をSVGに選択して、出力すれば完了です。

参考

Rails5 - utf8mb4（主にiOSの絵文字）に対応する

備忘録 Ruby on Rails

実行環境

文字コードの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バイトまで拡張できるので、そんなに大きな問題ではないです。

RailsとMySQLでiOSの絵文字に対応(UTF8MB4化)した話 - Akata Works

これに対応するために、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対応は完了です。

参考

CentOS6.8 - MySQL5.1 から MySQL5.6へバージョンアップする

MySQL Ruby on Rails 備忘録

環境

  • CentOS release 6.8 (Final) 64bit

今回はRails5.0のアプリ開発の際に、絵文字（utf8mb4）に対応するためにMySQL5.1からMySQL5.6へのバージョンアップの必要がありました。

既存MySQL5.1を削除する

現在インストールされているMySQLを確認する

# rpm -qa|grep mysql
mysql-libs-5.1.73-8.el6_8.x86_64
mysql-server-5.1.73-8.el6_8.x86_64
mysql-5.1.73-8.el6_8.x86_64
mysql-devel-5.1.73-8.el6_8.x86_64

これらを削除する（今回は開発環境のためバックアップは取っていませんが、必要に応じて削除前に行うようにしてください）

# yum erase mysql-libs-5.1.73-8.el6_8.x86_64 mysql-server-5.1.73-8.el6_8.x86_64  mysql-5.1.73-8.el6_8.x86_64 ysql-devel-5.1.73-8.el6_8.x86_64
...
Removed:
  mysql.x86_64 0:5.1.73-8.el6_8                                  mysql-libs.x86_64 0:5.1.73-8.el6_8                                  mysql-server.x86_64 0:5.1.73-8.el6_8

Dependency Removed:
  MySQL-python.x86_64 0:1.2.3-0.3.c1.1.el6     cronie.x86_64 0:1.4.4-15.el6_7.1     cronie-anacron.x86_64 0:1.4.4-15.el6_7.1     crontabs.noarch 0:1.10-33.el6     mysql-devel.x86_64 0:5.1.73-8.el6_8
  perl-DBD-MySQL.x86_64 0:4.013-3.el6          postfix.x86_64 2:2.6.6-6.el6_7.1

Complete!

ログを見てみるとDependency Removed（依存関係にあったものも削除）されたことがわかりますが、必要に応じて再インストール後に導入してあげてください。

MySQL5.6を導入する

MySQL :: Download MySQL Yum Repository

今回は、MySQL公式のyumリポジトリを導入します。

# yum -y install http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm

正常にリポジトリが導入できたら、さっそくインストールします。

# yum -y install mysql-community-server
# mysqld --version
mysqld  Ver 5.6.36 for Linux on x86_64 (MySQL Community Server (GPL))

導入できました。自動起動設定をして、起動してみます。

# chkconfig mysqld on
# service mysqld start
Starting mysqld:                                           [  OK  ]

MySQLに入ってみます。

# mysql
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.6.36 MySQL Community Server (GPL)

Copyright (c) 2000, 2017, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> exit
Bye

いけました！

余談

Column count of mysql.user is wrong. Expected 43, found 39.

対話形式で初期設定できるmysql_secure_installationを実行するとエラーが起きました。

#  mysql_secure_installation
...

Set root password? [Y/n] Y
New password:
Re-enter new password:
ERROR 1558 (HY000) at line 1: Column count of mysql.user is wrong. Expected 43, found 39. Created with MySQL 50173, now running 50636. Please use mysql_upgrade to fix this error.
root password update failed!
Cleaning up...

これに対しては、MySQLのバージョンアップの際に既存テーブルの互換性をチェックして、必要に応じて「いい感じにやってくれる」らしいmysql_upgradeを実行したら、解決しました。

# mysql_upgrade -p
Enter password:
Looking for 'mysql' as: mysql
Looking for 'mysqlcheck' as: mysqlcheck
Error: Failed while fetching Server version! Could be due to unauthorized access.
FATAL ERROR: Upgrade failed
[root@localhost ~]# mysql_upgrade -p
...
OK
#  mysql_secure_installation
...

All done!  If you've completed all of the above steps, your MySQL
installation should now be secure.

Thanks for using MySQL!

Cleaning up...
#

Railsでのバージョンアップに関わっての対応

そのままではマイグレーションが通りませんでした。

# rake db:migrate
rake aborted!
LoadError: libmysqlclient_r.so.16: cannot open shared object file: No such file or directory - /usr/local/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/extensions/x86_64-linux/2.2.0-static/mysql2-0.4.5/mysql2/mysql2.so
/vagrant/paters_rails/config/application.rb:7:in `<top (required)>'
/vagrant/paters_rails/rakefile:4:in `require_relative'
/vagrant/paters_rails/rakefile:4:in `<top (required)>'
(See full trace by running task with --trace)

これは、gemのmysql2を再インストールすることで、いい感じに設定し直してくれます…が、その前に必要なモジュールであるmysql-develがインストールされてないエラーが出ました。

# gem uninstall mysql2
Successfully uninstalled mysql2-0.4.5
[root@localhost paters_rails]# gem install mysql2
Fetching: mysql2-0.4.5.gem (100%)
Building native extensions.  This could take a while...
ERROR:  Error installing mysql2:
    ERROR: Failed to build gem native extension.

    /usr/local/rbenv/versions/2.2.3/bin/ruby -r ./siteconf20170417-21958-1ruy28h.rb extconf.rb
checking for rb_absint_size()... yes
checking for rb_absint_singlebit_p()... yes
checking for ruby/thread.h... yes
checking for rb_thread_call_without_gvl() in ruby/thread.h... yes
checking for rb_thread_blocking_region()... no
checking for rb_wait_for_single_fd()... yes
checking for rb_hash_dup()... yes
checking for rb_intern3()... yes
checking for rb_big_cmp()... yes
checking for mysql_query() in -lmysqlclient... no
-----
mysql client is missing. You may need to 'apt-get install libmysqlclient-dev' or 'yum install mysql-devel', and try again.
-----
*** extconf.rb failed ***

extconf failed, exit code 1

Gem files will remain installed in /usr/local/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/mysql2-0.4.5 for inspection.
Results logged to /usr/local/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/extensions/x86_64-linux/2.2.0-static/mysql2-0.4.5/gem_make.out

yumでインストールしてあげます。

# yum install mysql-devel
...
Installed:
  mysql-community-devel.x86_64 0:5.6.36-2.el6

Complete!

再度、gemをmysql2をインストール。

# gem install mysql2
Done installing documentation for mysql2 after 1 seconds
1 gem installed

いけました。以上です。

参考