Top blog posts 2017

The chart below shows the posts most viewed during this year.


November 2017 cycling post

This is the indoor training machine that sometimes I use in a gym at Fudomae (Shinagawa-city, Tokyo)


Interface to draw rectangles 4

I have modify the code to animate the drawing in the page introduced in this post.


Javascript space menu update

I have updated the javascript space menu. Now it have explanations of each item.

Javascript のメニューを更新しました。各アイテムの説明を追加しています(英語です)。

Interface to draw rectangles 3

I have added the interface mentioned in this post in the javascript space.
The size of the output can be changed by modifying the value of a variable named "magnitude". The characters that are still not created will be processed as blank space.

こちらの投稿で述べたインターフェースを javascript space のメニューに追加しました。
出力のサイズは magnitude と名付けた変数の値を変更することで変えられます。

Interface to draw rectangles 2

I am creating a set of fonts with the interface introduced in this post.
Its harder than I expected.


Black strawberry timer 3

There was a problem with the timer app introduced in this post,
the screen got locked according to lock screen settings, in order to avoid it
I have included the function of a library named NoSleep.js.

設定によってタイマーの起動中に画面がロックされてしまいました。問題に対応するために NoSleep.js とういうライブラリの機能を組み込みました。

November 2017 app acquisitions

This graphs can be obtained from the dashboard that is provided to each developer in Microsoft developer center site (link)

これらのグラフは、Microsoftデベロッパーセンターで各開発者に与えられるダッシュボードから取得来ます (リンク)

October 2017 cycling post

The weather of Tokyo area in October 2017 was very bad because of typhoons that hit Japan on weekends. The picture below is of cycling to Harumi Futo on the end of September.


Interface to draw rectangles

I have created an interface to draw rectangles. The description of the language is described in the following pictures. The position begins from 0 and it traces the edge of the last rectangle drawn

四角形を描画するためのインターフェスを作成しました。上記の画像のように記述します。Position は 0 からスタートして、直前に描かれた四角の縁をなぞっていきます。

Black strawberry timer 2

I have created a repository to test web apps in Github. The first web app I am testing is the timer app introduced in this post . The app changes size according to device, and it is cached, so it can be used offline. I will add it in javascript space soon. Link to the app

ウェブアプリをテストするためにGithubにリポジトリを作成しました。最初にテストしているアプリはこちらの投稿にあげたタイマーです。このアプリはデバイスによってサイズが変わります、またキャッシュされるのでオフラインでも使用可能で。じきに javscript spaceのページに追加します。 アプリへのリンク

javascript space maintenance

I have added a responsive feature to javascript space page,
I wanted to wrap the presentation pane below the code pane,
so, i have replaced the place of the divs and float them.

Javascript space にレスポンシブな機能を追加しました。
したかったので、div要素の位置を変えて、float させることで対応しました。

Black strawberry timer 1

I have created a simple timer app, it is available in javascript space menu.

シンプルなタイマーアプリを作りました、javascript space で公開してます。

Javascript space updated

I have replaced the 'Delete' button by a 'Hide code' button in javascript space, and added the sample introduced in this post in the menu page

Delete ボタンをコードを非表示にするボタンに置き換えました。 こちらで紹介したサンプルをメニューページに追加しました。

Blog menu updated

I have added a link to javascript space on the blog top menu.

ブログのメニューに javascript space へのリンクを追加しました。

javascript space

October 2017 app acquisitions

This graphs can be obtained from the dashboard that is provided to each developer in Microsoft developer center site (link)

これらのグラフは、Microsoftデベロッパーセンターで各開発者に与えられるダッシュボードから取得来ます (リンク)

tt climbers source code

The source code of this post is in the javascript space page
I will add a link and arrange top page soon.

こちらの投稿で紹介したコードは javascript spaceのページにあります。

tt climbers on html

I have modified a little the script introduced in this post
to display the output on html document (..not working on IE or Edge).
I will add it to the javascript space soon.

少し手を加えました。(IE や Edge ではみられません、、)
 そのうち javascript 用のサイトに追加します。

September 2017 cycling post

On October, I participated in a hill climbing race in Hakone,
the race distance was about 14Km and the average steepness was 7.2%

距離は14km, 平均勾配は 7.2% でした。

Javascript space

I have prepared a site to test html and javascript code

Html や Javascript をテストするためのサイトを用意しました

About Rokuyo dice 2

