2020.08.07 WEBWebデザイン CSSアニメーションを使ったリンクボタンを作ってみよう！（実践編） 前回の記事（基礎編）ではCSSアニメーションの概要やanimationプロパティの種類など、基本的な情報をまとめました。 今回は実際にアニメーション表現のあるリンクボタンを作りながら、CSSアニメーションの使い方とその効果を解説していきます。 CSSアニメーションのおさらい 本題に入る前 [...]
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 フロ [...]
2020.08.05 BUSINESS仕事効率化ツール 簡単で安全なリモートアクセスを実現する「シン・テレワークシステム」の設定方法 昨今では新型コロナウィルスにより新しい生活様式への移行が求められ、 政府も「三密」回避の施策としてテレワークを推奨しています。 新型コロナウィルスの第二波がきている現状から今後もテレワークの重要性は増していくと考えられます。 現在筆者自身もテレワークを行っており、本社のVPNルーターの機能を利用し [...]
2020.07.28 WEBWeb全般 アウトライン化されたaiデータから、できる限りテキスト情報を取り出す方法 「パンフレットの情報をもとにwebページを構築しなくてはならないが、提供いただいたイラレデータがアウトライン化されていて、テキストがコピーできない！」 私がエディターとして仕事をしているとき、まれに遭遇する事態です。 データがアウトライン化されていると、テキスト情報を抽出（コピー）することができま [...]
2020.07.27 BUSINESS仕事効率化ツール テレワークになって使いこなしていなかった自宅の「Mac」を仕事で使用することになって戸惑ったこと その② 前回は、新型コロナウイルス感染症によりテレワークを始めたことから、会社で使用しているWindowsと自宅で使用しているMacの仕様の違いからの戸惑いについて、第1弾としてご紹介いたしました。 第1弾使い慣れていない自宅の「Mac」でテレワークすることになって戸惑ったこと その① 今回はその第2弾 [...]
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つを連携して使っていきたいと思います。 本記事での筆者の環境 PHP 5.6.40 CodeIgnit [...]
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アカウントで、共有したいマイマップにログインしたところからスタートです！ デフォルトビューの設定 [...]
2020.06.23 BUSINESS仕事効率化ツール iPhoneのカレンダーやリマインダーをWindowsパソコンに同期させて作業効率をアップさせる方法 私がイベントやタスクをメモするときには、iPhoneの標準アプリであるカレンダーやリマインダーを使用しています。 しかし、実際に作業を行うのはWindowsのパソコンなので、イベントやタスクを確認するたびにiPhoneを開く必要があり、少しだけ面倒でした。 しかし、iCloudとOutlookを [...]
2020.06.18 LIFEIT活用 子どもでも無料でプログラミングを学べる「Hour of Code」を使って、楽しくプログラミングの基礎を学ばせてみよう 2020年から小学校でプログラミング教育が必修化されるそうです。 全員がプログラミング出来る必要はないと思いますが、確かにプログラミング的思考を身に着けることは今後重要になりそうです。 我が家の娘はまだ幼稚園児ですが、コロナの影響で幼稚園にいけない日が続き、暇を持て余していたので子供向けのプロ [...]
2020.06.16 WEBWebデザイン CSSでアニメーションを作るには？CSSアニメーションの作り方（基礎編） 最近ではアニメーションを使用しているwebサイトが多くなりました。 要素の色や形を変化させたり、移動させたりすることで、動きのある華やかな印象を与え、より直感的に情報を伝えることが出来るアニメーション。 そんなアニメーションをCSSだけで表現する方法を、今回解説していきます。 CSSアニメー [...]
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動画を埋め込む方 [...]
