最近の記事

あけましておめでとうございます

2021年も既に6月も半ばが過ぎました。1年の半分が過ぎ去っていました。 2020年を振り返ろうと思ってましたが、やる気が起きずダラダラとしてたら、今に至ってます。 2020年を振り返ってみます。 在宅勤務になった2020年はなんといっても ”コロナ禍” が一番に頭に浮かびます。 私の所属している組織でも在宅での勤務に切り替わりました。 もう1年以上 在宅で仕事をしています。 在宅勤務になったことで、良い点も良くない点もありますが、どちらもコミュニケーションの部分になる

    • 色々な国の祝日が見れるカレンダーアプリを作った

      World Wide Holidays(WWH)という、色々な国の祝日が見れるカレンダーアプリを作ったので、その過程で得た知見を共有しようと思います。 ソースコード使用した技術フロントエンド - Nuxt@2.11.0 国の情報取得元 - REST COUNTRIES 祝日の情報取得元 - Google Calendar API アプリホスティング先 - ZEIT Now フロントエンドには普段、業務でも個人でも使い慣れているNuxtを使用しました。 様々な国の情

      • 静的サイトの作成に使用するHTMLのテンプレートエンジンをPugからEJS・Nunjucksを試してEJSにした

        ここ最近、静的なWebサイトを制作する際にNuxtのgenerate機能を使用してNuxtを静的サイトジェネレーターとして使用しています。 しかし、Nuxtほどの機能が求められていなかったりする場合、独自に作った静的サイトジェネレーターを使用しています。 そこで使用していたHTMLのテンプレートエンジンとして「Jade」という名前のときから「Pug」を利用してきましたが、ここ最近ちょこちょこと辛く感じることもあり、EJS、Nunjucksを試して、最終的にEJSへ変更しました

        • Vue.js の transition で `height: auto` な開閉アニメーションを実装する

          "アコーディオン" というような 呼ばれ方をするアニメーションを Vue.js で実装しようとしたときに ちょっとハマったので備忘録がてら記録しておこうと思います。 CSSの transition アニメーションは、例えば height などの値が `auto` の状態から `100px` へ、というようなアニメーションは出来ません。`0px` から `100px` へといったような、"数値から数値" というようなアニメーションしかできません。その解決方法として `max-h

        あけましておめでとうございます

        • 色々な国の祝日が見れるカレンダーアプリを作った

        • 静的サイトの作成に使用するHTMLのテンプレートエンジンをPugからEJS・Nunjucksを試してEJSにした

        • Vue.js の transition で `height: auto` な開閉アニメーションを実装する

          v-sapporo を立ち上げた話

          ゆるWeb勉強会@札幌 Advent Calendar 2019の10日目のポエムになります。 私は 2018年12月(下旬)から、v-sapporo というコミュニティを立ち上げ、イベントなどの主催をさせていただいております。 立ち上げてから ちょうど1年ほど立つので、立ち上げた経緯やこれまでのことを綴って行きたいと思います。 主に connpass でイベントの告知・参加者の募集を行っております。 以下は connpass の v-sapporo のグループになります

          v-sapporo を立ち上げた話

          webGL(Shader)を勉強した話

          ゆるWeb勉強会@札幌 Advent Calendar 2019 9日目の記事です。 ずっと勉強しようと思っては躓き、諦め、立ち上がってまた躓きを繰り返して、ちょっとだけ思ったことが出来るようになったので、その成果などをまとめました。 まずはwebGLの勉強のために作成したものを紹介します。 ✨パーティクル①Three.js と THREE.BAS というライブラリを利用して作成したものです。 ページ下部にあるテキスト入力フォームに文字を入力 or 右のマイクボタンを

          webGL(Shader)を勉強した話

          Nuxt.js + Contentful + Netlify でポートフォリオサイトを作った話

          ゆるWeb勉強会@札幌 Advent Calendar 2019の7日目の記事になります。 ⚡️作ったもの↓こちらになります 🤔Nuxt.js とは?Vue.js を使用したwebアプリケーションを作成するためのフレームワークです。 といっても、Nuxt.js から静的ファイルを出力して静的なwebサイトとしても利用できるものになります。作成したポートフォリオサイトも静的ファイルを出力して静的なwebサイトとして公開しています。 🤔Contentful とは?"Hea

          Nuxt.js + Contentful + Netlify でポートフォリオサイトを作った話

          VueとNuxtのドキュメントの翻訳に携わって嬉しかった話

          ゆるWeb勉強会@札幌 Advent Calendar 2019 の5日目の記事になります。 💁‍♂️自己紹介こちらを御覧ください 🤔ドキュメントの翻訳とは? Vue.jsやNuxtを使ったとのある人は1度は以下のドキュメントを見たことがあると思います。 ・https://jp.vuejs.org/index.html ・https://ja.nuxtjs.org/ これらの日本語ドキュメントを作成するために英語の本家ドキュメントから日本語へ翻訳することを指します。 これ

          VueとNuxtのドキュメントの翻訳に携わって嬉しかった話