SharePoint Framework

去年の暮れぐらいだったか、MSのお知らせでSharePoint Frameworkという新しい開発環境を使った SharePoint SiteのCustomizationが可能になりました。という連絡があった。  自分がやりたいSPサイトのCustomizationは 基本的にJavaScriptをページに埋め込むJavaScript Injectionという手法だ。 これでクライエントサイドの描画をコントロールするCSRフックとかリストやファイルのアイテムをAjaxで読み書きするREST APIなどを使ってカスタムページを作るという方法で用が足りてしまうので、あまり気にしていなかったのだが、この方法、最近、その進化が目立つModern view  pageでは使えない。 これは開発するのにVisual Studioが必須であるSharePoint Add-Inでも同じ様で、 どうも今の時点でModern Look componentのCustomizationをサポートしているのはSharePoint Frameworkのみのようなのだ。

で、Dev.Office.comのDocumentationを眺めてみると、なんとこれ、 Node.JS上で全部動いているのだ。

NPMで yo,  gulpと @microsoft/generator-sharepoint を導入し Project folderを作って以下を実行

yo @microsoft/sharepoint

これで必要なファイル群がフォルダーにインストールされる。 hello worldのテンプレートになっているので、これでもうnode.js 上のローカルPCで動くSharePointのページを模したWorkbench上での実行が可能(下記コマンドでDefaultブラウザが勝手に立ち上がる)

gulp trust-dev-center

gulp serve

ここまで、SharePointサイトにアクセスする必要すらない。 Step by Stepはdev.office.comに詳しいので割愛 (Build your first SharePoint client-side web part (Hello World part1)

SharePointのサイトでもすでにDevelopper siteが例えば”https://mysite.com/sites/dev”などとして設定されているなら、 ”https://mysite.com/sites/dev/_layouts/workbench.aspx” にアクセスすると、開発中のwebPart のWorkbenchがSharePoint上で作動する。

そしてこのTool Chainによる開発、Visual Studioが必要ない、というか使えない。dev.office.comのお勧めEditorはVS Code. IDEの例としてJetBrainのWebStormがあげられているなどVisual Studioへの依存性が一切ない。(C#もドットnetも使わないなら当たり前というべきか)

ただ、使われているコードが通常のJavaScriptではなく、TypeScriptなのだ。 TypeScriptのコードは実行時にはJavaScriptにばらされるのでそんなに大きなLearning Curveにはならない、と予測はしているのだが、これは学習する必要があるんだろう。

Node.jsは言語というより開発環境のベースとして使われるので、これ自体を学ぶ必要はない。

VSで使っていたNugetだとかMS buildーtoolなどのツールが、下のようにNode.JS上で動くツールにおきかわっているわけで、今わかっている範囲でまとめると

  1. Node.js: Install するだけ、普通のJavaScriptの知識で十分のはず。
  2. NPM :DependencyのUpdateなど、使い方は学んだほうがよさそう。yarnでもいいのかな
  3. yo.js:Install するだけ、学習の必要性はなさそう
  4. gulp: コマンドをいくつか覚えるだけで学習の必要性はなさそう
  5. typescript: 学習の要あり
  6. webpack:@microsoft モジュールを導入したときに含まれている。さわらなくてよい。
  7. VS CodeまたはWebStorm:Dev.office.comはVS Codeを使った用例を挙げているが、自分は従来からつかっているWebStormを使う。

というわけで、なんと開発環境的には、2,3,4,5,6は1のNodeJSが動けば動くのでなんでもよく、VS codeもWebStormもマルチOS環境で動くので 要するに Linux上で開発できてしまうのだ。

というわけで、javaScriptをかじっている人間にはハードルが低そうな予感。 Linux環境でぼちぼちやってみようかな?

SharePoint Change Page Title without changing site address ページタイトルをサイトアドレスを変えずに変更する。

これってSharePointのこの部分がちゃんと動いていないだけなのではないかとおもうのだが、今現在のOffice365(SharePoint Online)のインプリメンテーションだと、Page Attributeでページタイトルを変更するとaspx ページの名前自体が変わってしまう。

たとえば https://mysite.sharepoint.com/sites/mysite/SitePages/thispage.aspx

というページがあるとして、これだと表示されるページタイトルが”thispage”となってしまう。これを Edit pageからタイトル変更して ”This Page”とすると、 サイトアドレスが

https://mysite.sharepoint.coms/sites/mysite/SitePages/This%20Page.aspx

となってしまう。サイトアドレスをなるべく短くしたいのでページタイトルとサイトアドレスの一部になるページの名前を別けることができればよいのだが、今の時点ではできない。

世の中には同じことを不便と考える人がいるわけで、何件かの記事ではSharePoint Designerを使ってマスターページを変更する方法が述べられている。すでにSharePointにある機能をターンオンするだけの簡単な修正ではあるが、

1)マスターページを変更する必要がある。
2)SharePoint Designerが必要

