先日に引き続き、今回も GSAP で実装したアニメーションをご紹介。 今回は、タイプライター風アニメーションというのか、1 文字ずつ文字が表示されるアニメーションを実装した。 TextPlugin 使い方 React での実装例 まとめ 関連する記事 TextPlugin greenso…

スクロールアニメーションを実装するにあたり、GSAP の ScrollTrigger を使うことで簡単に実装できたので、今回はその実装方法を紹介する。 GSAP とは ScrollTrigger の特徴 React での実装例 インストール 使い方 参考例 まとめ GSAP とは GSAP（GreenSock …

今回、HP 内で意図的にブラウザバックを制御して、UX を向上させられるようにしたので、実装方法を紹介する。 ブラウザバックの制御に関して 実装例 まとめ ブラウザバックの制御に関して ブラウザバックを制御するためには、セッション履歴を操作する必要が…

GitHub Actions は、最高に便利である。 今回は、Next.js で作った HP を Firebase Hosting に自動デプロイする GitHub Actions を紹介する。 GitHub Actions の構成 workflowの新規作成 GCPの設定 Firebaseの設定 Slack Appの設定 処理実行 まとめ GitHub A…

最近、サーバー運用などを勉強している。 VPC 環境を構築する時に、サブネットを多段に分割してセキュリティレベルを分け、踏み台サーバー経由でしかSSH接続できないようにする構成が多いようだ。 踏み台サーバーを経由した多段 SSH 接続で、AWS（EC2）で運…

最近、全く更新できていなかった。。。 今年やったことは今年のうちに。自分の棚卸しも兼ねて、一気にアウトプットしていきたいと思う。 今回は、AWSのEC2に、Railsアプリケーションをデプロイするにあたり、毎回調べていたので、備忘録として環境構築方法を…

今回、Djangoのアプリケーション運用監視において、Zabbix を用いることになり、監視サーバーにアプリケーション上のエラーログなどを出力する必要があった。Python の標準モジュールである logging を用いて簡単に設定できたので紹介する。 動作環境 Python…

Python を使って、2次元配列を 1次元配列に変換したり、連想配列の要素である配列要素を抽出して 1つの配列にしたい場合に、for文を使わずに、リスト内包表記でできないんだっけ？と思ったことが、今回の記事を書くきっかけである。そこで、今回はリスト内包…

VSCode の Python開発環境で、Pylint を使っている時に、以下のような Lint エラーが出た。 Unable to import '****' pylint(import-error) 問題なくモジュールを使うことができるのに、VSCode 上で Lintエラーが出てしまっていた。この点に関して、どのよう…

Python（Django）のアプリケーションを開発している中で、クラウドストレージに、写真 や Excel 、PDF などのデータを API 経由でアップロードを行ったので、備忘録として残しておく。 今回データをアップロードする API では、バイナリーデータに 512KB の…

最近は、全くブログを更新できておらず、反省しなければと思っている今日この頃。お陰様で、下書きは溜まりに溜まっているので、整理しながら順次公開していきたいと思う。 今回は、Docker の Alpine Linux 上で、Excel ファイルを PDF に変換する処理を実装…

最近は、UIフレームワークばかりを使っていて、独自でアニメーションを実装する機会がなかったが、React で簡単なタブ切り替えのスライドイン・アウトを実装する機会があったので、React での CSS アニメーション実装に関して備忘録を残しておく。 react-tra…

今回、Excel ファイルをブラウザで読み込み、json に変換して、API で POST する処理を実装したので、備忘録として残しておく。本記事では、Excel ファイルをブラウザで読み込み、json に変換するまでのコードを紹介する。 SheetJS js-xlsx サンプルコード …

React の SPA を実装する際に、画面遷移時にローディング画面を挿入したいことがある。今回、React v16.6 から利用可能になったReact.lazy と React.Suspense を初めて使ってみたので、備忘録として残しておく。 React.lazy とは React.Suspense とは React.…

先日、ローカル環境での開発が終了し、早速、客先のサーバーにデプロイをしようとした際に、エラーが発生して、あれ？GitHub から Clone できない。。。となって焦ってしまった。 同僚に聞くと、即座に回答が返ってきて、そんな裏技あるの？と思ったので、備…

