Category Archives: Web making

array_reduceの話２

Posted on by
Reply
array_reduceと　arrayのsplat　オペレーターを使うと、同じアレーを生成するという意味のない関数ができる。 

$source_array=[3,2,4,5];
$nop_array=array_reduce($source_array, fn($carry,$item)=>[...$carry, $item],[]);
print_r($nop_array); //array=>[3,2,4,5]
で、パターンを使って、array_mapもarray_filterもarray_reduceで代用できるというお話 



// array reduce to mimic array_map
$source_array=[3,2,4,5];
$double=function($x){
    return $x*2;
};
$mapped_array=array_reduce($source_array,fn($carry,$item)=>[...$carry,$double($item)],[]);

print_r($mapped_array); //array=>[6,4,8,10]

//array reduce to mimic array_filter

$even_fn= function($x){ //return true if even
   return ($x % 2)==0;
};


$filtered_array=array_reduce($source_array,
    fn($carry,$item)=>$even_fn($item)?[...$carry,$item]:$carry,
    []);


print_r($filtered_array); //array=>[2,4]
めでたし、めでたし

array_reduceの話

Posted on by
Reply

PHPでプログラミングするとき、例えば、以下のようなアレィがあったとする

$fields=array("a"=>"A", "b"=>"B", "c"=>"C", "d"=>"D")

この内容をキーとともにリストアップしたいとき、まず思いつくのがforeachを使ってこう書く方法

$output="<h3>listing array with foreach</h3>";
foreach($fields as $key=>$value){
    $output.="<pre>".$key.":"$value."</pre>"
}
echo $output;

ただ、このアレィの複数エレメントを一つの値（この場合は一つの文字列）にまとめるという風に考えるとarray_reduceという関数を使っても同じことができる

$output="<h3>Listing array with array_reduce</h3>";
$output=array_reduce(array_keys($fields),fn($curry,$item)=>$curry."<pre>".$item.":".$fields[$item]."</pre>",$output
);
echo $output;

この関数、単純なArray処理は問題ないとして、Associative　Arrayを処理するとなると、はたと困るが、渡すArrayを値ではなく、キーを渡すことで可能となる。これは一つ目の因数にarray_keysを使うことで実現できる。コールバックには因数が二つ付くが、慣習として$curry と$itemという変数名を使う。for 文に$iをつかっているのと同様で、もちろんほかの変数名としても問題ない。$curryは結果を集積していく入れ物。$itemはアレィの各エレメント。上の例ではコールバック関数はアローファンクションを使ってインラインの書き込み。　三つ目の因数（$output)は初期値

このarray_reduceの使いかたをネットの検索などで探すと、数字を加算していくような例がよく紹介されているが、上のように文字列アレィの加工にも有効。　さらに、このアレィは関数のアレィでもよいわけで、例えば、複数の関数で同じ文字列の処理を繰り返すような場合、例えば、文字列をトリムしあとhtmlにエンコードしたい場合など、つまり同じ文字列に何度もパスをかけて加工したい場合など

$output=trim($output);
$output=htmlspecialchars($output);
//または
$output=htmlspecialchars(trim($output));

のかわりに

$output= array_reduce([trim,htmlspecialchars], fn($curry,$item)=>$item($curry),$output)

と書いてしまう技がある。関数が二つなら最初のアプローチのほうがよさそうだが、かかわる関数が増えてくると、コードのメンテナンスは下のパターンのほうがすっきりするよ、とFunctional Programmingの推進者たちはいっているが、さてどうする。

$functionsArray=[fn1,fn2,fn3,fn4,fn5]; //同じオブジェクトに対し、5つの関数処理をおこないたい
$result=array_reduce($functionArray, fn($curry,$item)=>$item($curry),$initialValue);

“Why did I not think of this?” moment in MODX 3 snippet development with PHPStorm

Posted on by
Reply

This is one of those ‘Aha!’ moments.

MODX is one of CMSs (content management system) that I have been using for a long time to maintain my shogi site. Market penetration of this CMS is said to be 0.1%. As of this writing, 43% of of Web sites uses WordPress and no other CMS reach even 10% of market share. (source, w3techs.com . I actually think MODX penetration is much greater than this number, MODX does not leave big footprint to show it’s identity in front of web crawlers. -Many sites I know powered by MODX, including mine – were identified as non-CMS site by w3tech’s tool.— Nevertheless, there is no doubt WordPress dominates the CMS market)

