2020.09.14 WEBシステム開発 過去のコードをComposition APIを使って書き直してみる(前編) VueのメジャーバージョンアップがQ3 2020に予定されており、Roadmap通りであればもうすぐ公開されます。 そこで、Vue3の目玉のひとつである「Composition API」を使って、過去に当ブログでご紹介したコードを書き直してみたいと思います。 今回は前編として、Composit [...]
2020.09.09 WEBシステム開発 Windowsで至高のターミナル生活を求めて(Windows Terminal編) 前回の記事「Windowsで至高のターミナル生活を求めて(Alacritty編)」ではクロスプラットフォーム対応のAlacrittyをご紹介しました。 今回はMicrosoft謹製の「Windows Terminal」をご紹介します。 INDEX1. Windows Terminalのインストー [...]
2020.08.28 WEBWebデザイン YouTube動画のサムネイル作成に!PhotoshopとIllustratorで袋文字を作ってみました 写真の上に文字を配置するとき、文字が背景と同化して見づらくなってしまったことはありませんか?こんな時、袋文字が役に立ちます。 袋文字とは、文字を別の色で縁取りしたものを指します。素の文字よりもインパクトが出て、さらに可読性が増すため、YouTubeのサムネイルなどにもよく使われます。 今回はそん [...]
2020.08.07 WEBWebデザイン CSSアニメーションを使ったリンクボタンを作ってみよう!(実践編) 前回の記事(基礎編)ではCSSアニメーションの概要やanimationプロパティの種類など、基本的な情報をまとめました。 今回は実際にアニメーション表現のあるリンクボタンを作りながら、CSSアニメーションの使い方とその効果を解説していきます。 INDEXCSSアニメーションのおさらいリン [...]
2020.08.06 WEBシステム開発 google/wireを使ってGoでDI(dependency injection)してみる 今回は、GoでDI(dependency injection)してみたいと思います。 GoでDI用のパッケージはいくつかありますが、今回は「google/wire」を利用します。 GitHub google / wirehttps://github.com/google/wire IN [...]
2020.07.28 WEBWeb全般 アウトライン化されたaiデータから、できる限りテキスト情報を取り出す方法 「パンフレットの情報をもとにwebページを構築しなくてはならないが、提供いただいたイラレデータがアウトライン化されていて、テキストがコピーできない!」 私がエディターとして仕事をしているとき、まれに遭遇する事態です。 データがアウトライン化されていると、テキスト情報を抽出(コピー)することができま [...]
2020.07.21 WEBWebデザイン Adobe XDのコンポーネントを利用してホバーアクションをデザインする webデザインを作成する際についつい忘れがちになってしまうのがユーザーインタラクション時のデザイン(マウスホバーやボタンのクリックなど)です。 弊社ではPhotoshopでデザインをする際には別途レイヤーを作成したりPSDを分けて用意したりと仕様に応じて様々な工夫をしていますが、AdobeXD(以 [...]
2020.07.17 WEBWeb全般 Google マップ・ストリートビューをレスポンシブデザインのwebサイトに埋め込む方法をご紹介! 自社のwebサイトに「画像」で作成した地図を表示していませんか? 「画像」で作成した地図の場合、スマートフォンで閲覧すると画像が小さくなり、文字や地図記号を認識することができなくなってしまう恐れがあります。その事態を避けるためにGoogleマップやストリートビューをwebサイトに埋め込むことを [...]
2020.07.16 WEBシステム開発 CodeIgniter3にTwigを連携して使う アーティスではシステム開発にPHPのフレームワークであるCodeIgniterを使うことがあります。 また、PHPのテンプレートエンジンであるTwigを導入することもあります。今回はこの2つを連携して使っていきたいと思います。 INDEX本記事での筆者の環境使ったことがない方のために少しだけ [...]
2020.07.09 WEBシステム開発 GKEにArgo CDを導入してアプリケーションをデプロイする アーティスではいくつかのウェブアプリケーションをGoogle Kubernetes Engine上のk8sにデプロイしています。イメージをCloud Buildでビルドした後、マニフェスト用のリポジトリにPushがあるとCloud Buildで自動的にApplyを行っています。 現状でもとくに [...]
2020.07.03 WEBシステム開発 Windowsで至高のターミナル生活を求めて(Alacritty編) ターミナルのいい季節になってきた今日この頃。またお会いしましたね。前回の記事「Windowsで至高のターミナル生活を求めて(MSYS2編)」ではMSYS2をご紹介しました。 今回はクロスプラットフォームのGPUを使用する高速なターミナルエミュレーターが売りのRust製のAlacrittyをインスト [...]
2020.06.30 WEBWebマーケティング Google広告でABテストをするときに便利な「下書きとテスト」機能の使い方 リスティング広告の費用対効果を高めるうえで、PDCAサイクルを実施して広告やランディングページのクリエイティブを最適化することは必要不可欠なものになります。 PDCAサイクルの過程でよく使われる検証方法がABテストです。今回は、Google広告でABテストをする際に便利な「下書きとテスト」機能 [...]
2020.06.23 WEBWeb全般 自分だけの地図を作って共有できる!Googleマイマップ ~オリジナルMap共有編~ 前回の記事(作成編)では、Googleマイマップの作成方法についてご紹介しました。 今回の第2弾では、作成した地図を共有したり、自分のサイトに埋め込んだりする方法をご紹介します。 ご自身のGoogleアカウントで、共有したいマイマップにログインしたところからスタートです! INDEXデフォルトビ [...]
2020.06.16 WEBWebデザイン CSSでアニメーションを作るには?CSSアニメーションの作り方(基礎編) 最近ではアニメーションを使用しているwebサイトが多くなりました。 要素の色や形を変化させたり、移動させたりすることで、動きのある華やかな印象を与え、より直感的に情報を伝えることが出来るアニメーション。 そんなアニメーションをCSSだけで表現する方法を、今回解説していきます。 INDEXCS [...]
2020.06.16 WEBシステム開発 WSL2のDebianにAnsibleの最新版をインストールする ついにWindowsの「May 2020 Update」が配信され、待ちに待ったWSL2が使えるようになりました。Preview版ではなく正式なリリースとなったので、さっそく会社のPCもHyper-VからWSL2に移行しました。 WSL2にはいくつかのディストリビューションを選択できますが、今回は [...]
2020.06.11 WEBWeb全般 【YouTube】webサイトに動画を埋め込む方法は?レスポンシブデザインに対応した埋め込みタグをご紹介! 昨今、多くの企業や組織が自社のマーケティングチャネルとして「YouTube」を活用しています。 YouTubeにアップロードした動画をユーザーに閲覧してもらう方法として、自社のwebサイトへ動画を埋め込むニーズが増えてきています。 そこで本記事では、webサイトにYouTube動画を埋め込む方 [...]
2020.05.29 WEBアクセス解析 無料で使えるBIツール「Googleデータポータル」使ってアクセス解析レポートを自動化してみよう【基本編:グラフ設定】 前回の導入編では、Googleデータポータルの導入からレポート作成、共有までの流れを説明しました。 基本編では、レポートに配置できるグラフの種類と設定方法について解説していきます。 レポートに追加できるグラフの種類 Googleデータポータルでは、32種類のグラフが用意されています。 表 [...]