最近、Next.js をよく使っている私だが、先日の案件で SPA で S3 などを用いた静的ウェブサイトとしてホスティングしたいという話になった。よし！今回も Next.js でいくぞ！と意気込んだが、検討した結果、通常の React で React Router を使って実装するこ…

昨日、Fetch API を使うにあたり、大きなミスを犯して、無駄な時間を潰してしまったので、反省を込めて、この備忘録を残しておく。 Fetch APIとは ハマった罠 Fetch API のラッパー関数を作った まとめ Fetch APIとは Fetch APIとは、XMLHttpRequestと同じく…

今回は、SocketIO を用いた簡単なチャットアプリを作ってみたので、紹介する。 Next.js + Socket通信の実装 サーバーサイド フロントエンド Material-UI で簡単にUI構成 まとめ なお、実装したサンプルコードは GitHub に公開している。 Docker でコンテナを…

Next.js（SSR）のアプリケーションを作成して、AWS にデプロイしてみたので、備忘録として残しておく。 0. ECR にイメージリポジトリを作成する 1. アプリをコマンドで実行できることを確認する 2. docker imageを作成する 3. ECRにdocker imageをpushする 4…

私は今年の6月から3ヶ月間、カックさん（ @kakakakakku ）のブログメンタリングを受けてきた。今回は、その振り返りをやりたいと思う。また、今回の記事が本ブログを書き始めて、ちょうど50記事目になる。 技術ブログってどうなの？なんかアウトプットしたい…

Next.js のカンファレンス Next.js Conf。OGPのチケットがカッコ良すぎて、すごい盛り上がりのようだ。デザインセンスが良すぎる。私もチケット欲しさに、即座に登録した。オンライン開催とのことで、当日が楽しみだ。登録がまだの方は、是非、下記からどう…

Next.js で開発しているときに、getInitialProps・getStaticProps・getStaticPaths・getServerSideProps について、いつ、どのように使うべきか、きちんと整理できておらず、自分なりの整理をしてみた。 今回整理する API は、どれもページコンポーネントで…

Next.js で開発しているときに、Client Side Rendering（SPA）・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。（React ベースのフレームワークで SSG といえば、Next.js 。ただし、v9.3から SSG の機…

最近、Next.js に触れる機会があり、試行錯誤しながらコーディングを行っている。その中で、Next.js の中で Firebase Admin SDK をどのように実装すべきかという課題にぶち当たり、とりあえず実装はできたものの、最適解ではないと思っている。もし最善の策…

前回の記事で、VS Codeの開発版（β版）である VS Code Insiders を紹介した。そして、v1.48 (2020/07) のアップデートがついに安定版にリリースされた。 The July update of @code is live! ⚙️Settings Sync (preview) now available in Stable! Simplified…

前回の記事で、VSCode + Drow.io で、図形入りドキュメントを作成する方法 を紹介した。私は現在、「VSCode」（Visual Studio Code）を愛用している。そして、VS Code は毎月のようにアップデートされている。 code.visualstudio.com 7月のアップデートでも…

前回、「GitHub Learning Lab」のPython入門コースの紹介記事を書いた。入門編はあまりに簡単な方も多かったかもしれない。「GitHub Learning Lab」には、もうひとつPythonのコース「Intermediate Python」があったので、受講してみた。 lab.github.com この…

GitHub Actions を学ぶときに「GitHub Learning Lab」を使うと便利であると、カックさん @kakakakakku に教えてもらった。 その「GitHub Learning Lab」の中に「Introduction to Python」コースなるものを発見した。これから Python に挑戦したいと思ってい…

最近、あるプロジェクトで初めて Map オブジェクトを使うことになり、これまで使ったことがなかったので調べてみました。備忘録として残しておく。 Map オブジェクトとは 使い方 Mapの作成 要素の追加 要素の取得 要素の削除 反復処理 その他の便利メソッド …

Python で HTTP API を利用する場合に、いつもの application/json ではなく、POST のコンテンツタイプが application/x-www-form-urlencoded で、response が XML で返却される API があり、標準モジュールを調べながら実装したので、備忘録として残してお…