開業 4周年

SKYGUILDの武井です。
3月16日で開業から4周年となりました。
日ごろ、お世話になっている皆様 本当に本当にいつもありがとうございます。

妊娠・出産の休業から復帰し、慣れないながら育児と仕事の生活を過ごしてまいりました。
おかげさまで無事に安定して復職し、4月から娘は保育園に入園が決まりました。
今まで育児との並行で融通の効かない部分も多々ございましたが、
これからは落ち着いて時間が作れるようになりましたので、
お気軽にお仕事の相談をいただけますと幸いです。

今後とも何卒よろしくお願いいたします。

開業 3周年

SKYGUILDの武井です。
3月16日で開業から3周年となりました。
日ごろ、お世話になっている皆様 本当に本当にいつもありがとうございます。

この一年は、結婚式や旅行、免許取得、妊娠・出産など、
プライベートのイベント事が多く、なかなか時間が取れませんでしたが、
それでもおかげさまで、休業に入るまで途切れること無く仕事をいただき、
充実した一年を過ごすことができました。

今年の2月初旬に無事に娘を出産し、
フリーランス3年目は、育児休業からスタートしています。
なるべく早く復帰して、まだまだ精進させていただきます!

育児にも慣れて落ち着いてきましたので、
休業中も少しずつ技術の勉強やアウトプットもしていきたいと思います。

今後とも何卒よろしくお願いいたします。

Safari transitionちらつき問題

今やWebサイトを作る際に、CSS Transitionでアニメーションをつけるのが定番となっていますが、Safariでは度々ちらつき問題に遭遇します。
実際に遭遇された方でないと想像しづらいかもしれませんが、文字が細くなる または 薄くなる、戻るといった具合で、ちかちかっとするような感じです。
以下2つのパターンで大体対応できたので、紹介します。

CSS Transformsとの組み合わせでちらつく場合

概ね、以下を指定することで解決しました。


-webkit-backface-visibility:hidden;
backface-visibility:hidden;

参考にしたサイトではその他いくつか対処法が書いてあります。
参考:「CSS Transformsで​画面がちらつく​ときの対処法 – ゆめいろデザイン」

opacityとの組み合わせでちらつく場合

以下で一発解決しました。


html{
-webkit-font-smoothing: antialiased;
}

アンチエイリアス処理をデフォルトに戻す場合は、bodyに対して以下のように指定すればOK


body{
-webkit-font-smoothing: subpixel-antialiased;
}

参考:「font-smoothingでOSXでのフォントのレンダリング方法を調整する」

参考:「Safariでopacityの操作をすると描画がチラつく件 – thamamurの日記」

WordPressの受託案件でお世話になっているプラグイン

WordPressのお仕事の機会が多いので、最近よく使っているプラグインをまとめてみました。
一般的によく使われてるものから、「日本の受託Web制作案件」において役立つなーという視点からオススメのものをご紹介。
ちょこちょこプラグイン以外にも必要な情報も入れてます。

カスタムフィールド・カスタム投稿タイプ関連

Advanced Custom Fields

https://ja.wordpress.org/plugins/advanced-custom-fields/

管理画面で簡単にカスタムフィールドの設定が出来るようになるプラグインです。
入力タイプも「カラーピッカー」「GoogleMap」などに対応し多機能な上に、必須の有無や、デフォルト値・返り値の設定、プレースホルダーなど細かいところまで設定出来ます。

GoogleMap API keyの設定

GoogleMapを使うにはAPI keyが必要なのですが、執筆現在ではプラグインの設定画面などからはkeyの設定がないので、function.phpから設定します。
参考記事:「Advanced Custom FieldのGoogle Map機能にAPIキーを登録する方法 | 自由なステージ

ACF | Repeater Field (有料アドオン)

https://www.advancedcustomfields.com/add-ons/repeater-field/

Advanced custom fieldのアドオンです。有料ですが、めちゃくちゃ便利なのでオススメしたいです。
入力欄を任意の数増やすことができるリピート入力欄を設定できます。しかもリピートの中でリピートさせる入れ子にも対応してます。
例えば経歴や年表などの行数が決まってない入力項目がある時や、ブログ記事でWYSIWYGエディタでなくパターンの決まった入力欄にしたいけど自由に数を増やしたい、といった時に使います。

参考記事:「Advanced Custom Feld のアドオン Repeater Field の表示方法 – by Takumi Hirashima

続きを読む

開業 2周年

SKYGUILDの武井です。
本日、3月16日で開業から2周年となりました。
日ごろ、お世話になっている皆様 本当にありがとうございます。

おかげさまで、2年目もお仕事に困ることはなく、順調に色々なことに挑戦できました。