すなわち、サイトオーナーでかつSharePoint Designerを使えるという条件を満足していなければならない。

ブラウザーのdebug Toolで確認してみたら以外と簡単にタイトルだけ変更できることが判ったのでここに書いておく。 サイトのエディター権限があればできるというのが利点。

ターゲットのページでエディットモードに移行し、適当なところに Insert ->Embed Codeでコードエディターを開く。

以下を入力する

<script>
document.getElementById('DeltaPlaceHolderPageTitleInTitleArea').innerHTML="My Page";
</script>

これだけである。 ページタイトルが”My Page”となる。

SharePointの場合、CSRというメカニズムがあって、表示する内容の大部分は一度ブラウザーがスクリプトを実行したのち、データを描画するため、 ページへの書き込みのタイミングを遅らせなければならないのが普通だが、タイトル部分は最初の読み込み時に描かれてから変更がないため、上のようにブラウザがスクリプトを読み込んで即実行、という単純な動作でも有効なんである。

ちなみにWiki PageとWeb Part Pageの両方で有効。 Site Pageはためしていない。

 

 

constructing long string with Javascript

There is a time you need to construct a string (for instance, to create a html block) in your code.

In the simpliest approach, youcan constract the string variable  like so

var html='<head><body>’+contentVariable+’more stuff’ + ‘</body></head>’;

this becomes very messy quickly once more variables, more nested construction is needed.

I used to keep concatinating the string, like so

var html='<head></body>’;

html +=  contentVariable;

html += ‘ more Stuff’;

html += ‘</body></head>’;

 

 

Then I saw a pattern in the couple of codes from internet;

var h=[‘<head><body’];

h.push(contentVariable);

h.push(‘more Stuff’);

h.push(‘</head></body>’);

var html=h.join(”);

The More concatenation needed, the more convinient the last method becomes. Key is to join the array element with null delimiter.

exploring SharePoint Online

Our office is soon moving to SharePoint online. Currently we are using SP2007 and Microsoft does not support content migration from 2007 to 2013 or SP online. This is good and bad. Good because we can build sites from scratch, bad because there is no easy way to move our contents from SP2007 to SP online. We should be able to copy files and folders from 2007 to online but all the metadata will be lost. lists will be even tougher. we have the third party solution called ShareGate but IT guys are telling us it is faily slow we can not possibly migrate the whole sites (that is in the size of the order of Terabytes.) and would like to selectively use the tool. Document Management is tricky under the SharePoint at best.

UI has been greatly improved. It is now much easier to interact with contents with JavaScript. I am having tremendous fun with technique like CSR (client side rendering) and REST API that can be used with CSR or as a conetnt of CEWP as usual.  Furthermore , attaching JavaScript code to web part is made less painful by the introduction of JsLink option and inclusion of script web part.

It is also good to have started late in the game. Internet is filled with power user tips. (I can use most of the technique meant for SharePoint 2013 with SharePoint online.)

One of my favorite technique called “calculated column” is still possible with much less hassle.  Again CSR can be used for this with literally one line of code.  Even better, I can forego with calculated columns at all and directly manipulate the target columns and show bar graph or traffic signal instead, using CSR’s context override.