Although both uses same language (PHP) for powering the site, MODX gives much more flexibility in site design but you need to be proficient with HTML and CSS (and JavaScript). In another word, MODX is a tool while WordPress is a product.

What I liked about MODX over WordPress at the time was a separation of PHP code and HTML. This was a long time ago so the situation might have changed on WordPress, but I have been happy with MODX since.

At the time, I also looked at Drupal and Joomra . All of them forces you to follow their interpretation of what website should be. MODX has no opinion on how you want to create Web site. You have a total freedom.

On the other hand, if the only thing you want to do with your site is blogging, there is no better solution than using WordPress.

I digressed. Back to the subject!

With a wealth of plug-ins available, your rarely need to code in PHP. When you do though, MODX separates a PHP coding part from HTML with a thing called Snippets. A snippet is then inserted in to HTML with a use of tag. 

[[aSnippet]]

You can edit a snippet within MODX backend’s editor. With a plugin like ‘ACE’ there is a nominal amount of syntax checking to the PHP code. Unfortunately, I am being spoiled with convenience of IDE such as PHPStorm,

MODX backend, Snippet editor with ACE plugin

So there is a desire to be able to write a snippet code using PHPStorm and get benefits of auto-completion and methods hinting, strict error checking and warning.

Unfortunately, there is no plugin in PHPStorm for MODX or MODX plugn for PHPStorm.

When I google “MODX with PHPStorm”, there are several hits, Although none of them gave me a direct answer on what I wanted to do, I was able to put enough facts together and came up with a solution. The solution that was just waiting for me to assemble few known facts, that I have used all of them separately in the past!


1. Fact that PHPstorm can create a project using existing remote site contents, so that PHPStorm can pull all file setup from MODX site.

PHPStorm->File->New Project from Existing Files


2. Fact that PHPstorm can then start syncing file contents of my local project files to server files.

File sync options available in PHPStorm

Ok, but Snippet is stored in Database. the code is not in the file, but then,

3. Fact, MODX snippet code can be from a static file, meaning I can create a PHP file and feed it as a snippet to MODX by turning on “is Static” option and point to the file location

Is Static option is turned on for Snippet. Snippet is now fed from “static file”



Result: When I combine those 3 factors, I can create a snippet with a comfort of PHPStorm IDE environment.

Snippet now editable in PHPStorm
Snippet output on browser page, powered through MODX

What do I gain? Full context support and code hinting, as PHPStorm analyzes whole MODX site and figures out all variables and object and its methods being used inside MODX. I have to give credit to MODX development team for fully documenting source files. Thank you!

PHPstorm explains what getOption method is
PHPStorm autocomplete support in action.

You can also open the corresponding file by pointing to method and do control-b to drill down on function.

I edit a file in PHPStorm, and you either 1) turn on auto-sync between your local files and server files or 2) manually upload changed file to server. Then I can run and test the snippet with MODX backend immediately.

So all of the sudden, I feel like invincible. It will be very hard for me to make coding error. (Ok, logic error still possible)

Once Snippet development is done, you may switch off the ‘is static’ option and keep the snippet inside database, remove the php file from the system.

One thing that is kind of annoying is that by default, PHPstorm thinks $modx variable is undefined. The default setting on PHPStorm’s inspections on undefined variable is somewhat on conservative side. It will not even acknowledge variables from included file!. To mitigate this, you need to put a check on “Search for variable’s definition outside the current file”

PHP settings->Editor->Inspection->PHP->Undefined symbols->Undefined variable

It hurts to think that I have been using both PHPstorm and MODX for more than 10 years and I am figuring this out just now 🙁

Creating a Blog page inside MODX version 3 web site

Posted on by
Reply

MODX comes clean slate so there is no ‘ready to use’ provisions for creating Blog style site. One has to set it up using tools available in the CMS.

I took an easy way out for my production site by creating blog site using free wordPress service and then feed content to MODX page. with this, the only extra you will need is Spiefeed to handle rss feed from WordPress.  But for purist approach it is certainly possible to setup blog section within MODX using few extras.

There are several articles available for creating Blog sites using MODX.  The one shown in the modx official site is somewhat dated, but the article actually have a link to the instruction/article of more recent implementation of MODX blog site.  Link is here.   Better yet, this instruction is accompanied with a package published in the github which has all chunks, a snippet and a template packaged up to duplicate the blog site that the article discusses.  A demo site is also available to check out the feel of using this template. The document states that the demo utilizes MODX 2.7.  So can I use this setup with MODX 3 site? Furthermore, the instruction assumes you want the Site to be a blogging site. Can I add ‘Blog page’ to already existing MODX site? Answer to both questions are ‘Yes’ but we need to modify some parts.

