SharePointのモダンUIで、SharePoint Framework（以降SPFx）という技術を使用し、CSSとJSを入力できる独自WEBパーツを作ります。 旧来のクラシックUIではスクリプトエディターと呼ばれていたWEBパーツを再現します。 前提条件 SharePoint Online モダンUI SPFxでWEBパーツを作成し、カスタムのスクリプト入力欄を構築する カスタムスクリプト（CSS・JS）の適用範囲は、WEBパーツを設置したそのページのみ アプリの登録に […]
SharePointって一言でいうと何？ SharePointは、 “社内の人だけ見れるWebサイトを簡単につくれるクラウドサービス”です。 「このページを見れば社内の情報がまとまっている！」というサイト、あったら便利ですよね。 簡単ってどれくらい？ 実際のSharePointの編集画面です。難しいコードを書いたりする必要はありません。 PowerPointのように、パーツを選んで置いていくだけです。 パーツは色々用意されています。 リンクを一覧で並べ […]
「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。 1.CSSとJSが直接使えない WordPres […]
こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。 スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。 今回は、After Effects（以降AE）でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。 もう一度再生 作業フロー アニメーション作成からアプリに組み込みまで、大まか […]
SharePointとは？ SharePointはMicrosoftが提供する情報共有サービスです。WordやExcel、PDFなどのファイルを共有したり、お知らせや掲示板を投稿して、 社内ポータルサイトの用に活用することも可能です。 高い機密性が特長 SharePointは、法人向けのクラウドサービスなので、作成したサイトは、アクセス権があるチームメンバー限定で公開され、外部のメンバーからは閲覧できません。サイトはチーム単位で作成でき、権限設定により、必要な人にだけ情報を見 […]
Premiere Proの機能を使って、動画素材の音声を自動で文字起こししてみましょう。起こしたテキストは、発話タイミングに合わせて字幕として表示することもできます。とても簡単にできるので、ぜひ試してみてください。 自動文字起こし機能の使い方 1.テキストパネルから文字起こしを行う 音声データを含んだ動画をタイムラインに配置します。 ウィンドウメニューから[テキストパネル]を開き、テキストパネルの[キャプション]タブから、[シーケンスから文字起こし]を押します。 音声が配置さ […]
AIで生成する画像は、素材として使うには「人工的な違和感」が残ります。 なんとなくAIと分かってしまうので、Photoshopでひと手間レタッチして自然な雰囲気に近づけてみましょう。 レタッチ前後の比較 今回は、Adobe Fireflyで作成した写真を使用しました。 レタッチ前後で並べるだけでこんなに違います。 主にAI写真に違和感を感じる原因は、以下の点があげられます。 笑顔が過剰 顔のパーツが綺麗に左右対称 肌に毛穴が無く、コントラストが強すぎる これらの原因をひとつず […]
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を使用します。 なんとこれだけで、子要素の横スク […]
運営会社:株式会社8bit
制作サービス
運営サービス
