かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

JavaScript

Reactで開発するときに使えるかっこよさそうなコンポーネント ANT DESIGN

知らなかったんですが ANT DESIGN というのがあるんですね。 ant.design React のコンポーネントも実装されてていい感じかも。 今までは、Material-UIを何かあったら使おうと思ってたけど、今度何かやるときには ANT DESIGN も評価してみてもいいかもという…

JavaScript(node.js)で非同期処理を扱いたい(coモジュール使ってみたよ)

1つ前のエントリで async モジュール使ってみました。 blog.okazuki.jp 関数の配列を渡してやれば、よしなに実行してくれるいいやつでした。次は co です! www.npmjs.com async が古き良き仕組みの上に非同期処理をいい感じに扱うという観点のライブラリと…

JavaScript(node.js)で非同期処理を扱いたい(asyncモジュール使ってみたよ)

最新版のnode.jsでは、async/awaitがサポートされてるらしいですね。 素晴らしい!! でも最新版が常に使えるわけではないというのが世の中です。 例えば現時点では Azure Functions だと node.js のバージョンは 6.5.0 固定みたいです。(そのうちバージョ…

CordovaでProxyを突破しよう

まず、Node.jsのProxy設定が必要になります。 npm config set proxy http://ユーザー名:パスワード@example.com:8080 npm config set https-proxy http://ユーザ名:パスワード@example.com:8080 ユーザー名がメアドな人は@マークとかをエスケープしないとい…

Interactというライブラリ

interactjs.io ドラッグアンドドロップや、リサイズ、移動など色々な操作を簡単に記述できるというライブラリを見つけたのでメモです。 TypeScriptの型定義もありますが、ちょっと罠がありまして… npmからインストールするときはinteract.jsという名前でイン…

Visual Studio 2015のNodeJSのバージョンが古い

最新版を別途インストールしてもタスクランナーエクスプローラーとかから実行するときに使われるnodejsのバージョンが古いです。 これを解決するのに以下のサイトが非常に参考になりました。 qiita.com でも、この設定ってどこに保存されるんだろう…。 危惧…

gulpfile.jsを書くのにVisual Studio 2015は最高だぜ

JavaScript開発のお供としてのタスクランナーのgulp。これのgulpfile.jsをインテリセンスが効く環境でかけたら入門できるかも…と思いVisual Studio Codeとか色々あさってましたが、灯台元暮らし的にVisual Studio 2015でインテリセンスがききました。ハイ。 …

かっこいいネットワーク図?を描くためのvis.js

グラフとかっていうんですかね? vis.jsというライブラリを使うと簡単に描けるっぽいです。 vis.js - A dynamic, browser based visualization library. 使い方 ASP.NETアプリケーションにサイトからDL出来るvis.min.jsとvis.min.cssを追加します。 <link href="~/Content/vis.min.css" rel="stylesheet" /> <script src="~/Scripts/vis.min.js"></script> こんな</link>…

Knockout.jsを入門してみた

ちょっとJavaScriptのフレームワークを使おうかなと思ったのでどれを使おうか選んでたのですが、最近のreact.jsや、AngularJSや、Cycle.jsとかもいいですが以下の理由でKnockout.jsにしてみようと思いました。 枯れてる メンテナンスされ続けてる 学習コスト…

Spring BootのThymeleafのテンプレート内でJavaScriptを書く

Thymeleafのテンプレート内でJavaScriptを書くときは以下のように書きます。おまじないだと思って <scrpit type="text/javascript"> /**/ </script> JavaScriptの<や>などがXMLのタグの開始なんかとして見られないためですね。

Ignite UIを使い始めるまでの手順

Ignite UIの正しい使い方がわかった!ということで使い始めるまでの手順をメモっておこうと思います。 プロジェクトの作成 ASP.NETの空のプロジェクトをMVCにチェックを入れて作成します。 ASP.NET MVCのコントローラを作成します。ここではHomeControllerと…

Ignite UIを使ってみたんだけれど

大変だった。 C:\Program Files (x86)\Infragistics\2015.1\Ignite UI\MVC\MVC5\Binのdllを参照に追加する C:\Program Files (x86)\Infragistics\2015.1\Ignite UIのjs, cssフォルダをプロジェクトにコピーする cssとjsを以下のような感じでページに取り込む…

配列からN件取り出す

LINQでいうTakeみたいなやつです。sliceというメソッドが配列に定義されてるんですね。しかも、startとend指定でSkipとTakeを合わせたような動きをしてくれるみたいです。 startは0から始まるインデックス、endも0から始まるインデックスです。endは、endで…

ASP.NET WebAPIでAPIを作ってJavaScriptから呼ぶまで

ということで、タイトル通りのことをしてみようと思います。空のASP.NETのプロジェクトからいろいろ足していく形でやろうと思います。 プロジェクトの作成とAPIの作成 まず、空のASP.NETのプロジェクトを作ります。 (adsbygoogle = window.adsbygoogle || []…

ASP.NET MVCのWebGrid + ReStable(うまくいかなかった)

ここ数日HTMLのtableをレスポンシブに対応する軽量なスクリプトのReStableをちらほらみるので触ってみました。NuGetでは配布されてないのでGitHubのページからDLします。 ReStable DLしたファイルから、以下の2ファイルをプロジェクトにコピーします。jsはSc…

VS2013のLightSwitch HTMLClientでテーブルがサポートされた…!

いや、今までもカスタムコントロールで出来たっちゃぁできたんですが、データの表示方法に普通にTableってあって、それを選んだらテーブルになるっていうお手軽さは最高です! デフォルトの見た目はこんなかんじ。タイルとかリストと同じようにタップしたと…

邪魔なものは閉じれるようにしたい

LightSwitchはjQueryとjQueryMobile使ってるのでやる気になればなんだってできます。そんな例の1つとして開閉式コンテンツを試してみました。列のレイアウトのグループの中に、ボタンがたくさんあるグループを用意しました。 ボタンがたくさんあって邪魔なの…

LightSwitchのHTML Clientで時間のかかる処理をやる方法+その間プログレスリングを出す方法

LightSwitchのHTML Clientのリファレンスがほしいと思う今日この頃です。今日は、時間のかかる処理をやる方法と、その間にプログレスリングを出す方法をちょろっとやってみました。 とりあえず、時間のかかる処理はPromiseというやつを使うみたいです。どん…

HTMLClientでデータバインドしてみた

LightSwitchにはデータバインディングの仕組みがあります。ちょっと試してみました。 画面にString型のInputTextというプロパティを追加した状態で、InputTextを2つ画面に置きます。画面に置いたInputTextは、2つともカスタムコントロールに変更します。 カ…

LightSwitchのHTML Clientで画面遷移してみよう

今回は、LightSwitchのLightSwitchらしくない使い方。データを一切作らずに画面の世界だけに閉じた話しです。画面をいくつか作って、画面遷移をしてみたいと思います。試しにプロジェクトを新規作成して、画面を3つ作ります。全部Browse画面にしています。画…

LightSwitchのHTMLClientのサンプルのほとんどでXSSの脆弱性ありそうな気がするんですが…

最近LightSwitchのHTMLClientのサンプルとかコードを色々あさってるんですが、JavaScriptで出力のカスタマイズ自由自在だぜ!!ってところになると以下のような感じのコードをよく見かけます。 /// <reference path="../GeneratedArtifacts/viewModel.js" /> myapp.Browse.ScreenContent_render = function (element,</reference>…

LightSwitchで手軽に情報を出力したい

LightSwitchの本来の使い方ではないと思われるけど、データなしの画面とかも簡単に作れます。新規作成してBrowse画面を作ってしまえば、あとは画面にボタンを置いたり、カスタムコントロールおいてJavaScriptで好きなもの表示したりとかetc....ということで…

LightSwitch(HTML Client)でjsRenderを使ってテーブルを表示してみた

CodeZineでjsRenderというものを知りました。 JavaScriptテンプレートエンジンJsRender 基本のキ これは、面白そうということでぐぐってたら公式ページとともにMSDNマガジンの記事が…!?華麗にスルーしてたけど、公式とあわせて読むととりあえず大体OKっぽ…

LightSwitch(HTML Client)からASP.NET WebAPIを呼ぶ

まぁ、JavaScriptなんで簡単に呼べますよね。 Global.asaxを作成してApplication_StartにWebAPI用のルートの設定を追加。 RouteTable.Routes.MapHttpRoute( "default", "api/{controller}/{id}", new { id = RouteParameter.Optional }); Controller名前空間…

LightSwitch(HTML Client)のVisual Collection覚書

リファレンス的なドキュメントってどこにあるんでしょう…LightSwitchのJavaScriptライブラリ達。(コードがドキュメント?) とまぁいきなり愚痴ですが、ちょいちょいとLightSwitchのHTML Clientを触ってみてます。こいつは、なかなかデキルやつでレスポンシ…

JavaScriptでのクラスの定義

いやはや、慣れないことをするのは疲れます。TypeScriptを使う前にJavaScriptの挙動は押さえておかないとねっ。 例えば クラスを表すクラス var Class = function () { var klass = function () { this.init.apply(this, arguments); }; klass.prototype.ini…

HTML5でシューティングゲーム作ってる人がいる・・・

Canvasを使ってシューティングゲームを作ってみたChromeで普通に動いて遊べました。JavaScriptとCanvasでここまで出来るなんて・・・!? 怖い世界になりました。

jQueryに興味が出てきたので記事をメモ

@ITの連載をとりあえずメモ jQueryで学ぶ簡単で効果的なAjaxの使い方 jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ 実践Ajax CodeZine jQuery入門(その1)

互換モードかどうかで画面の高さの取り方が変わる

IE7でdocument.body.clientHeightが0を返すようになってる。 調べてみるとIE6でも標準モードだと駄目だったみたい。いろんなブラウザで取れるようにするためには、↓のようにかく。 var bodyHeight = window.innerHeight || document.documentElement.clientH…

どれにしようか

今自分が使える言語は下にあるとおり。 C++ C# Ruby Java JavaScript 習熟度順に並べるとこんな感じかな。 C#, Java C++ Ruby, JavaScript 各言語に特徴があって向き不向きがあると思う。 LL系の言語に分類されるRubyやJavaScriptは、やりたいことをやりたい…