はてなブックマーク

SPFx開発を始めて幾星霜。当たり前のものもそうでないものもありますが、個人的に実施している実装方法をベストプラクティス集としてまとめました。これらを反映したサンプルをGitHubにもアップしておりますので併せてご覧ください。 github.com 開発したサンプル マニフェストファイル関連 Webパーツ名などはすべて英語で作成し後から日本語に変更 アイコンを変えるだけで印象が全然違う WebパーツにはSPO標準機能のように編集可能なタイトルを実装する スタイルシート関連 共通のscssファイルを作成し各scssファイルにインポートする メディアクエリを書きやすくするためのmixinを定義する SharePointサイトのテーマを反映する TypeScript関連 esnextを利用できるようにする デバッグ・動作確認関連 ローカルワークベンチとリモートワークベンチの両方を利用可能にしてお

Office 365関連のサービスの多くは Graph API で操作することができます。メール、予定表、Planner、OneDrive上のファイルなど様々なオブジェクトにアクセス可能です。 参考：Microsoft Graph の概要 これをSharePoint Framework (SPFx)で扱う方法を試したところ非常に簡単に実現ができましたので備忘を残しておきます。 利用例 実現手順 まずはAPIのエンドポイントを調べる プロジェクト作成 アクセス許可の定義 Microsoft Graph関連オブジェクトの型定義をインポート Microsoft Graphへの問い合わせ処理を作成 描画する処理を作成 SharePointへのデプロイ Webパーツの追加 利用例 ログインユーザーのPlannerタスクを表示 GitHub - MickNabewata/spfx-planner-we

Office 365のメッセージセンターで閲覧できる通知って、見るのが面倒ですよね。これをプログラムで取得する方法を試し、ついでに私の個人開発用テナントに通知されたメッセージを公開することをやってみたのでご紹介します。 メッセージセンターとは メッセージの取得方法 アップデート情報の公開ページ メッセージセンターとは Microsoft 365 管理センター > 正常性 > メッセージ センター で確認できます。 Office 365に関するアップデート情報を閲覧する画面です。 メッセージセンター このメッセージ センターですが、色々と確認が億劫でした。 動きが遅い。 メッセージの確認以外に毎日アクセスするほどの用事が無い。 英語だと気合入れて読まないといけない。 日本語は機械翻訳なので日本語と英語の両方を見比べたい。 でも翻訳するのにまた遅い。。。 そろそろやってらんなくなったのでメッセ

SharePoint Online モダンサイトの唯一のカスタマイズ方法として、SPFxも定着してきたように思います。本記事では初心を思い出しつつエンジニアがSPFx開発に入門するために概要・前提知識・参考になるリンクをまとめます。 尚、当記事は開発初心者向けの情報を掲載しております。バリバリのWebフロントエンドエンジニア様にとっては冗長な記載が多くなりますがご容赦ください。 SharePoint Framework (SPFx) とは SPFx開発に必要なスキル スキルが無い？心配無用。HelloWorldからどうぞ 簡単な開発に成功した後に周辺知識もどうぞ 事例好きの皆様お待たせしました。こちら事例です。 SharePoint Framework (SPFx) とは SPFxは、SharePoint Online モダンサイトに対してJavaScript / CSSでのカスタマイズを

Node.js入門者の私がサーバーサイドを構築してみました。 expressを使った構成ですが、 公式サンプルは生のjavascriptでした。 今回はtypescriptにしたかったので少々手間取りましたが 出来上がってしまえばシンプルでした。 Yeomanジェネレーターも作成しましたのでよろしければどうぞ。 環境構成 出来上がったソースコード Yeomanジェネレーター Yeomanとは 利用方法 ソース解説 エンドポイントを追加するには API構築のコア部分 (express) セキュリティ確保のためのHTTPヘッダ付与 (helmet) コンソールへのログ出力 (morgan) Cookie利用 (cookie-parser) タスク自動化 (gulp / gulp-typescript / gulp-uglify) テスト (mocha / chai / sinon) 環境構成