The 'Rokuyo' of each date is registered in the app, however, it can be overridden by data posted in a post of this blog. This is the code used to get the data from the blog.

//Create an HTTP client object
Windows.Web.Http.HttpClient httpClient = new Windows.Web.Http.HttpClient();

Uri requestUri = new Uri("");

Windows.Web.Http.HttpResponseMessage httpResponse = new Windows.Web.Http.HttpResponseMessage();
string httpResponseBody = "";

//Send the GET request
httpResponse = await httpClient.GetAsync(requestUri);

httpResponseBody = await httpResponse.Content.ReadAsStringAsync();

 各日の六曜はアプリ内で登録してますが、 このブログにある投稿に日付データがあれば上書きされます 上はブログからデータを読むコードです。

Latests todos

I have updated the to do list with the followings:
Finish development of Ovi web app
Create site as repository of javascript experiments, etc.
Update Ovi (UWP version) with new functionalities
Add offline capabilities to GRMX

下記の項目でto do list を更新しました:

September 2017 app acquisitions

This graphs can be obtained from the dashboard that is provided to each developer in Microsoft developer center site (link)

これらのグラフは、Microsoftデベロッパーセンターで各開発者に与えられるダッシュボードから取得来ます (リンク)

About Ovi web app 4

I have updated the web app version of Ovi, so far it works well only on some touch devices. This is a link to it.

 Oviのウェブアプリバージョンを更新しました。今のところいくつかのタッチデバイス端末のみ対応です。 こちらから開けます

WebGL test 1

This is a test of WebGL

これは WebGL のテストです。

About Ovi web app 3

As introduced in this post, one of the requirements in creating Ovi was the math expression parser. In this sample, I used the 'eval()' function in javascript. Using it, I omitted making a parser though exponentiation operator '^' is not supported.. so there is the button to input the  'Math.Power()' function..  In next web app version  I will amplify the 'eval' function adding the exponentiation operator '^' .  For simple cases like 2^2 it would be easy with a replacement of text, however, there are cases like (5-3)^(1^(11*13)+1).  The solution resulted in more than 50 lines of code. (It is implemented in the text box below)

こちらの投稿で紹介したように、Ovi を作成するために数式パーサーが必要でした。ウェブ上のサンプルでは javascript の eval() 関数を使う事でパーサーの作成を省きましたが、累乗の演算子 '^' はサポートされていため、Math.Power() 関数を入力するためのボタンがあります。作成中のウェブアプリバージョンでは eval() を拡張して、 '^' を使えるようにします。 2^2 のような単純なケースではテキストの置き換えで済みますが、(5-3)^(1^(11*13)+1) のようなケースにも対応しなければなりません。対応は50行以上のコードになりました。(上のテキストボックスに実装されています)

August 2017 cycling post

I went to cycling to Yuigahama beach to enjoy the last days of 2017 summer in Japan. The trip along Shinagawa , Yokohama , Yokosuka , Kamakura was about 70 kilometers.


Top page update

I have updated the 'Top page', adding the new UWP app 'Rokuyo dice'
and links to the posts related to each app.

'トップページ'を更新しました。新しいUWP 'Rokuyo dice' と、各アプリへの

About Rokuyo dice 1

I came up with the idea for 'Rokuyo dice' because live tiles on start screen (on windows 10) look like cubes rotating.

'Rokuyo dice' のアイデアを思いついたのはスタートスクリーンのライブタイル (windows 10の) が 回転する立方体に見えたからです。

About Ovi web app 2

I am updating the web app version of 'Ovi' so that results could be kept by drag and drop on the sides.

端にドラッグ&ドロップさせることで計算結果をキープ出来るように Ovi のウェブアプリを変更しています。

Rokuyo dice released

I have released an UWP (Universal windows app) named 'Rokuyo dice'.
It is free to download from the store.
'Rokuyo' is a series of six days used in old japanese calender, on which each day is associated with bad or good fortune. further info .
(the 'Rokuyo' of today is 'Sensho')

'Rokuyo dice' という UWP (Universal windows app) をリリースしました。
今日 2017年9月9日) の六曜は先勝です。

GRMX how to use

I have added a link on the mobile web app GRMX to the post with 'how to use' video.

モバイル向けウェブアプリの GRMX に使い方のビデオの投稿へのリンクをつけました。

August 2017 app acquisitions

This graphs can be obtained from the dashboard that is provided to each developer in Microsoft developer center site (link)

