SharePointで作成したリストの情報をREST APIを使用して取得してみましょう。 今回は、APIで取得した情報を、headerにリンクとして差し込んでみます。サイト全体共通のナビでも、リストを使用すると、一か所で管理できるので便利です。 前提条件 SharePoint Online モダンUI カスタムJSが使用できる（SPFx） そもそもカスタムJSをどうやって使うの、という方は以下の記事をどうぞ SharePointのモダンUIでカスタムCSS・カスタムJSを適 […]
SharePointのモダンUIで、リストの書式設定をJSON形式で入力することにより、カスタムCSSを適用してみましょう。 今回は、このようなリンクリストを作成します。 WEBパーツで似たような形を作れますが、細かいCSSが調整できません。リストのWEBパーツとして複数のページで使用すると、一度の修正で全てのページに修正が適用されます。サイト内で共通で使いたいパーツをこのように使用すると便利です。 前提条件 SharePoint Online モダンUI リスト モダンUI […]
SharePointのモダンUIで作成したサイトは、サイトテンプレートを生成すると簡単に複製できます。 テスト環境で作成したサイトを本番環境に移行する場合などに使えるかもしれません。 前提条件 SharePoint Online モダンUI チームサイト サイトテンプレートがサポートされているのはチームサイトのみです。コミュニケーションサイトでは生成できないようです。 また、独自アプリ（SPFx）を適用している場合は、一緒に自動で移行することができないようです。再度新環境用の […]
SharePointのモダンUI向けに作成したSharePoint Framework（以降SPFx）の独自アプリを、SharePoint Onlineに展開するには、パッケージ化してサイトに追加する必要があります。 今回はサイトに適用するまでの方法と手順をまとめました。 前提条件 SharePoint Online モダンUI ※その他、説明にVisual Studio Code（以下VSCode）を使用します 独自の拡張機能の作成～動作確認まではこちらの記事で取り扱ってい […]
旧来のクラシックUIを使用していた頃はWEBパーツにカスタムCSSを組み込むことができましたが、モダンUIではCSSやJSの使用が許可されていません。 SharePointのモダンUIで自由にカスタムCSS・JSを使いたい場合は、SharePoint Framework（以降SPFx）という技術を使用する必要があります。 SPFxとは、ざっくりいうとSharePointの独自アプリを作成し、適用するものです。 前提条件 SharePoint Online モダンUI ※その他 […]
SharePoint Framework(以下SPFx)で独自アプリを作成するには、まず環境構築が必要になります。 環境構築と言うと難しく感じますが、必要なアプリをいくつかインストールしているだけなので、やってみると簡単です。 SPFxの作成に必要なツール SPFxを利用するために必要なツール一覧です。たくさんありますが、一つずつ試していきましょう。 Node.js（v16系） Gulp Yeoman Yeoman SharePointジェネレーター（3の追加パックのようなも […]
昨今ますます勢いを増すAI画像生成。 今回はAdobe社の提供するFireflyという画像生成AIを使ってみましょう。 このような高画質の画像を生成することができます。 Adobe Fireflyの特長 著作権問題がクリア 著作権面で泥棒かのように言われることがある画像生成AIですが、Fireflyは自社の高品質フォトストックサービスを学習元としているため、著作権クリーンです。 作品を提供しているクリエイターからも同意を得ています。 また、生成物を使用した後に、知的財産に関す […]
Google AnalyticsがGA4にアップデートされてから、デフォルトの状態では性別や年齢などのユーザー属性は取得できないようになりました。今回はその設定や手順を紹介します。 もしまだGA4に移行していなければ、ぜひこちらもご確認ください。 Googleアナリティクス現行verが2023年7月廃止！新verに移行する方法を解説 GA4はデフォルトではユーザー属性が取得できない 以前のGoogle Analyticsでは性別や年齢のユーザー属性が自動で集計されていましたが […]
SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。 SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。 SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。 静止画のSVG アニメーションを作成する前に、まず静 […]
2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。 ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。 今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。 object-fit 今までは、画像をアスペクト比を維持したまま領域一杯 […]
サイトにWordPressを導入したいというご要望は年々増えています。 受託で制作するサイトでは、WEBに慣れない人でも更新作業を行えるように、WordPressの管理画面をより使いやすくする必要があります。 今回は、クライアントに納品する前にやっておきたい管理画面のカスタマイズをご紹介します。 ログインURLを変更する WordPressはデフォルトでは必ず「http://xxx.co.jp/wp-login.php」の形になっていて、ログインURLが分かってしまいます。 […]
WEBページの要素で、斜め方向にカットされたデザインを見たことがあると思います。 これを実際にレスポンシブでコーディングするとなると、工夫が必要です。 （筆者は過去、斜め画像を用意してbackgroundに配置したところ、超ワイドディスプレイで想定外の表示になってしまったりと、ため息をついた覚えがあります） 今回はCSSのclip-pathを使用して、手軽に斜めのデザインを追加してみましょう。 clip-path 斜めのデザインを作るには、CSSプロパティのclip-path […]
先日Googleから、Googleアナリティクスの現行バージョン（ユニバーサルアナリティクスといいます）が2023年7月に廃止というアナウンスがなされました。 サポート自体が終了となるため、期間内に新バージョンのGoogleアナリティクス4プロパティに移行が必要になります。今回は、移行が必要かどうかの見分け方や、以降の方法を紹介します。 現行verと新verの見分け方 現在使用中のアナリティクスのプロパティが現行か新かを見分けるには、プロパティIDを確認します。 現行verプ […]
機能豊富なGoogle Analyticsですが、画面も複雑で、サイトに計測タグ仕込んだだけでそのままな場合も多いのではないでしょうか。 一段階ステップアップして、イベントトラッキングと参照元の機能を使用してみましょう。 これらを活用すれば、より深い分析が可能です。 イベントトラッキング イベントトラッキングとは？ イベントトラッキングを使用すると、サイト内にいるユーザーがどんな行動をとったかを知ることができます。 事例ページからお問合せのボタンをクリックした 特定のPDFを […]
コロナ禍ということもありましたが、私自身産休明けですぐに出社は難しく、在宅で1年間作業をしていました。 その際に使用して便利だったツールや、困ったことなどの所感を書きたいと思います。 使用していたツール TeamViewer https://www.teamviewer.com/ja/ このツールには、1年間で一番お世話になりました。 自宅で使用しているPCから、いつもオフィスで使用しているPCに接続して、遠隔操作できるツールです。 こちらのツールを使用して、リモートで制作作 […]
PremiereProのモザイクフィルターを使用すれば、ワンクリックで簡単にモザイクをかけることができます。 被写体を自動追尾する便利機能 PremiereProのモザイクフィルターは、被写体を自動追尾します。 歩く男性の顔にモザイクをかけ、自動追尾させた例です。簡単にできるのでやってみましょう。 手順 1.モザイクエフェクトをかける まずプロジェクトを開いて、動画素材をタイムラインに配置し、選択します。 エフェクトパネルから「モザイク」を探し、動画にドラッグドロップして適用 […]
Premiere ProのUltraキーエフェクトを使用すると、動画の一部を透明にすることができます。 イメージ的には、テレビの天気予報でキャスターと定点カメラの映像を合成して表示するといったような状況で使用できます。最近では、実況動画などでも似た手法がよく見受けられますね。 Ultraキーの特徴 Ultraキーは、動画の背景を透明にすることができます。 実際には特定色を指定して透明にするため、動画自体はグリーンバックで撮影する必要があります。 ▼動画の緑色を指定して透明にし […]
IEがお役目を終えるということで、CSSでスクロールスナップが使用できるようになります。 これを使用すると、CSS数行で簡易的なカルーセルを実装できるようになります。 特にスマートフォンなどのタッチデバイスではJSでの実装とほとんど変わらないような操作感を実現できます。 ＜JSを使用しないスクロール例＞ スクロールスナップさせる スクロールをスナップさせるには、scroll-snap-typeとscroll-snap-alignを使用します。 なんとこれだけで、子要素の横スク […]
Photoshopなどのグラフィックソフトで使用する乗算やオーバーレイなどのブレンドモードですが、CSSでも使用することができます。 mix-blend-mode ブレンドモードを使用するには、前面に重なる要素に、CSSで mix-blend-mode を追加するだけでOKです。簡単ですね。 ＜HTML＞ ＜CSS＞ 画像と背景が重なるように配置し、div.background には背景色を付けました。 multiply で乗算表示になります。 ブレンドモード一覧 15種類の […]
Wordpressの管理画面から、不要なメニューを削除しましょう。 不要なメニューを非表示にする 不要なメニューを非表示にするには、「functions.php」を編集します。 functions.php は、テーマのファイルがまとめられているフォルダの中にあります。 コメントメニューを非表示にする まず、コメントメニューを非表示にしてみましょう。ファイルの末尾に、下記を追加します。 remove_menu_page()のカッコの中には、ページのパスを記述します。 ＜ページの […]
PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます！ どんな機能？ 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にしたいか選択でき、昼夜の時間帯や、季節の具合などを調整できます。 使い方 手順1：被写体を選択する では、早速使ってみましょう。 被写体はそのままにしたい […]
Illustratorの「画像トレース」という機能を使用すれば、パスデータを作成することができます。 簡単に使えるので、ぜひロゴやイラストを作る時に活用してください。 「画像トレース」機能の使い方 画像トレースパネルを開く まず、メニューから画像トレースパネルを開きます。 [ウィンドウ]＞[画像トレース] スキャンしたデータをトレースする スキャンしたデータをIllustratorで画像オブジェクトとして開きます。 配置した画像を選択ツールで選択すると、画像トレースパネルがア […]
リーフレットやチラシなどの印刷物を作る時、長文をカラム分けすると文章が読みやすくなります。 このカラム分けされたテキストボックスは互いにリンクされており、片方で改行などの編集をすると、溢れたテキストが自動で次のテキストへ送られるようになっています。 領域を作ってリンクするだけなので、非常に簡単です。ぜひ習得してください。 やり方解説 手順1：四角オブジェクトを配置する まず、カラムを作成したい領域を決めて、四角形オブジェクトを配置します。 手順2：四角オブジェクトをテキストボ […]
最近、副業としてPIXTAなどで写真素材を販売する方が多いとの話を聞きました。 スマホで撮影した写真があれば手軽に始められるので、人気の副業のようです。 では、素材サイトヘビーユーザーのデザイナー目線で素材として使いやすく、ダウンロードしたい素材とはどんなものでしょうか？ 実際に写真をダウンロードして使う側の私が思う、使いやすい写真素材の特徴をまとめてみました。 その1.ピントがあっている これはマストです。ピントが合っていない・ブレている写真は、加工でもどうすることもできま […]
年々増えていく、フォントサイズを指定する単位。 「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。 今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。 決め手は「rem」と「vw」 CSSでまずは基準となるフォントサイズを決めます。下記のように設定します。 そして、個々のCSSを記述していく際、すべてのfont-sizeで「rem」単位を使用します。 PC […]
運営会社:株式会社8bit
制作サービス
運営サービス