Office 365は大変機能が多く、進化も速いです。 中でもSharePointは工夫次第で様々な事に活躍出来る反面、 何に使って良いのか迷ってしまうところがあります。 と、いう事で、長年SharePointサイトの構築に関わってきたワタクシが経験した、 SharePointの活用事例を紹介します。 ※ 当記事で紹介する内容はあくまで私の主観です。 どう使うのが良いのか 特に多い事例 活用事例の紹介 社内ポータル 承認・申請 その他 リンク集 検索機能 他のサイトの情報を集約（ハブ サイト） ExcelでなんちゃってBI（データの見える化） SharePointに興味が出たら 初心者向けのブログ記事 Webパーツ一覧 書籍 どう使うのが良いのか モダン機能の進化に合わせて考え直してみました。 こちらの記事をどうぞ。 www.micknabewata.com 特に多い事例 私が提案・構築に

SharePointサイトのテンプレート展開は昔からネックでした。 部署毎にポータルを持ちたい 複数あるサイトコレクションに同じ機能を展開したい などの要望があがると頭を抱えることが多いです。 何故ならSharePointは設定項目が非常に多く、 それらを手動で複数サイトに横展開するのは無理があるからです。 解決策の一つとして、「サイトテンプレート」と「リストテンプレート」の 機能がありますが、これらはモダンサイトでサポートされません。 また、クラシックサイトでも発行機能が有効になっているサイトではサポートされません。 モダンサイトでは、サイトのテンプレート化に対する新しい方法が提供されています。 「サイトデザイン」と「サイトスクリプト」です。 試してみた結果 サイトデザインとは サイトスクリプトとは PnPプロビジョニングエンジンとは 既存サイトをテンプレート化する際の作業手順 1．テン

Excelは便利ですよね。 とにかく知っている人が多いし、社内の人もお客様もExcelをインストールしていない人のほうが少ないです。 Office 365入れたしExcel卒業すっかなー ナントカ申請もカントカ申請も全部Excelじゃどーしょもないなー でも無理ぽ。 という方、とりあえず既存の申請書をSharePointに連携するところから始めてみませんか？ 連携するとこうなる 設定方法 Step1. SharePoint ドキュメント ライブラリを作成し、列とビューを整える Step2. Excelにプロパティ設定 利用方法 Step1. Excelファイルを作成 Step2. SharePoint ドキュメント ライブラリにアップロード 連携するとこうなる Excelで作った単票をSharePointにアップロードすると・・ 値が連携される！ とまあタイトルのままなのですが、Excel

はじめからGitHubに公開するつもりでコードを書く場合は 先にGitHubにリポジトリを作成するほうが簡単です。 【初心者向け】GitHubにリポジトリを作成してVisual Studio Codeと連携するまで - 鍋綿ブログ この記事では、コードを書いた後でGitHubに公開したくなった時に どうするかを紹介します。 1．Visual Studio Codeでフォルダを開く 2．GitHubにリポジトリを作成 3．ローカルリポジトリを作成 4．リモートリポジトリとしてGitHubを追加 5．GitHubからPull 6．ローカルリポジトリをコミット 7．リモートリポジトリにプッシュ 8．開発を続けよう [参考]プログラミング初学者向けのお勧め勉強法 1．Visual Studio Codeでフォルダを開く 手元で開発したコードをVisual Studio Codeで開いておきます。

Visual Studio CodeからGitHubにソースコードを同期する手順のメモです。 以下を前提とします。 GitHubにアカウントを持っていること Visual Studio Codeをインストール済であること Visual Studio CodeからGitHubが扱える状態になっていること 1．GitHubにリポジトリを作成 2．GitHubリポジトリをローカルにクローン 3．Visual Studio Codeで開発を開始 [参考] 先にローカルでソースコードを作ってしまった場合 [参考]プログラミング初学者向けのお勧め勉強法 1．GitHubにリポジトリを作成 ブラウザでGitHubにアクセスします。 サインイン後、RepositoriesタブでNewボタンをクリックします。 Repositoriesタブ リポジトリ名、説明を適宜入力します。 GitHubに公開するならRe