これらのグラフは、Microsoftデベロッパーセンターで各開発者に与えられるダッシュボードから取得来ます (リンク)

Icon for new UWP app

I have prepared the Icon for next UWP app,
I think that it could be released soon.


About Background task 1

These are the steps to add the background task introduced in this post to a project

Add a project as portable class library
1.Right click on the project on solution explorer, 'Add' -> 'New Project..'
2.On the dialog shown, under 'Visual C#' -> 'Windows Universal',
  then on right panel select 'Windows Runtime Component(Universal Windows)'
  name it, I named "SxddBackgroundTasks"
3.Rename the Class1.cs if you want , I renamed it "DiceThrow.cs"

Set reference the project from the App
1.In 'Package.appmanifest file' navigate to 'Declarations' and in 'Available Declarations'
  select the portable class library name ("SxddBackgroundTasks")
2.Select background task type from the options I selected "Timer"
3.Reference the added project

Register the background task to App
1.Write code as pic1 in Main.cs
2.Write code as pic2 in the Background class


Portable class library用のプロジェクトの追加。
2.ダイアログボックスから 'Visual C#' -> 'Windows Universal'
 そして右のパネルで 'Windows Runtime Component(Universal Windows)' を選択
  名前をつける ("SxddBackgroundTasks"とつけました)
3.Class.csの名前を好きに変更 ("DiceThrow.cs"とつけました)

1.In 'Package.appmanifest file' から 'Declarations' にいき、 'Available Declarations'
  から上記で作成したプロジェクト名を選択 ("SxddBackgroundTasks")


About Ovi web app 1

I have prepared a base project for the web app version of Ovi.
I am thinking about adding features not implemented yet in the UWP version.

Ovi のウェブアプリバージョンのベースとなるプロジェクトを作成しました。
UWP のバージョンにはまだない機能を追加しようと考えてます。

July 2017 cycling post

One of the velodromes near Tokyo area is Kawasaki velodrome.
There are clubs that organize events on which you can participate
and try the steep banking.




GRMX - how to use

I have prepared a video of 'How to use' GRMX.
The link to the app is added on the top page.


Blog labels revision 2

I have arranged the labels and top page of this blog.
 You can overview the posts going to 'Special view' (on top menu), 'Label' tag.

トップメニューの'Special view' 、'Label'  タグ付けされたポストを見わたせます。

Race simulation (tt climbers v2)

I have updated the script introduced in this post , now it displays a 'live race report'. (Press F12 on PC browser, paste the script and run. Sample picture is from IE)


Gear ratio calculation app UI improvement.

I have modified the UI of GRMX to enable moving the sliders by touching near them. I believe that this modification would reduce user's stress.

GRMX のユーザーインターフェースを改造して、スライダーコントロールの近くをタッチすることで動くようにしました。この変更によってユーザーのストレスを軽減出来たと思います。

July 2017 app acquisitions

This graphs can be obtained from the dashboard that is provided to each developer in Microsoft developer center site (link)