To start, I could have created each chunk and template manually following the instruction but to reduce my typing effort, I went ahead and downloaded the demo package. I also installed dependent extras (getResources, getPage, Collections, and Tagger).  Previously, I did not have any of those installed. – I am using pdoTools  to get resources and get page. – <edit> It was fairly easy to change references to getResources and getPage to equivalent pdo* snippets.

Again, the setup instruction is written for MODX version 2.7 and the site I am setting up this blog structure is version 3.0.3.  Setup also assumes the top page is a site home page. There are several area in chunks and template that refers to [[++site_start]] and this need to be changed to point to correct Resource.  I want to have a blog page as a subpage of the site.

Looking through the template and snippets that I setup with the downloaded package , I found some more modifications were needed.

I will list out those changes.

  1. My server uses Nginx and it needs additional html tag to specify base url in <head> section of blog template html. Without it, Friendly URL won’t work correctly.
    <base href="[[++site_url]]">
  2. In MODX 3, [[*class_key]] does not return “modResource”.  It returns “MODX\Revolution\modResource”.
    This means I get “MODX/Revolution\modDocument” or “MODX\Revolution\CollectionContainer” in [[*class_key]] field depending on resource selected. Two sections of “Blog Template” stops working due to this.

    1. Template tries to pull in “jumbotron_CollectionContainer” or “jumbotron chunk based on [[$jumbotron-[[]*class_key]]] tag. This tag doesn’t work in MODX 3 as it returns [[$jumbotron-MODX/Revolution/….]] which does not exist and forward slash within chunk name is probably invalid anyway.
    2. Template tries to insert [[$blog_listing]] or [[$blog_article]] based on conditional modifier [[*id:is`[[++site_start]]`:then….]] but the blog_listing page is not at [[+site_start]] resources in my use case.
      1. To mitigate both problems, I have created a system setting [[++blog_start]] in custom namespace/area and set it to id of a blog home page resource I created. Then rewrote tags as follows.
        For jumbotron section
        [[[[*id:is=`[[++blog_start]]`:then=`$jumbotron-CollectionContainer`:else`$jumbotron-modDocument`]]]]
        For container section
        [[[[*id:is=`[[++blog_start]]`:then=`$blog_listing`:else=`$blog_article`]]]]
      2. Note: It will be probably not that difficult to create snippets and replace conditional tags here.
  3. getResources and getSnippet tags are used to aggregate child resources and parents properties are set to site home page [[++site_start]].   These needed to be changed to aforementioned [[++blog_start]].  These changes had to be made on $blog_listing chunk and $jumbotron-CollectionContainer chunk.
  4. @groups properties are hardcoded in calls to TaggerGetTags snippet.  The snippet is called from $aside chunk is setting @groups to 1 and the snippet called from $headder chunk is setting @groups to 2.  Make sure this agrees with your tagger group settings. I have first created ‘Category’ group and then ‘Archives’ group so I needed to change them to 2 and 1 respectively.
  5. Last and least 🙂   as this is just a demo template, links to “subscribe”, “search”, “Sign up”, “GitHub”, “Twitter” and “Facebook” are all mocked and pointing to itself.  You either need to remove or put actual link to them when modifying to suit your site design.

So, in order to create a Blog section within Modx 3 hosted website, using this instruction and elements in the github repo, One needs to be aware of:

  1. Modx version 3’s breaking change of the model class caused decision logics inside Blog_Template to stop working.  Rework of the logic flow was needed.
  2. Friendly url.  Nginx needs base href reference in head section.
  3. Creating a blog section other than home page location. Needed to change references to [[++site_start]] system settings to [[++blog_start]], a user created system setting
  4. Adjust the template design to fit with other area of site design.

Some more miscellaneous items to note.

  1. $blog_listing_item chunk, content placeholder has a modifier :firstp. There is a firstp snippet that is installed with the package.  I opted to replace it with ellipsis=`500` modifier to limit the content output to first 500 chars followed by ellipsis to suit my preference.
  2. Also in $blog_listing, getPage snippet uses @blog properties set. This set does not exists so the default property set will be used instead. I think idea is to create a blog property set within getPage snippet to override the default property settings in easy way, if customization is needed.

