Framework・Office365を中心に扱うブログです。SharePointTweetSPFx開発を始めて幾星霜。当たり前のものもそうでないものもありますが、個人的に実施している実装方法をベストプラクティス集としてまとめました。これらを反映したサンプルをGitHubにもアップしておりますので併せてご覧ください。複数言語対応パッケージ化のコマンド定義マニフェストファイル関連srcフォルダ配下の~.manifest.jsonファイルでは、パッケージに含まれる機能(Webパーツなど)に関するIDや名称、プロパティなどが定義されます。Webパーツ名などはすべて英語で作成し後から日本語に変更Webパーツ名はページの編集時に、コマンド名はコマンドの利用者に、それぞれ表示されてしまいます。ここは日本語にしておきたいところですが、Yoコマンドでのプロジェクト作成時に日本語を入力してしまうとJavaScriptやTypeScriptのソースファイル名まで日本語になってしまいます。従ってプロジェクト作成時は英語で入力しておき、後からマニフェストファイルを編集してtitleを日本語にすることが必要になります。ICONで用意されているアイコン名を設定することができます。既定のままにせず、機能をよく表したアイコンに変えておきましょう。WebパーツにはSPO標準機能のように編集可能なタイトルを実装するSharePointの標準Webパーツには、ページの編集中にだけ入力可能なタイトル欄があります。これを実装しておくとWebパーツがSharePointサイトに良く馴染むようになります。マニフェストファイルでプロパティ(GitHubにアップしたソースではtitle)を定義しておきます。"Sample")ことで、代入した値を保存できます。DisplayMode.Edit)にだけ表示するテキストボックスにユーザーが入力できるように描画処理を記述します。実際のソースコードはSpfxBestPracticeWebPart.tsとSpfxBestPractice.tsxを参考にしてください。共通のscssファイルを作成し各scssファイルにインポートする後述のmixin定義などモジュール全体に関わる記述をすべてのscssファイルに記述するのは避けたいです。そこで私は共通のscssファイル(GitHubにアップしたソースではTheme.module.scss)を定義し、各scssファイルでimportするようにしています。メディアクエリを書きやすくするためのmixinを定義するSharePoint標準Webパーツでも一部行っているように、スタイルシート内にメディアクエリを書きたいシーンが結構あります。閾値の記述が各scssファイルに分散してしまうと嫌なので、変数とmixinを共通のscssファイルに記述するようにしています。記述方法はTheme.module.scssを参考にしてください。mixinの利用方法はSpfxBestPractice.module.scssを参考にしてください。SharePointサイトのテーマを反映するここを意識せずに開発すると、SharePoint標準機能の「外観の変更」を行ったときに見た目がおかしくなる可能性があります。これについては別の記事にまとめましたので参考にしてください。www.micknabewata.comTypeScript関連esnextを利用できるようにする便利な関数が使えるようになるので個人的にはesnextの利用がお気に入りです。tsconfig.jsonのlibを以下のように指定します。]例えばGitHubにアップしたサンプルではdocuments.tsファイル内でテストデータを生成するためにpadStartメソッドを利用していますが、これはesnextで利用可能になるメソッドです。serveコマンドを実行するとブラウザでワークベンチが起動しますが、ローカルワークベンチではSharePointと接続できないため、テストデータを利用するなどしてデータ取得/更新部分以外を動作確認することになります。これはこれで必要なのですが、最終的にはSharePointと接続することが多いためリモートワークベンチでも動作確認を行えるようにしておくとスムーズです。これを実現するには、serve.jsonファイルでserveConfigurationsを記述します。最初から記述されているinitialPageは削除してしまって問題ありません。コマンドでリモートワークベンチが起動します。グローバルに展開している企業様では、SharePointサイトも複数言語に対応している場合があります。このような場合、Webパーツを言語毎に開発するのではなく、ローカライズ用のファイルを利用することができます。GitHubにアップロードしたサンプルでは、locフォルダ配下に言語毎のファイルが存在します。ここで定義したオブジェクトをmystrings.d.tsファイルで受け取り、SpfxBestPracticeWebPart.tsファイルでstringsとしてimportして利用しています。locフォルダのパスはconfig.jsonに記述したlocalizedResourcesによって決まっています。開発したソリューションをSharePointテナントにアップロードするには、以下のコマンドを利用してパッケージ化を行う必要があります。--ship毎回2つのコマンドを打つのが面倒なので、package.jsonでコマンド定義をしておきましょう。},以上、参考になれば幸いです。復旧)【2019年11月時点最新】Flowの新ライセンス形態まとめSharePointでリストのコピーができるようになりました月別アーカイブはてなブログをはじめよう!micknabewataさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。