最近エンジニアとしてフロントエンドの開発に携わることが多かったので UX について勉強すべく、こちらの勉強会に参加してきました。 その参加レポートを書き残しておきます。
Read More
誰のためのデザイン？を読みました
私は Web 業界でエンジニアとして働いていますが、最近 UI や UX に強く興味を持つようになったので、デザインについて学ぶべく『誰のためのデザイン？』を読みました。 この書籍では飛行機や自動車、テクノロジーなど身近なものを例にデザインについて具体的に説明されている...
Read More
Gulpを使って画像圧縮+SVGスプライトを生成する
前回は Gulp を使って Scss のコンパイルを自動化しましたが、今回はさらに処理を追加して画像ファイルの圧縮と SVG スプライトの生成も Gulp で自動化したので、その方法を書き残しておきます。
Read More
Gulpを使ってSassのコンパイルを自動化する
Gulp を使ってSCSS ファイルを CSS ファイルにコンパイルする処理を自動化したので、その方法を書き残しておきます。
Read More
Intersection Observerを使って画像をフワッと表示させる方法
スクロールのイベントを検知してアニメーションを発火させる方法は色々ありますが、その中でも Intersection Observer を使う方法が便利だったので、使い方を書き残しておきます。
Read More
親要素のサイズでトリミングして画像を重ねて表示する方法
親要素のサイズでトリミングした画像を重ねる方法を実現することができたので、書き残しておきます。
Read More
CSSだけでページャーをつくる方法
CSS で一般的なページャーを実装したので書き残しておきます。
Read More
Webサイト制作に便利なツールまとめ
Webサイトの実装をしていくなかで便利なツールをあったので書き残しておきます。
Read More
CSSを使った要素の配置方法まとめ
最近フロントエンドのレイアウトを主に実装しているのですが、要素を何となくで配置していたところバグが発生したときの対処が素早くできくなってしまったので、CSSで要素を配置する方法について改めて理解し直したのでまとめておきます。
Read More
メディアサイトのように要素を指定列に並べる方法
最近Webサイトを実装したのですが、メディアサイトのように指定列数の要素を並べる方法がわからず戸惑ったので、実装方法を書き残しておきます。
Read More
Nuxt.js に画面を左から右へ移動するアニメーションを実装する方法
画面の右から左へ移動するアニメーションを実装したので、書き残しておきます。 この記事では Nuxt.js を使ったプロジェクトのなかに、SVG ファイルを使ってアニメーションを実装しています。
Read More
画像ホバーアニメーションの作り方
画像をホバーしたときのアニメーションを付けることで、ユーザーの印象に残りやすくしたり、操作を快適にさせることができます。自分としてもWebサイトにちょっとしたアニメーションが付いていると、色々な画像をホバーしてみたくなります。そんなホバーアニメーションを自分でも実装してみ...
Read More
Nuxt.jsでSSL(https)化する方法
Nuxt.js を使ったWebアプリケーションをSSL化したかったので、自己証明書を使ってローカル環境で HTTPS 通信できるようにしました。
Read More
Nuxt.js に Storybook を導入する方法
フロントエンド界隈で Storybook を使っているとの話をよく聞いていたのですが使ったことがなかったため、動作確認をしてみました。 この記事では 以前に作成した Nuxt プロジェクト に Storybook を導入しています。
Read More
Nuxt.js + Swiper スライダーの作り方
Webサイトなどでよく見掛ける、一定時間が経過すると画像が切り替わるスライダーを実装してみました。 前回作成した Nuxt.js プロジェクト に追加したかったので、Swiper の Vue 用プラグイン vue-awesome-swiper を使ってスライダーを実装...
Read More
SVGアニメーションの作り方（stroke編）
下記のようなSVGアニメーションを実装してみたので書き残しておきます。
Read More
TimelineMaxを使ったオープニングアニメーションの実装
下記のような簡単なオープニングアニメーションを実装してみたので書き残しておきます。 実装には GSAP の TimelineMax を使っています。
Read More
CSS3でのアニメーション実装方法（フェードインとユラユラ揺らす）
画像をユラユラ揺らす方法を調べて実装したので、その方法を書き残しておきます。 今回は CSS3 で下記のようなアニメーションを実装しました。 ＊参考 MDN web docs / animation MDN web docs / transition...
Read More
Nuxt.js + ScrollMagic を使ったスクロールエフェクト（ふわっと要素を表示）
画面を下にスクロールしていくとフワッと画像が表示されるエフェクトを付けたくて ScrollMagic というライブラリを使ったので、その実装方法を書き残しておきます。 今回は Nuxt.js で作った Web アプリケーションに適用したので、Vue.js 用の...
Read More
Nuxt.js + SCSS + Netlify を使ったWebサイトの公開
Nuxt.js でポートフォリオを作成して公開したので、その手順を書き残しておきます。また、SCSS の適用方法についても書いておきました。 ＊参考 Nuxt.js 公式サイト/ Views npm / @nuxtjs/style-resources...
Read More
GraphQL（React + Apollo）を使ってみました②（データ更新編）
下記記事の続きです。 前回はデータを取得して画面に表示するところまでだったので、今回はデータを更新できるようにします。
Read More
GraphQL（React + Apollo）を使ってみました①（データ取得編）
GraphQL の話題を聞くことはあったのですが実際に触ったことがなく、使い方やメリットを知るために公式サイトの React と GraphQL クライアントライブラリ Apollo を使ったチュートリアル をやってみました。 この記事ではチュートリアルでやったこ...
Read More
Nuxt.js + Firebase でWebアプリを公開してみました
無料で使えるホスティングサービスは GCE や GAE、Firebase がありますが、Firebase を使ったことがなかったので、 Nuxt.js と組み合わせて動作確認をしてみました。今回の記事では Nuxt.js で作成した簡単なアプリケーションを Firebase ...
Read More
Ruby on Rails のチュートリアルをやってみました
今まで Java / Python / Javascript を使って開発することが多かったのですが、Ruby on Rails を使っているとの話を耳にすることが多いので、試しにチュートリアルをやってみました。
Read More
『会社を変える分析の力』を読みました
最近ではビッグデータやデータ分析という言葉をよく耳にするようになりましたが、何を目的にしてどういった効果を期待するのかが最も重要ということを知り、データ分析に詳しいかたからオススメされたこちらの書籍を読んでみました。 あまりページ数が多くなく 2時間程度で...
Read More
Scikit-learnを使ってロジスティック回帰分析をしてみました
Webエンジニアなのでデータ分析の経験はないのですが、業務上で関わったデータサイエンティストから手軽に試せるとの噂をきいたので、機械学習ライブラリ scikit-learn を使ってロジスティック回帰分析をしてみました。 今回は scikit-learn に付属している...
Read More
モダンフロントエンド勉強会に参加してきました
フロントエンドの技術についてキャッチアップすべく、7月23日に開催されたこちらの勉強会に参加してきました。TECH PLAY の勉強会は今回が初めてです。最新技術のキャッチアップというよりも、各会社の現状を知る機会になりました。
Read More
Frontend de KANPAI! #7 に参加してきました
サーバーサイドの開発経験が長いのですが、ここ1年くらいはフロントエンドを担当することが多かったので、技術のキャッチアップをすべく 2019年7月19日（金）に開催されたフロントエンドのイベントに初参加してきました。会場はDeNAさんです。
Read More
Vue.js でダッシュボードを作成④（データバインディング編）
前回作成した Vueアプリケーションに、表示対象の月を変更できる機能を追加しました。また、合わせて下記機能も追加し、少し躓いた部分があるのでこの記事に書き残しておきます。
Read More
Vue.js でダッシュボードを作成③（Vue-chart.js でのグラフ描画編）
前回の記事 で 作成した Vue アプリケーションのダッシュボード画面に、グラフを描画してみました。 ライブラリは Vue でグラフ描画するためのライブラリ vue-chart.js を使いました。 また、データについてはまだサーバーとの連携をしていないので、サンプ...
Read More
Vue.js でダッシュボードを作成②（SVGアイコン作成編）
前回作成した Vue アプリケーションのサイドバーに SVG のアイコンを付けてみました。 無料で使えるフリーアイコンも数多く公開されていますが、せっかくなので以前から気になっていた Adobe XD を使って自分でアイコンを作成してみました。
Read More
Vue.js でダッシュボードを作成①（レイアウト作成〜Sass導入編）
Webアプリケーションを作成するとき、レイアウトはいつも Bootstrap などの CSS フレームワークを使っていたのですが、CSS の理解を深めるためにフレームワークを使わず CSS のみで実装してみました。 今回は JavaScript フレームワークに Vue.js ...
Read More
ReactでTodoアプリケーションを作ってみました
React の基礎を学ぶために公式のチュートリアルはやってみたのですが、他にも何か作って理解を深めたいと思い Todo アプリケーションを作ることにしました。 参考にできそうなサイトを探すと出てはくるのですが、どういった順番で作成するのかがわからない記事が多かったため...
Read More
TypeScript のチュートリアルをやってみました
最近 TypeScript を導入しているとの話を多く聞くようになり、気になりつつも実際に触ったことがなかったので、TypeScript のチュートリアルをやってみました。
Read More
Sassを使ってみました
CSSを触る機会はあるのですが、Sassを実際に使ったことがなかったのでSassの動作確認をしてみました。
Read More
CSS設計手法まとめ（OOCSS・BEM・SMACSS・SuitCSS・FLOCSS）
CSSを部分部分で書いていると、再利用性のないクラスばかりになったり、重複したスタイルを複数書くことになったりします。また、CSSでは詳細度によってどのセレクタが優先されるか決定されるので、理解していないと意図した通りにスタイルが反映されなかったり、強制的に反映しようとし...
Read More
React + Redux で電卓アプリを作成してみました
業務では Vue.js を使っていて React.js は使ったことがなかったのですが、勉強するために React/Redux を使ってアプリケーションを作成してみました。
Read More
Node.js + Express を使ってみました
Node.js はフロントエンドの環境構築でしか使ったことがなかったのですが、Express と Node.js を組み合わせて使うことがよくあるようでしたので、試しに使ってみました。
Read More
Python + Djangoでメールアドレスを使ったログイン認証
Django にはデフォルトでログイン認証機能が備わっているとのことなので試してみました。 ユーザー名とパスワードでのログインがデフォルトなのですが、今回はカスタマイズしてメールアドレスでログインできるようにもしました。
Read More
ノンデザイナーズ・デザインブックを読みました
私はWebアプリケーションの開発に携わっているのですが、UI/UXを含めたデザインに興味があるため、下記の書籍でデザインの基本について勉強しました。
Read More
PHPが埋めこまれたHTMLを表示してみました
PHPスクリプト（ <?php ...?> のタグ）が埋め込まれているHTMLファイルを、ローカルで表示する方法を調べたので書き残しておきます。
Read More
INSIDE FRONTENDに行ってきました
最近のフロントエンド技術の動向を探るべく、 INSIDE FRONTEND に行ってきました。
Read More
Nuxt.js を使ってみました
最近 Vue.js を使うことが多いのですが、Vue.js ベースのフレームワークである Nuxt.js を使ったことがなかったのでチュートリアルを参考にして動きの確認をしてみました。
Read More
登録:
投稿 (Atom)