Commenting on the posts are not possible.  This need to be setup by yourself and will require Quip extra. that part is not covered by this article. One has to go back to modx documentation’s tutorial section.

 

factory function?

Posted on by
Reply

JavaScriptやPHPで、Function Factoryという言葉を見るのだが、これは共通するパターンのFunctionを生成するためのFunctionということで、例えば

$double = function($x){
    return $x*2;
};

$triple = function($x){
    return $x*3;
};

$quadruple = function($x){
     return $x*4;
};

なんてのは、三つのfunctionを定義していても、よく見ると、２，３，４とかける数字が違うだけで、あとはまったく同じパターン。　このようなfunctionの記述を効率よく行うために

//　This is function factory
$create_multiplier = function($y){
    return function($x) use ($y) {
        return $x * $y;
    };
};
//use the function factory to create three functions.
$double = $create_multiplier(2);
$triple = $create_multiplier(3);
$quadruple = $create_multiplier(4);

というような書き方をするテクニック。肝心な部分の記述は一回で済むためコードの管理も簡単になる。

上のコードは返すコードのなかで、$xを認識させるため、　use ( $x )というクローズをいれているが、PHP7.4 からPHPでもアローファンクションが使えるようになり、これだとuse というkeyword無しで、外側で設定されている変数を認識するようになる。ので、

$create_multiplier = function($y){ return fn($x)=>$x*$y;};

//use function factory to create three functions.

$double = $create_multiplier(2);
$triple = $create_multiplier(3);
$quadruple = $create_multiplier(4);

と、ファクトリーの部分の記述がすっきりする。

さらにこの上位のファンクションもアローファンクションで書いてしまうと

$create_multiplier = fn($y)=>fn($x)=>$x*$y;

となり、　プロのコーディングでアローが二つも三つもかさなるような記述が時々でてくるのだが、そろそろ読解がしんどくなってくるので、後で読み返してわかる記述方法としては、よし悪しかなあ。

React Revisited after version 16.8

Posted on by
Reply

React　というのは　DOMの内容を簡単に操作しようという　JavaScriptのライブラリーの一つだが、Shadow DOMという概念を導入し、JQueryのようにコマンドごとの実行でDOMを書き換えることはせず、Shadow DOMにある程度書き込んでおいてから描画する直前にまとめてDOMに書き込む。なので軽快に動作する、というのが売り。

数年前に覚えようとしたのだが、　二点腑に落ちないところがあって、結局、Vue.jsという他のLibraryを愛用（溺愛）するに至った。

その二点というのが

1．JSXという新しい概念の導入。　一見するとHTMLなのだがHTMLではなく、XML書式をJavaScriptで理解できるようにしたプリプロセッサ。この一見HTMLというのがくせもので、class= はJSの予約用語ゆえに使えずclassName＝にしなければならないなど、細かいところで違っていて気持ちがわるい。（これに比べてVueのTemplateはまごうことなきHTMLの拡張）

２．コンポーネントで操作できる変数（State）を使うためにはコンポーネントをClass表記してsetState()という関数を使って管理しなければならない。

というもの。

その後　「JSXは単なるJavaScriptの関数表現」という開発チームの解説をYoutubeでみて　ストンと納得できるものがあったものの、　二つ目のJavaScriptにClassが必要というのがなんとも納得いかない（個人の意見です）身としては今いち手が出せずにいた。　Class表記をするあまり、　thisの多用を行い、しかもそのContextを明示するためにClass Constructorに　this.function=this.function.bind(this) を書きまくるというのがなんとも切ない。

しかしながら、　Reactの勢いは侮りがたいものがある。　特にMicrosoftのOffice開発系の方たちは　Office UI GraphicsのComponentに「Reactは正義！」という感じで使いまくっている。　SharePoinitの　JavaScript　Frame workも　Reactびいきがすごい。

で、最近React-client-appというCLIでReactのScaffoldingが簡単にできます、という記事をよく見るので、実際どれくらい簡単なんだいと試してみたら、　生成されるScaffoldingのComponentがClass表記ではなくfunction表記になっている。　あれ、これって、Stateful　Componentは　Class表記しなければいけないんじゃなかったっけ、と思ったが、　実はReactも進化していた。