Filter/connection of WebParts on the page is now performed on the list and not view. In another word, the filtering column do not need to be a part of the view.  This is tremendous for me. I no longer need to hide a column that is used for my filter because I don’t need to include the column in the view to start with.

EasyTabs that we used and found so useful for SharePoint 2007 does not work as is.  Again somebody has modified it for SharePoint 2013 and it is  working. Christophe seems to have developed another tool package that includes EasyTabs functionality but my inquiry to him went unanswered so I am using this version.

There is another code called Hillibily Tabs which essentially do the same thing as EasyTabs.  This one uses jQuery and jQuery UI (and CSS) to manipulate the tab, so how do I say this..  It’s flashy and probably more maintainable.

Excellent write up on CSR by Andrei Markeev is here be sure to check other articles by him.

This one by Kaptyn is also good

Many CSR examples are on Office Dev Center, uploaded by Muawiyah Shannak.

The above examples contains calculated column like effect witihout using the calculated column.    However, if you insist Calculated columns to be used, here is Christoph’s explanation of how it can be done.

List Roll up

I was first thinking maybe we need to purchase third party package to do this.  It turned out this is doable with home made JavaScript code with REST API. I am able to Roll up the list (read only at this time, because I only feel comfortable with “GET” potion of the API) in my sandbox, using a couple of sub-sites.  I will try and see how scalable this technique is.

Minimum Download Strategy

Sooner or later, people will hit this “MDS” *issues*  where the view changes back to its default look when switching the view,  or code breaks because it can not find jQuery that was supposed to have been loaded.  I am still learning this but found some blog entries very helpful.

  1. Article by Kalmstrom.com talks about what happens with MDS in very short text and also give pointers to how to deal with it
  2. SharePoint 2013 – A Better Pattern for Client Side Rendering Scripts shows a script pattern that can be used for site with or without MDS feature enabled.

However, my observation is that once you introduce your own code to the mix, then SharePoint engine with MDS seems to try render first with MDS way, then try to render again for “foreign” code.  Because of this, some of the pages does load faster with MDS off.  So turning this feature is not as bad as it may sound.

 

