見出し画像

探求時間を大事にしたい今日この頃

jnkykn

こんにちは。サイボウズ株式会社 開発本部 People Experienceチーム コネクト支援チームの貴島(@jnkykn)です。今朝の犬の散歩中に見た、近所の紅葉がきれいでした。先週は釧路に出張していましたが、今週末は秋の読書週間の一貫で本を読んだりしています。ここ数日読んでいるのは、ファスト＆スローです。無意識に処理できることと、しっかり考えなければ処理できないこと、錯覚はどうあがいても起こるし、脳って面白いなと思いながら読んでいます。

探求不足をなんとかしたい

U-16プログラミングコンテスト釧路大会の実行委員の皆さんと、まつりやで寿司をつまみながらワイワイしていて「自分の知識足りない＆浅すぎる！！！何とかしなくては！！！」と危機感を覚えました。日々色々学習しているものの、つまみ食いレベルに留まっていて探求が足りていないのです。

まつりやで食べたお寿司の皿が積み上げられている
皿の枚数もすごいけど、情報量もすごかった

たとえばSVG

ロゴ画像をSVG形式でご提供いただく機会が、ときどきあります。しかし、自分でSVG形式のデータを作ったことがありませんでした。先月、Cybozu Inside Outブログの自動生成アイキャッチをカスタマイズする際、初めてSVG画像作成にチャレンジしました。

自動生成アイキャッチのカスタマイズでは、外部の画像のURL参照ができないので、BASE64か、SVGで埋め込む必要があります。そこで、アイコンはBASE64に変換して埋め込み、背景にサイボウズらしいサークルを配置したいと考えました。このサークルを、SVGで表現できるのでは？と考えて、チャレンジしたのが今回のアイキャッチです。

Cybozu Inside Outブログの自動生成アイキャッチの設定画面
BASE64で埋め込んだアイコン

サークルと、記事タイトル表示部分

    <div class="main-wrapper">
      <svg viewBox="0 10 120 60" width=320 xmlns="http://www.w3.org/2000/svg">
        <circle class="circle-m" cx="20" cy="10" r="38" />
        <circle class="circle" cx="50" cy="100" r="20" />
      <div class="main">
        <div class="entry-title">{Title}</div>
      </div>
      <svg viewBox="-80 -60 120 70" width=320 xmlns="http://www.w3.org/2000/svg">
        <circle class="circle-l" cx="20" cy="0" r="60" />
    </div>

SVGについて少しだけ掘り下げてみる

SVGは、拡大縮小しても形を維持できるベクター画像であるという、ざっくりした知識はあったのですが、どうやって作ればよいか？など本気で調べたことがありませんでした。まずは、MDNで仕様を確認しました。

さて、ベクター画像と聞いて、すぐに頭に浮かぶのはAdobe Illustratorです。Adobe Illustratorで制作したベクター画像を、SVGとして出力することもできます。Adobe PhotoshopやAdobe Expressでも、画像をSVGに変換することもできるようです。

余談ですが、Adobe Expressは、動画の形式を変換することもできて、とても便利です。
今回は、単純なドーナツ型を描画したかったので、特別なツールを使用せずに円を描くことで対応できました。この先は、ロゴデータのデザインをしてみたり、段階的に複雑なSVGを作ってみたいと思っています。

まとめ

まだちゃんと深堀りできていませんが、今週はここまでにします。週イチでnoteを書くのとは別に、もう少しじっくり時間をかけて繰り返し学習して「身についた」という実感が持てるようになれたら良いなと思っています。（先週、数学を復習したい熱も浮上したので、こちらも別途やっていきます）継続は力なりと言いますし、自分に合った探求方法を探りながらやっていき💪

おまけ

ファスト＆スローに関する以下の記事は読んでいないので、あとで読みます。


いいなと思ったら応援しよう！