Version　16.8から　Hooksという機能が追加されて　Functional ComponentでもStateの管理ができるようになっていた。　そして今まで、　Functional Component = Stateless Component,　Class Componnet=Stateful Componentとなっていたものが、　どちらを使ってもよいようになっている。　Reactのサイトにも将来の開発にはFunctional Componentを使うのがおすすめと書いてある。　なので、React-client-appもDefaultで生成するコードはクラスレスになっていたわけだ。

紹介ページ　https://reactjs.org/docs/hooks-intro.html　にあるコードをみれば一目瞭然だが、クラス表記のようなConstructorもなければ、this. でメンバー指定をすることもない。　非常に簡単。　ただ、このHookを使ったクラスレスのステートフルコンポーネントの作り方、オフィシャルサイト以外で解説しているサイトはまだ少ない。

この

const [ var1, setVar1]=useState('this is variable one');

で気をつけなければいけないのは　Var1が複数メンバーから構成されるオブジェクトだった場合、

const [obj1,setObj1]=useState({member1:"this is member 1", member2:"this is member 2"})

のように　Obj1を宣言したときに、

setObj1({member2:"this is member 2 modified"})

とやってもsetState()と違って、オブジェクトの他のメンバー（Key)とマージしてくれない。上の例ではmember1が消えてしまう。

セット関数には元のstateがパラメータとして渡されているのを利用して、

setObj1(s=>({ ...s, member2:"this is member 2 modified"}))

とスプレッド表記を使ってマージしてあげる必要がある。（上のサイトにはObject.createを使うのも可と書いてある）

また、いわゆる　ComponentWillMountなどのLife Cycle hookの代わりには描画毎に発火するuseEffect()を使えと書いてある。　このHookは発火を限定するために二つ目のパラメータ―で発火する条件を指定できる。　ファイルデータを読み込むなど、あるいはイベントリスナーを設定するなど、一回だけ発火させたい場合、　このパラメーターを空のアレイで渡してあげることで実現できる。（なんとなくハックっぽいが）

useEffect(（）＝＞｛Data を読み込む云々｝, [])

他にも何種類かのHooksが用意されているが、　演習用にアプリを書いてみると、上の二つのHookだけで、それなりのものができる。

すでにJSXへのアレルギーはなくなっているので、クラスを使わなくてよいReactという選択は結構魅力的です。

すべてにVue.jsを使いたいのはやまやまなれど、SharePoint関連においてMicroSoft が Reactありきの開発を推しているというのはやはり大きい。

SharePoint Column Formatter の使い方

Posted on by
Reply

SharePoint Onlineのテナントで一ヶ月くらい前からPushされはじめた機能なのだが、リストのコラムセッティングに”Column Formatting”というのが追加されている。　Text Entry Field になっており、説明は”JSON書式でフォーマットを記入してください”とかなりそっけない。　詳細はOffice Devのほうにある。　ここ　。

さらに書式サンプルのDepositoryがGitHUBにおいてある。　ここ

 

で、上の記述を参考にListViewのカスタム化を自分で試してみたのがこれ。

ここではCheckedのColumn Formatting に以下を指定

{
  "debugMode": true,
  "elmType":"div",
  "children":[
    {
      "elmType": "img",
      "attributes": {
        "src": {
          "operator":"?",
          "operands":[
            "@currentField",
            "/_layouts/images/CNSAPP16.GIF",
            "/_layouts/images/CbUnChecked.gif"
          ]
        },
        "aria-hidden":"true"
      },
      "style": {

      }
    }
  ]

}

これでYes/Noの文字表示をアイコンイメージに置き換えている。

Delivery Statusのコラム書式はちょっと長くなる。（参照する各Columnの内部名称をColumn settingsでそれぞれ確認しておく必要があることに注意　下の例では　CheckedはCheckedだがDue DateはTaskDueDateになっている）