Most of the link here are from various blog entries.  Again, it must be much easier now than two years ago to find the information I need.  MSDN also have many documents I can refer to but there coverage is broader (C#, XML ,.aspx and JavaScript code).  As a business side power user, I (can) only use JavaScript and find those individuals’ entries priceless. My appreciation goes to those who spent many nights to figure out and then took a time to write about it!

SharePoint online :: modifying “New item or Edit this list” to “Edit this list”

This is my first “SharePoint Online” related javaScript.(I am still experimenting with nuance of SP online)
This script changes “New item or Edit this list” links to simpler “Edit this list link.


/**
* Created by A2life on 3/24/2016.
* Modify new or edit div to "edit this list" only
* modify "New items or edit" elements on entire page (not just webPart this is attached to)
* */
(function () {

var thisContext = {};
thisContext.OnPostRender = modifynewEdit;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(thisContext);

})();

function modifynewEdit() {
// jQuery library is required in this sample
// Fallback to loading jQuery from a CDN path if the local is unavailable
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"><\/script>'));

jQuery("td.ms-list-addnew:contains('new')").each(function (index) { //only respond to "New" elements
var edit = $(this).find('a:contains("dit")'); // because I am looking for "[E|e]dit"
edit = edit.text("Edit").add("<span> this list</span>"); // reconstruct link with proper words
$(this).html(edit);
});
}

attach this to list webPart as jsLink parameter. If uploaded to Site Assets folder as “modifyEdit.js” , it should look like “~site/SiteAssets/modifyEdit.js” . “~site” is a token for the site that sharePoint uses to resolve the url reference.

Note on this code.

  • The document.write line dynamically writes a script tag for jQuery. This appears to be more reliable way of loading jQuery rather than referencing to the file within script tag.
  • The code creates a context override for onPostRender SP event for the webPart (of item list view) being attached. This event seems to fire even when other list view on the same view is changed  (and the code invoked will affect other list views on the same page as expected) so the function modifynewEdit is attached to this event.

Windows 10にアップデートしたら一部アプリケーション(サンダーバード)のフォントがにじむ・ぼやける・溶ける という話

Windows 10へのアップデートはつつがなく終了。 驚いたのはVistaが搭載されていた古ーいノートブックパソコンでも難なくアップデートできてしまったということ。 2年前に組んだデスクトップは全く問題なくアップグレード終了、
と思ったら、 メールクライエントとして長く使わしてもらっているサンダーバードの画面が変だ。 テキストがにじんでいる。

そこでBlur TextとかImage fuzzyとかでグーグル検索をしてみたら、でてくるはでてくるは。  でもたいていの記事はWindows画面のスケーリングを100パーセントにもどせ、だとか,サンダーバードのこんふぃぐにCSSファイルを追加しろだとか、 ようするに画面の解像度と表示フォントのからみの問題としてとらえている。

これかな?と思ったのはThunderbirdのオプション設定においてgfx.direct2d.disabledというパラメーターをTrueに設定する、というもの。 詳細手順はここに詳しい。

でもやっぱり治らない。

自分が直面した問題は 最初はきれいな表示になっていても、数秒そのままにしておくと、文字フォントがどんどんにじんでいってしまう、というもの。 目の前で文字が溶けていく、というか なんだか余計な処理がはじまっているかんじなのだ。

で、やっと見つけたのがこの記事

この記事はAMDのグラフィックスカードの3D機能のモフォロジカルアンチアライアス(MLAA)なる機能が悪さをしているので、これをオフにしようね、というもの。 で、自分のマシンのスペックをみてみれば、 Intelの6400というグラフィックスチップなのだった。 が、 解決法は同じで、3D処理の部分のコンサーバティブモーフォロジカルアンチアライアスの(CMLAA)設定をオフにしてみたら解決。 何かコンサーバティブ(保守的)なものか さっぱりわからぬ。
1.Windows 10の画面を右クリックし、”グラフィックス・プロパティ”を選択
2.3D設定を選び、 CMLAAの設定をオフにする。

これって、おそらくゲーム用のグラフィックスをスムーズにみせるためのロジックなんだろうが、メールアプリには必要ない。

どうもWindows 10にアップグレードしたときに、インストーラが気をきかして? 最新のグラフィックスドライバーを導入したみたいだ。 サンダーバードほどではないにせよ、 エッジブラウザにも影響がでているような感じだった。

Blurry, fuzzy or melting text on Thunderbird after upgrading to Windows 10

When I upgraded to Windows 10, I noticed text on thunderbird was blurry or fuzzy. I googled up the web and had a lot of hit on this subject. There are variety of fixes suggested like…
1) disable hardware acceralation
2) Go to TB option page and change the gfx.direct2d.disabled to true
3) Set Windows display scaling to 100%
etc., etc.

While I believe those suggesions are all true, none of them solved my issue.
Further observation into TB’s screen showed the text start out showing clear then after few seconds, it becomes fuzzy. It feels like the text are melting in front of my eyes.

Then I found this article

The article was for AMD graphics driver. My graphic chip is Intel HD graphics 4600, but looking at the Intell HD graphics control panel, I have found the 3D setting where Conservative Morphological Anti-Aliasing is set to on. Setting this option to off immediately resolved the issue.

It appears, when my PC was upgraded to Windows 10, the device driver was also updated and it introduced this CMAA setting. This may be a good technology for gaming, but not for Document application.

日経電子版 Evernoteとの連携サービスを開始

ビジネスマンのたしなみとして日経電子版を購読しているのだが、 今朝メールボックスをみたら、 以下のようなお知らせが来ていた。

日経電子版はインターネット上に文書や写真などを保存・共有するサービスを提供
するエバーノートとの連携を始めました。双方のサービス上で、キーワードや文脈に
沿ったコンテンツをタイムリーに表示し、情報の収集や分析が効率的になります。
以下略

