第29回 VISK勉強会レポート🍻

第29回 VISK勉強会レポート🍻

第29回VISK勉強会を開催しました!

今月のごはん:バーガーキング🍔

今回は時間がなく、急いで バーガーキング を買ってきました!
慌ただしくなりましたが、みんなでおいしくいただきました。

![ご飯の写真]

発表内容

今回は3つの発表がありました。

  1. Decisions APIについて

  2. フロントエンドカンファレンスで面白かったLT

  3. AIアシスタントについて(dotsの活用方法)

Decisions APIについて

私が登壇し、安価かつ高速に答えを返してくれる Decisions API について話しました。

フロントエンドカンファレンスで面白かったLT

フロントエンドカンファレンス関西2026で発表された、ryuさんの「気持ちぃ〜角丸 Squircle」の紹介です。元のスライドは発表者ご本人から共有してもらいました。

スクワークル(Squircle) は「Square(四角)+Circle(円)」を合わせた言葉で、四角と丸の間のような形のことです。

普通の角丸(border-radius)は、直線から一定のカーブに急に切り替わります。スクワークルは、直線に近いところから少しずつ曲がりを強めていくので、角がなめらかにつながって見えます。これが「気持ちいい」と感じる理由だそうです。iPhoneのアプリアイコンの角もこの考え方に近い形です(厳密には、Appleの角とCSSで作れるスクワークルは別物とのことです)。

実装は昔、SVGの path や clip-path で描く必要がありましたが、今は corner-shape を border-radius に足すだけで作れます。

.card {
  border-radius: 50px;
  corner-shape: squircle;
}

corner-shape には squircle のほかに round、bevel、scoop、notch などの値があり、superellipse() で細かく形を調整することもできます。非対応のブラウザでは普通の角丸に戻るだけなので、気軽に使えます。必要に応じて @supports で border-radius の値を分けるとよい、という話でした。

発表後には、社内メンバーから「普通の角丸だと、直線部分との境目が凹んで見えてしまう。その対策ですか?」という質問も出ました。言われてみれば確かにその通りで、曲がり方がなめらかに変わるスクワークルなら、その境目が目立ちにくくなります。

📎 元のスライド:気持ちぃ〜角丸 Squircle(Speaker Deck)

AIアシスタントについて

最後は社長から、dots の活用方法についての発表でした。

Slackの過去のやり取りをさかのぼって情報を探してきてくれたり、間違った連絡に対してしっかり指摘してくれたりと、実際の使い方がよくわかる内容でした。私自身も指摘された経験があり、とてもタイムリーな話でした。

次回の勉強会もお楽しみに!

第29回VISK勉強会を開催しました!

今月のごはん:バーガーキング🍔

今回は時間がなく、急いで バーガーキング を買ってきました!
慌ただしくなりましたが、みんなでおいしくいただきました。

![ご飯の写真]

発表内容

今回は3つの発表がありました。

  1. Decisions APIについて

  2. フロントエンドカンファレンスで面白かったLT

  3. AIアシスタントについて(dotsの活用方法)

Decisions APIについて

私が登壇し、安価かつ高速に答えを返してくれる Decisions API について話しました。

フロントエンドカンファレンスで面白かったLT

フロントエンドカンファレンス関西2026で発表された、ryuさんの「気持ちぃ〜角丸 Squircle」の紹介です。元のスライドは発表者ご本人から共有してもらいました。

スクワークル(Squircle) は「Square(四角)+Circle(円)」を合わせた言葉で、四角と丸の間のような形のことです。

普通の角丸(border-radius)は、直線から一定のカーブに急に切り替わります。スクワークルは、直線に近いところから少しずつ曲がりを強めていくので、角がなめらかにつながって見えます。これが「気持ちいい」と感じる理由だそうです。iPhoneのアプリアイコンの角もこの考え方に近い形です(厳密には、Appleの角とCSSで作れるスクワークルは別物とのことです)。

実装は昔、SVGの path や clip-path で描く必要がありましたが、今は corner-shape を border-radius に足すだけで作れます。

.card {
  border-radius: 50px;
  corner-shape: squircle;
}

corner-shape には squircle のほかに round、bevel、scoop、notch などの値があり、superellipse() で細かく形を調整することもできます。非対応のブラウザでは普通の角丸に戻るだけなので、気軽に使えます。必要に応じて @supports で border-radius の値を分けるとよい、という話でした。

発表後には、社内メンバーから「普通の角丸だと、直線部分との境目が凹んで見えてしまう。その対策ですか?」という質問も出ました。言われてみれば確かにその通りで、曲がり方がなめらかに変わるスクワークルなら、その境目が目立ちにくくなります。

📎 元のスライド:気持ちぃ〜角丸 Squircle(Speaker Deck)

AIアシスタントについて

最後は社長から、dots の活用方法についての発表でした。

Slackの過去のやり取りをさかのぼって情報を探してきてくれたり、間違った連絡に対してしっかり指摘してくれたりと、実際の使い方がよくわかる内容でした。私自身も指摘された経験があり、とてもタイムリーな話でした。

次回の勉強会もお楽しみに!

AI・システム開発のこと、VISKにご相談ください

「自社の業務にAIを活かせないか」「この作業、自動化できないか」——

そんな漠然とした段階からで大丈夫です。大阪のAI・システム開発会社VISKが、御社の課題に合わせて、企画から開発・検証までサポートします。