読者です 読者をやめる 読者になる 読者になる

dai-mac64's blog

50代からのWEBアプリ開発とその他もろもろ

Web Application その1

サンプルを作ってみる
  • 空のプロジェクトを作成
  • ControllersフォルダにMVC 5コントローラを追加(Home)
  • 自動定義されたIndexアクションメソッドに対応するIndexビューを(Views\Homeフォルダーに)追加
  • HTMLのbody の div に適当な文言を記述し、実行

適当な文言がブラウザに表示されてめでたしめでたしとなると思ったら…

‘/’ アプリケーションでサーバー エラーが発生しました。

<customErrors> タグで “mode” 属性を “off” に設定する」ともっと具体的なエラーメッセージが表示されるそうな。 web.config に以下を追加する

<configuration>
 <system.web>
  <customErrors mode="Off"/>
 </system.web>
</configuration>`

ビュー ‘Index’ またはそのマスターが見つからなかったか…

追加したビューの名前が間違っていました。

次にTypeScript(JavaScript)を追加する
  • jQueryをインストール
    jQuetyってなんだ? JavaScriptのライブラリなんだって。
  • jquery.TypeScript.DifinitelyTypedをインストール
    TypeScriptで使用するためのjQueryの型定義ファイル 標準のTypeScirptではJQuery型に対応していないので。
  • TypeScriptファイルを記述
    <div>要素に文字列を追加するスクリプト
  • jquery-x.x.x.min.js をビューのhtmlのhead要素にdropして参照スクリプトを挿入
  • 先ほど記述したTypeScriptも同様に挿入

TypeScriptが実行されます。

Web APIコントローラも追加してみる
  • ControllersフォルダにWeb API 2コントローラを追加(Hello)
  • HelloControllerにGetHelloメソッドを追加
    ⇒WebAPIのルーティングルールによりURLは、
    /api/Hello/Hello
    ということになる。
    メソッド内でC#のオブジェクトを返すとJSONで返却される。

前出のTypeScriptを、WebAPIを呼び出した結果(JSON)を<div>要素に文字列を追加するスクリプトに変更する。 この呼び出しをAjax通信と呼ぶそうな。方法の名前ね。

ブラウザの開発者向けツール(F12)

DOMを見ることができたり、ブラウザからのリクエストとその応答などを確認できる。 これは、デバッグの強い見方になりそうだ。

デプロイ

とりあえず、インターネット上で動いている。最低限の骨組みが動いた。HTML+CSS+TypeScript(JavaScript)でUIを装飾して、WebAPI経由で取得したデータを表示するということになりそうだ。なんか作れそうな気がしてきた。
参考にした以下の書籍では、無料のAzure App Serviceに公開している。 WebサーバーでWebDeployを用いている。本当はもっと一般的な公開方法を知りたいが、それはもう少し先の話かな。

はじめてのASP.NET SPA開発入門 (マイクロソフト関連書)

はじめてのASP.NET SPA開発入門 (マイクロソフト関連書)

C# でスクレイピング

VBAでは、ゲキ重だったのでデスクトップアプリにしてみる。

前回の「VBAスクレイピング」でのXPathはそのまま使用できる。

Webページ解析は、「Html Agility Pack」を使って楽する。

これもある程度できたので、作りこみはWebアプリで行うとしよう。

www.atmarkit.co.jp

 

 

 

Single Page Application

Webアプリを作るといっても、20年近く前にHTML+CSSでほんのすこしレイアウトのお手伝いをした程度で、サーバーにアップしたこともない。

20年の時の流れはわからないので、すっ飛ばしてVisualStudioが慣れているのでASP.NET SPAで開発してみようと思う。仕事でWPFアプリを作るときは、MVVMなので、MVCとかデータバインドとかしっくりきそうな感じがある、この本を参考に始めます。本当は、IIS(WinodwsServer)にロックインされたくないので、.NET Coreで作りたいのですが、まずは参考書に従って、.NET Frameworkで。

はじめてのASP.NET SPA開発入門 (マイクロソフト関連書)

はじめてのASP.NET SPA開発入門 (マイクロソフト関連書)

 

.NET Coreについては、平行してこちらを参考にしていこう。

ASP.NET MVCプログラミング入門 (マイクロソフト関連書)

ASP.NET MVCプログラミング入門 (マイクロソフト関連書)

 

 

パッケージ管理システム

まずは、開発環境を整えるところから。

手元にあるPC・MacbookAir・Raspberry Pi2を使っていろいろ試したいと思う。

とりあえず、パッケージ管理システムを用意すると後々便利なようだ。

Raspberry PI2のOSは、Raspian。APTがあるのでよし。

PCは、WIndows7/VisualStudio2015なので、NuGetでよし。

MBA(macOS Sierra)には、Homebrew。なんとなくです。

Homebrewをインストール。

Homebrew — macOS 用パッケージマネージャー

いきなりXcodeのバージョンが古いと怒られたので、Xcodeをアップデート。

次は、proxyでインストールできない。

いつ設定されたかは不明だが、proxy関連の環境変数がサンプルで設定されていた。

http://example.com:8080/

proxy未使用なので、消去する。

$ export http_proxy=""
$ export https_proxy=""

 

Macで開発したいけど...

手持ちのMacは、数年前に中古で購入したMacBookAir Late2010 11inch Core2Duo1.6GHz DDR3 4GB 128GB。当時、地元の家電量販店にソフマップと提携した中古パソコンコーナーがあり、液晶に傷があるとのことで価格は3万円。店員も私も傷は確認できなかった程度だったので即購入。現在でもこの条件ではなかなか入手しにくいと思います。暫くは、仕事で打ち合わせやセミナーでのテキスト打ちに使用していました。

少し時間が取れるようになったので、iOSでアプリも作りたいし、Web開発もしたい。Unityなんかも触ってみたい。でも、Xcodeをはじめ様々な開発環境を試してみるには、容量が心もとない。そんな時、以下の記事を発見。SSDを240GBに換装して、macOS Sierraにアップデート。BOOTCAMPでWindows7もインストール。

3年前のMacBook Airをたった5分で爆速に変身させる大容量SSD|Mac - 週刊アスキー 

 

VBAでスクレイピング

ほしいサービスがいくつかある。今のところ、ネット上には見当たらない。それをWebサービスにするとほかの人にも便利なのでは?と思ったりする。Webを学ぶにあたって何かテーマがほしいのでそのサービスを作ることにする。そのサービスに必要な技術は、「スクレイピング」というらしい。

とりあえず、仕組みを理解するために、VBAでやってみる。

使用するライブラリ

  • Microsoft Internet Controls」            IE(InternetExplorer)制御
  • Microsoft HTML Object Library」     HTTPリスクエスト、HTMLパーサ

あとはパースと文字列処理

KING OF SQUID - JAPANESE SECTION

XPathを取得して、スクレイピングに利用すると便利。お試しで作ったときはめんどくさいことしてたというかあてずっぽだったなぁ。

Chromeの場合、WEBページ上の解析したいオブジェクトを選択して右クリックで検証を選択する。ブラウザの開発者向けツール(F12)が開いて、DOMの相当部分が選択された状態になる。この選択部分をさらに右クリックして、Copy→Copy XPathで取得可能でした。

意外と簡単にできる。でもいろんなサイトからコンテンツを集めくると、VBAではゲキ重。ザンネン!

参考書はこちら。  

データを集める技術 最速で作るスクレイピング&クローラー (Informatics&IDEA)

データを集める技術 最速で作るスクレイピング&クローラー (Informatics&IDEA)

 

 

RD-XS48 「ハードディスクの取り外しを検出しました」を解決

古いHDDレコーダーですが、東芝のRD-XS48と38を使っています。正月明けに突然RD-XS38のHDDが保護あり状態になってしまい、再生以外何もできなくなってしまった。

有名な隠しコマンド ズーム⇒電源OFF⇒電源ON も効果なし。(その後、本体死亡)

XS48に付け替えたらDVDに移動できるかな?と思って換装してみたら、「ハードディスクの取り外しを検出しました」と表示された。元のHDDに戻しても同じメッセージ。HDDの中身は何も見えなくなってしまった。

やってもうたぁ!

HDD換装 - RD-Wiki (東芝REGZAブルーレイ&VARDIAまとめサイト)

によると「直前に取り付けられていた以外のHDDを取り付けると」こうなるそうだ。

 

ここで、試しに隠しコマンド ズーム⇒電源OFF⇒電源ON を実行。

なんと、元のHDDは正しく認識され、録画も再生も行える状況に戻りました。

同様の作業を保護されたHDDにも行ったところ、保護されたままの状態で認識されました。保護については、もう少し調べることにします。