フリーランス2年目は、新しい取引先も増えましたが、横のつながりが増えた1年間でした。
主催したフリーランスミートアップをきっかけに、いくつかのイベントを通しフリーランスの方と多く知り合うことができました。
他のフリーランスの方と組むことで、大きめの案件や、デザインなど自分で対応できない範囲の仕事を受けることができ、仕事の幅が広がったことを実感しています。
これからも人のつながりを大事にして、自分のできること・周りの人が得意なことを上手く組み合わせ、様々なモノづくりに携わっていきたいと思います。

次の1年も、どんどん新しい仕事に挑戦し、イベント主催や登壇、記事投稿など積極的にアウトプットしていきます!
仕事以外のモノづくりも何かできればと考えています。

今後とも何卒よろしくお願いいたします。

テキスト選択時(ドラッグ)時に背景色を変えたらWebKit系ブラウザ(Chrome/Safari)だけ色がちょっと違かった話

テキストを選択(ドラッグ、ハイライト)した時の色ってCSSで変えられるんですよね。
普段あまり変えることがないのですが、たまたま必要な機会があった時に「あれ、Chomeで色が暗いぞ?」と気づいた話。
小ネタとしてメモしておきます。

選択時の背景色とか文字色の変え方

参考:「::selection – CSS | MDN」


::selection{
background: #059;
color: #eee;
}
::-moz-selection{
background: #059;
color: #eee;
}

これだけです。::selection 擬似要素というそうです。
Firefox(Gecko)はプレフィックス(-moz-)が必要です。
color、background、background-color、text-shadowのみ使えます。
ただし、そもそも非標準なので、将来的にサポートされないかも?

※2017/02/16時点、IE11およびその他は現時点最新バージョンにて確認。

続きを読む

iOSでfixed要素の背景がツールバーの高さ分 消える件

スマホ(iOS)のバグ?のお話です。
いつもこの問題に直面するのですが、検索しても出てこないので書いてみます。

※2017/01/11時点、検証可能な範囲 iOS8.4 〜 10.2で発生を確認。

モーダルウィンドウなどを実装する時に、ブラウザ全面に背景色を引いたfixed要素を置くことはよくありますよね。
iOSにおいて、ツールバーが一度出た状態からスクロールして、ツールバーが消える時にこの高さ分(よりやや多め) 背景が消えてしまう問題があります。
文章で説明してもよくわからないと思うので、以下をご覧ください。

数秒以内に正しい状態に治るので大きな問題ではないのですが、割と気になります。
解決方法としては、fixed要素には背景をつけず、背景用のabsolute要素を別に配置する、となります。
発生状態のコードと、解決後のコードを解説します。

続きを読む

新年のご挨拶 2017年 – CSSで干支イラストを作ってみた

明けましておめでとうございます。
SKYGUILDの武井です。
旧年中お世話になった皆様、本当にありがとうございました。
おかげさまで、フリーランスとして順調に2年目を過ごしてまいりました。
本年も変わらぬご愛顧の程、よろしくお願い申し上げます。

さて、突然話は変わりますが、
新年一発目のアウトプットを何か作ろう!と思い、CSSイラストに初挑戦しました。

続きを読む

フリーランス2年生の色々と、フリーランスの皆さんとやりたいこと

武井絵利菜@skyguildと申します。
2015年3月からフリーランスとしてWebのエンジニア兼ディレクタをやっています。

フリーランス Advent Calendar 2016」の18日目の記事です!
皆さん様々な職種で、様々な背景をお持ちですが、共感することろも新しい気付きも多くあり、とても読み応えがありました。
機会があれば、ぜひ今回のAdvent Calendar 参加者の皆さんとお会いしてみたいです。

フリーランスになった理由

「色んな人と色んな種類の仕事がしたい」
何ともざっくりした理由ですが(笑)

Web関連の専門学校を出て、Web制作会社2社を通して5年ほど仕事をしてました。
会社での仕事は好きでしたし、一緒に働く人たちも大好きでした。

でも、会社の方針が変われば好きだった仕事ができなくなることもありますし、
新しく興味のある分野の仕事も自由に選べるわけではありません。
また、同じ会社でもなかなか一緒に仕事する機会がない人、辞めていった人や、勉強会等で出会った色んな人たちと「一緒に働きたい」と思っても、その機会を作るのは難しいです。

もちろん会社にいる中でも、工夫して実現できたかもしれません。
ただ、ないモノねだりの不満でフリーランスになったということではなく、
自分の力で、自分がワクワクできる仕事を見つけて、
自分が一緒に仕事したい人に自分と仕事がしたいって言ってもらえる働き方がしたい、
という気持ちでした。

あとは学生のころから、時間を自由にできるフリーランスという働き方に魅力を感じていたというのもあります。

続きを読む

Genesis Lightning Talks vol. 50 で発表しました

Genesis Lightning Talks vol. 50」で今年の振り返りを発表してきました。
持ち時間5分ずつのLTイベントです。7年ほど前から参加させてもらってます。

振り返ってみたら、思ってたより勉強会参加できてたなーというのと、もっと登壇したいなーという感じです。
来年は中〜大規模のイベント主催も2回くらいやってみたいと思います。