{
  "debugMode": true,
  "elmType": "div",
  "attributes": {
    "class": {
      "operator": "?",
      "operands": [
        "[$Checked]",
        "sp-field-severity--good",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "<=",
              "operands": [
                "[$TaskDueDate]",
                {
                  "operator": "-",
                  "operands": [
                    "@now",
                    86400000
                  ]
                }
              ]
            },
            "sp-field-severity--severeWarning",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "<=",
                  "operands": [
                    "[$TaskDueDate]",
                    "@now"
                  ]
                },
                "sp-field-severity--blocked",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "<=",
                      "operands": [
                        "[$TaskDueDate]",
                        {
                          "operator": "+",
                          "operands": [
                            "@now",
                            604800000
                          ]
                        }
                      ]
                    },
                    "sp-field-severity--warning",
                    "sp-field-severity--low"
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": {
          "operator": "?",
          "operands": [
            "[$Checked]",
            "CheckMark",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "<=",
                  "operands": [
                    "[$TaskDueDate]",
                    {
                      "operator": "-",
                      "operands": [
                        "@now",
                        86400000
                      ]
                    }
                  ]
                },
                "ErrorBadge",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "<=",
                      "operands": [
                        "[$TaskDueDate]",
                        "@now"
                      ]
                    },
                    "Warning",
                    {
                      "operator": "?",
                      "operands": [
                        {
                          "operator": "<=",
                          "operands": [
                            "[$TaskDueDate]",
                            {
                              "operator": "+",
                              "operands": [
                                "@now",
                                604800000
                              ]
                            }
                          ]
                        },
                        "Error",
                        "Forward"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "elmType": "span",
      "txtContent": {
        "operator": "?",
        "operands": [
          "[$Checked]",
          "Delivered",
          {
            "operator": "?",
            "operands": [
              {
                "operator": "<=",
                "operands": [
                  "[$TaskDueDate]",
                  {
                    "operator": "-",
                    "operands": [
                      "@now",
                      86400000
                    ]
                  }
                ]
              },
              "Past Due",
              {
                "operator": "?",
                "operands": [
                  {
                    "operator": "<=",
                    "operands": [
                      "[$TaskDueDate]",
                      "@now"
                    ]
                  },
                  "Due Today",
                  {
                    "operator": "?",
                    "operands": [
                      {
                        "operator": "<=",
                        "operands": [
                          "[$TaskDueDate]",
                          {
                            "operator": "+",
                            "operands": [
                              "@now",
                              604800000
                            ]
                          }
                        ]
                      },
                      "Nearing Due Date",
                      "Upcoming"
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      "style": {
        "color": "black"
      }
    }
  ]
}

それぞれのAttribute （Text, Class, iConName)に対して出力は異なるものの条件自体は同じ式をを繰り返していれてやらなければならないので記述がやたらに長くなる。　また簡単な条件式を入れ子状に繰り返し使うので、どんどん括弧がふえていく。

条件式のロジックだが、 due date 当日には

@now – 1 day < Due Date < @now

になっていることを利用して　以下のIf構文をJasonにて記述している。

If checked == True then “Delivered　納品済み”
else if Due Date < = @now – 1 day then “Over Due 納期遅れ”
else if Due Date < = @ now then “Due Today 本日納期”
else if Due Date < = @now + 7 days then “Nearing Due Date 納期近し”
else “Upcoming 今後の納入”

ページにJavaScript を埋め込まずにこういうことができるのは画期的だが、　普通のNotepadでエラーを出さずに記述するのはまず不可能。JSON構文のチェック機能とエレメントブロックの折りたたみ機能がしっかりついているProgramming Editorは必須。（無料で使えるVisual Studio Codeがいまどきの旬です。）

なお、このフォーマッターはModern View のみで有効。　Classic Viewでは何も起こらないので　CSRを使ったJavaScriptコードの必要性がなくなったというわけではない。　また、　将来への計画はされているようだが、WebPartを使ってリストViewをページに埋め込んだ場合も現時点では機能しない。

最初の行の”debugmode”: trueは記述しておくとエラーの内容がブラウザーのデベロッパーコンソールとコラム表示に吐き出されるのでデバッグ用に便利だがもちろん削除してもかまわない。

SharePoint Framework

Posted on by
Reply

去年の暮れぐらいだったか、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. yeoman(yo)：Install するだけ、学習の必要性はなさそう
  4. gulp：　コマンドをいくつか覚えるだけで学習の必要性はなさそう
  5. typescript：　学習の要あり
  6. webpack：@microsoft モジュールを導入したときに含まれている。さわらなくてよい。何本ものファイルを、一本に圧縮する、というような作業をやっているらしい。
  7. VS CodeまたはWebStorm：Dev.office.comはVS Codeを使った用例を挙げているが、自分は従来からつかっているWebStormを使う。

というわけで、なんと開発環境的には、２，３，４，５，６は１のNodeJSが動けば動くのでなんでもよく、VS codeもWebStormもマルチOS環境で動くので　要するに　Linux上で開発できてしまうのだ。

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

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

Posted on by
Reply

これって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はためしていない。