これは便利そうだ。今までもWEB clipper で記事を切り抜いてはいたが、これからはもっとインテリジェントな切り抜きができそうだ。

 ちなみに自分が初めてEverNoteに触ったのは2007年、まだPalm機をPDAとして使っていた時期だった。 AceCADのDigiMemoを購入したらバンドルされてきたPC用のソフトだった。 これはLotus 123なみのキラーアプリだ、と思った記憶がある。 当時は日本語が通らなかったが、問い合わせたら、いつのまにかCJK版のベータテスターになっていたりしているうちに 2008年にはWEBサービスを開始。クラウドにローカルデータのコピーが保存され同期するというデータモデルは当時としては画期的だった。
自分のユーザーアカウント番号は6万9千番台、 今はどれくらいのユーザー数がいるのかわからない(2011年時点で1000万人超え, 2013年末には8000万以上)のだが 今にして思えばEarly Adopterだったわけだ。

Nexus7 OS 更新でメモリー容量が半分になってしまった、という話

Android oS 5.0.2 にUpgradeしたのは良いが、メモリー容量が半分になってしまったという話。

2012年に発売され既に製造終了のNexus 7であるが、Googleから販売されただけに最新OS Lollipop(5.0.2)がPushされてきた。 勿論喜んでアップデートしたわけだが、再起動後、データを復旧した後の動きがきわめて遅い。 そのうち「メモリ-容量が足りなので一部機能が使えません。 不要なデータやアプリを削除してください。」などというお知らせが出てしまった。

調べてみると、全部のメモリー容量が6ギガちょっとしかない。 

あれ?

たしか自分が購入したのは16ギガバイトモデルだったはず。 10ギガバイトもOSのファームウエアにに使われているわけ?

インターネット検索してみると、メモリー容量が半分になってしまったなど、同じ問題に直面した方たちが何人もいるようだ。

対応は簡単でファクトリーリセットをかけるとすべてのメモリー領域を認識するようになる。

勿論データーはすっ飛んでしまうわけなのでもう一度リストアをするはめになったが、アカウントにログインするだけでほぼ以前の使用状態まで復帰できるのは便利である。

HP‐12Cのセグメント欠け

自分の持っているHP-12Cは電池がCR2032を2枚使うもので、要はオリジナルではなく、21世紀に入ってから作られたAtmelのマイコンを使ってオリジナルのファームウエアをエミュレートしたものだ。 当然実行速度は速くなっており、形状的にも手軽なのでちょっとしたビジネス計算用にオフィスの机の上に置いてあったのだが、使いだしてから半年もたたないうちにLCDのセグメント欠けが発生するようになった。セグメントが1本、2本とかけていくもので8を表示しようとすると日の代わりにトのような表示になってしまう。 最初は電池を変えるともとに戻ったりしていたのだが、そのうち欠けるセグメントがどんどん増えてきて計算機として用をなさなくなってしまった。

というわけで卓上には48Gを復活させ、12Cのほうは机の引出に投げ込んであった。

最近、整理をした時に出てきたので、どうせ捨てるならその前にばらして中身を見てみよう、と思った。

ゴム足の下のネジ4本と電池室のネジ2本を外すと、上蓋と下蓋に分解できる。 この状態で観てみると、表示用のLCDのFPCの端面が部品実装した配線板に直接張り付けられている。 経験上からHeat Sealという製法で接着されているとわかったので、この状態で電池を入れ、試しにFPCのこの部分をピンセットの先で配線板に押し付けてみると、一部の表示が復活する。押す場所によって復活するセグメントの位置も変わる。

工程上では加熱圧着することによって接続をとることになっているが、接続部分がはがれかかっているらしい。 そこで 小型のHeat Gunを使ってこの部分を温めながら、マイナスドライバーの先で、FPCの接続部分をまんべんなく押してみた。

さめるのを待って電源ONしてみたらセグメント欠けは無くなっており、通常作動に戻っている。

組み立てなおしてHP12Cしっかり復活してしまった。 2か月ほど経過したが問題なし。

近頃のHPの電卓は品質管理が良くないね。