これらのグラフは、Microsoftデベロッパーセンターで各開発者に与えられるダッシュボードから取得来ます (リンク

Blog labels revision 1

I have revised the 'Labels' of some blog posts, as result, you can overview the posts with animated gifs or cycling posts, going to 'Special view' (on top menu), 'Label' tag.

いくつかの投稿のラベルを見直しました。その結果、アニメーションGIF が入ってる投稿やサイクリングに関する投稿が鳥瞰出来ます。'Special view' 、'Label'  タグをクリックしてください。

About the ad below

I am using the service of AdStire to display the advertisement in the bottom of this blog. I am thinking about adding an ad on the GRMX web app.

このブログの下に表示されている広告ですが、AdStireのサービスを利用しています。 ウェブアプリ GRMX にも表示しようとかんがえています。

June 2017 cycling post

Many cyclists who live in Tokyo area and are conscious about performance, go to Oi-futo on Sunday morning for training. The standard circuit is around 10 kilometers.


Race simulation (tt climbers v1)

I have extended the script introduced in this post to create a race simulator script, some 'numbers' try to climb the tower interfering rivals to be the first to get to the top. (the sample picture is from IE. Press F12 to open console, paste and run the script) 

こちらで紹介しているスクリプトを拡張して、レースをシミュレーションするスクリプトを作りました。 いくつかの数字が、ライバルの他の数字を妨害してタワーの頂点を目指します。 (サンプルの画像はIEです、F12でコンソールを開き、貼り付けた後、コードを実行してください)

Test for grmx UI improvement

This is a test of a gimmick to improve grmx (under dev) UI

これは grmx (作成中) の UI を改善するためのギミックのテストです
dragging works only on pc browser..0


White black beard board devhurdle 3

Another challenge of White black beard board development was how to play the animation, I implemented this function using WebView control. There is a local html document, on which the the animated .gif is displayed.

White black beard board をつくる上での課題として、再生機能もあげられます。その機能はWebView コントロールを使って実装しました。ローカルな HTMLドキュメントがあって、それに .gif アニメーションファイルが表示されます。

Grmx dev hurdle 1

I have been struggling for several hours in the development of the pwa introduced in this post  because the slider thumbs could not be dragged on iPhone Safari. I have tried to solve the problem using jquery without success. The solution I could find was to enlarge the thumbs. Now it works somehow.

iPhone の Safari だと、スライダーのノブを動かせなくて、こちらのポストで紹介したPWAの作成に数時間も苦労しました。この問題に対処しようと jquery の導入もしましたがそれでもだめでした。結局ノブのサイズを広げる事が唯一つの成功した方法でした。今はなんとか動作してます。

June 2017 app acquisitions

This graphs can be obtained from the dashboard that is provided to each developer in Microsoft developer center site (link)
これらのグラフは、Microsoftデベロッパーセンターで各開発者に与えられるダッシュボードから取得来ます (リンク)

About progressive web app deployment

I am using Firebase service to host an deploy the progressive web app introduced in this post.
The deployment process is very easy and fast. You can find the instructions to deploy a web app here.


Blog menu update

I have changed a little bit the blog menu.
The privacy policies are just linked on the top page and there is a tab for latest posts now.


May 2017 cycling post

A trip around Miura peninsula is a nice course for cycling starting from Tokyo area.
You run alongside the ocean during almost all the trip (in Japan you drive on the left side of the road). It is around 80km from Shinagawa to Kamakura, and you can go back to Tokyo by railway if you know how to transport your bike by train.


Ovi devhurdle

Though being the core of the app, another hurdle faced during Ovi development, was the mathematical expression parser. C# hasn't a function like 'eval' used in the javascript sample. And Datatable.Compute() is not available for UWP, therefore I used the functions introduced in this article. I am thinking about creating the progressive web app of Ovi.

中心的な機能でありながら、Ovi の開発で直面した課題は数式パーサーでした。C#にはウェブ版のサンプルで使った eval のような関数はなく、Datatable.Compute() も使えないので、こちらの記事で紹介されている関数をほぼそのままつかいました。Ovi もプログレッシブウェブアプリを作成する予定です。

Progressive web app test 1

Checking information about progressive web apps, I thought that it would be the best form for an app like Pedalin' mix . I have created a base project on web, I will add gradually the features required for a PWA

プログレッシブウェブアプリケーションについて調べていたら、Pedalin'mix のようなアプリの形態として一番良いと思いました。ウェブに基礎となるプロジェクトを作成しました。徐々にPWAに進化させていきます。

Ttgenerator version 2

I have reduced the code introduced in this post from 37 lines to 31 lines, and now the 'size' could be passed as argument. (The output sample is from Microsoft Edge , press F12 to open console)

こちらのポストで紹介したコードを37行から31行に短くしました。それに加えて、引数でサイズを渡すことができます。(サンプルの画像は Microsoft Edge からのものです, F12でコンソールが開きます)

Tile test No2

Testing how to implement a tile notification(starting with the app introduced in this post), I have learned that a background task is needed to create a Live Tile.

タイルを更新する方法(こちらのポストで紹介たように)をテストしていると、Live Tileをつくるためにはバックグラウンドタスクを実装することが必要だと学びました。

Tile test No1

I think that one of the most characteristic features of windows is the tile UI system.
I am thinking about an app that uses it. So I have prepared a minimal test app to learn how it works.
Steps to build and run the app
1.Create a new project with Visual studio (select blank UWP)
2.Open "MainPage.xaml.cs" and paste this code (change 'TESTTILE1' according to your solution)
3.Build and run the application

1.Visual studioで新規プロジェクトを作成します(空のUWP)

InkToolbar tag

Just adding the tag below to the code (MainPage.xaml) introduced in this post
is enough to add a color and ruler tool bar to the app.

        <InkToolbar x:Name="inkToolBar" RelativePanel.RightOf="saveButton" RelativePanel.Below="myborder"  Margin="10,0,0,0"
         TargetInkCanvas="{x:Bind mycanvas}"  InitialControls="All" >


May 2017 app acquisitions

This graphs can be obtained from the dashboard that is provided to each developer in Microsoft developer center site (link)

これらのグラフは、Microsoftデベロッパーセンターで各開発者に与えられるダッシュボードから取得来ます (リンク)

White black beard board functions 1

I have created a simple project on which the basic function of storing windows ink strokes to an image file is implemented. This is how to build it
 1.Create a new project (select UWP (universal windows app))
 2.Paste this code in "MainPage.xaml" (change the project name ('BBB1') according to your project )
 3.Paste this code in "MainPage.xaml.cs" (change the project name ('BBB1') according to your project)
 4.Build and run the application

 2."MainPage.xaml" にこちらのコードを貼りつけます (プロジェクト名 ('BBB1') を変更してください)
 3."MainPage.xaml.cs"にこちらのコードを貼りつけます(プロジェクト名 ('BBB1') を変更してください)

Pedalin' mix on the web statistics and TDLs updated

Pedalin' mix on the web access seems to have decreased during April. I have added a todo on the TDL about it. I will try to improve the usage.

Pedalin' mix web版の4月のアクセスは減ったようです。
対応するために TDLに項目を追加しました。より便利に出来ないか考えてます。

White black beard board devhurdle 2

The white dots on each corner (explained in this post) worked fine for a while, however , using them meant to have a fixed size of 'canvas'.I thought it was not a big issue on smartphone screen,but it was a serious limitation on desktop. Then I prepared a canvas filled with white ink, that is reloaded and cropped when user changes the size of the window on desktop

各角の白いインクのドット (こちらの投稿で紹介した) で開発を続けましたが、キャンバスのサイズを固定することを意味してました。スマートフォンならそれほど大きい問題ではないと考えましたが、デスクトップ環境では大きな制限でした。それで考えたのは白いインクを塗ったキャンバスを用意することでした。ユーザーがウィンドウのサイズを変更するたびに読み込み、サイズに合わせます。

April 2017 cycling post

The most remarkable cycling spot on April 2017 was tokyo tower. I recommend visiting on night.
It is quite near from where I live (less than 30 minutes by bicycle). I want to improve the following:
1.Time to get to tokyo tower.
2.Code golf of this code (it generates the tokyo tower on browser)
(how to run on browser => please refer to this post)


Profile icon creation

I have created the Icon for profile. (profile page)
I used FireAlpaca (it is free) to create it.
(I use it also to create app tiles)

作成には FireAlpaca  (無料です) を使いました。

White black beard board devhurdle 1

I created White black beard board using Windows.Ink library.
One of the hurdles I faced at the beginning of the development was that the code I used  (like the code below) to output to .gif file, processes only the strokes area, not the whole canvas. So, when I draw this,

the output was like this,

I almost gave up to use Windows. Ink library and go for Win2D, however, I came up with an idea of loading an already created .gif file with four white dots (strokes) on each corner of the canvas, and proceed with the development. However, this solution didn't work for the next steps..

using (IOutputStream outputStream = stream.GetOutputStreamAt(0))
   await mycanvas.InkPresenter.StrokeContainer.SaveAsync(outputStream);
   await outputStream.FlushAsync();

White black beard board は Windows. Ink というライブラリを使って作りました。作る上で最初の方に直面した問題の一つは、.gifファイルに出力するコード(上記) は、ストロークのエリアだけを対象にしていることだった。上の画像のように描くと、下のような画像が出力されていた。Windows Ink を使うのをあきらめて Win2D でやってみようと考えていたところ、あらかじめキャンバスの各角に白いストロークを打ったファイルをキャンバスに読み込むというアイデアをおもいつきました。それで開発を続けましたが、この策は後のステップでは役に立ちませんでした、、

April app acquisitions

This graphs can be obtained from the dashboard that is provided to each developer in Microsoft developer center site (link)

これらのグラフは、Microsoftデベロッパーセンターで各開発者に与えられるダッシュボードから取得来ます (リンク)

Latest updates

1.I have added Ovi in top page and its link to the webgadget version.
2.To dos update

2.To do をアップデートしました。

Ovi published

The lastest app released (Ovi) is now published in the store (link)
I am creating the web gadget version of it.
('Obi' means strap, band, belt in japanese)

一番最後にリリースしたアプリ (Ovi) がストアで公開されています。リンク