プログラミングの最近のブログ記事

Windows 7 Home + MS Aceess 2003 というレガシーな環境で、新元号「令和」対応をしないといけないんだけど、VB モジュールで

Format("令和01年05月01日", "yyyy/mm/dd")

こんな風に Format 関数の結果をセットしてみても、2019/05/01 が返ってこない(Null になる)。

Windows の開発環境に詳しい方に聞いてみると、サポートの切れている MS Access 2003 でも、Format 関数は OS のレジストリを見るので、 OS がサポートされていれば大丈夫。ただし、まだ「令和」関係の Windows Update は提供されていないとのことだった。

そうか、もう「令和」関係の Update は出てて、Office 2003 系はサポート外だから駄目って話なのかと思ってた。
そうか、そうか、まだ Update が出てないだけなのね。

「とりあえず手動でレジストリに令和の情報を登録すれば正しく Format 関数も動きますよ」ということだったので、ググってみると、


こういうページがあった。

その中に書いてあるとおり、コマンドプロンプト画面で、

REG ADD HKLM\SYSTEM\CurrentControlSet\Control\Nls\Calendars\Japanese\Eras /v "2019 05 01" /t REG_SZ /d "令和_令_Reiwa_R"

を実行。「この操作を正しく終了しました。」のメッセージを確認後、念の為 MS Access 2003 の画面を再起動。
見事、Format("令和01年05月01日", "yyyy/mm/dd") で 2019/05/01 が返ってくることを確認した。
子供のプログラミング教育教材として注目を集めている Scratch。
Ver2.0 は Adobe Air で動いていたが(Action Script で書かれてたのかね?)、Ver3.0 が2019年1月3日に出て、Adobe とはおさらばしたようだ。一時期、仕事で Air アプリを作っていた俺としては寂しい限りである。ま、時代の流れだから仕方ないか(^^;

あ、Scratch の話ね。

どうもこの手の「設定・処理ブロックを組み合わせて視覚的にプログラムを作る」的なものはあまり好きではないというか、別に子供でも、最初からコード書かせろや!が俺の信条だったんだけど、これ、今日初めて触ってみたけど、面白いね。てか、よく出来てるね。

さすが米国マサチューセッツ工科大学製(正確には、MITメディアラボ製)。

PC(Win or Mac)にインストールして使うこともできるし、オンライン上(Webサービス)で使うこともできる。
Web 上で作ったプログラムもローカルに保存できるので、まずはオンラインで試してみればいいだろう。


このサイトにクセスして、左上の「作る」のリンクをクリックすればエディタが起動する。

20190412_Scratch.jpg

あとは、動かしたいもの(スプライトと呼ばれる。まあ、オブジェクトよね)を選択して、左の「コード」タブの中のブロック(「◯歩動かす」とか「◯回繰り返す」など様々なものがある)を組み合わせてプログラムを組んでいく。
例えば、「◯回繰り返す」というループ命令などは、ループする処理を囲むように自動で設置されるので、見た目にもわかりやすい。
なるほど、こうしてプログラムの構造を覚えていけるのだな。

とりあえず、「緑の旗を押したら大きな円を書きながら一周する」という処理を作ってみる。
ブロック 4個で完成だ。
へぇ〜。これ、素人の大人がプログラムを学んでいくのにも良さげやね。なんか、今まで敬遠しててごめんなさいって感じだな。

娘が興味を持てば教えてやんだけど、うーん、興味持ちそうにないな(^^; 次男坊が小学生のときにこれがあれば(てか、あったんだけど(笑))、けっこうのめり込んで遊んだ気がするなあ(笑)
Windows 7 Professional SP1 で Electron の開発環境を作成する。

Mac OS X のときと一緒で、まずはもっとも重要なプログラム実行エンジンである Node.js のインストール。

Node.js のダウンロードサイトから、


最新のインストール用プログラムを落としてくる。2019/01/04 現在では、node-v10.15.0-x64.msi が安定版の最新バージョンだった。

インストール方法は書かない。MSI ファイルを実行して、あとは指示に従うだけ。某社のソフトみたいにこっそり McAfee を入れたりしようとはしないので安心しとけ(笑)
「Finish」ボタンを押して終わり。

コマンドプロンプトで、node を実行しても、

>node -v
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

だったものが、ちゃんと、

>node -v
v10.15.0

このように実行される。(インストール後、)

次に、Electronのインストール。
Electron は Node.js のパッケージの一つなので、パッケージ管理コマンドでインストールを行う。

ところで、Mac OS X ではグローバルインストールを行ったのだが、それだと Electron の Update を行った時などに、動かないプロジェクトが出てくる可能性があるそうだ。
(バージョン依存の機能なんか使ってる場合だな)

というわけで、さきにプロジェクトを作って、そこにローカルインストールすることにする。このプロジェクトで使われるだけの Electron だ。

今回は個別案件管理システムを作りたいので、kobetsu という名前で作ろう。

>mkdir \Users\shinoda\electron\kobetsu

>cd \Users\shinoda\electron\kobetsu

>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (kobetsu)
version: (1.0.0)
description: 個別案件管理
entry point: (index.js)
test command:
git repository:
keywords:
author: shinoda
license: (ISC)
About to write to C:\Users\shinoda\electron\kobetsu\package.
json:

{
  "name": "kobetsu",
  "version": "1.0.0",
  "description": "個別案件管理",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "shinoda",
  "license": "ISC"
}


Is this OK? (yes)

ちゃんと package.json が出来上がっているかな?

>ls -la
total 1
drwxr-xr-x 2 shinoda Administrators   0 Jan  4 11:16 .
drwxr-xr-x 3 shinoda Administrators   0 Jan  4 11:14 ..
-rw-r--r-- 1 shinoda Administrators 228 Jan  4 11:16 package.json

ばっちり。では、Electron のローカルインストールを行う。

>npm install --save-dev electron

> electron@4.0.0 postinstall C:\Users\shinoda\electron\kobetsu\node_modules\electron
> node install.js

Downloading tmp-11268-1-SHASUMS256.txt-4.0.0
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN kobetsu@1.0.0 No repository field.

+ electron@4.0.0
added 145 packages from 127 contributors and audited 201 packages in 99.081s
found 0 vulnerabilities

以上で、インストールは終了。

Mac OS X のときと同様の index.js と index.html を作成して実行してみる。
ちなみに、ローカルインストールした Electron はプロジェクトのディレクトリの下の .\node_modules\.bin\electron に実行体は存在する。

実行時は(現在、プロジェクトのディレクトリにいるとして)、

>.\node_modules\.bin\electron .

と指定する。

20190104_electron.jpg

このように、Mac OS X 版同様に表示される。

ばっちりである。
Qiita の「Electronの始め方 on Mac」(@basicactorさん投稿)という記事をもとに、とりあえず動くものを作ってみよう。

まず、テストアプリ用のソースとかを格納するディレクトリを掘る。
それから、Node.js のプロジェクトとして npm で初期化を行う。

$ pwd
/Users/shinoda
$ mkdir electron_proj
$ mkdir electron_proj/testapp1
$ cd electron_proj/testapp1
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (testapp1) 
version: (1.0.0) 
description: Test Program YO!!
entry point: (index.js) 
test command: 
git repository: 
keywords: sample test
author: shinoda
license: (ISC) 
About to write to /Users/shinoda/electron_proj/testapp1/package.json:

{
  "name": "testapp1",
  "version": "1.0.0",
  "description": "Test Program YO!!",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "sample",
    "test"
  ],
  "author": "shinoda",
  "license": "ISC"
}


Is this OK? (yes) <リターンキー>

これで、ここで作られるプログラムを Node.js のパッケージとして管理するための情報が package.json という名前の JSON形式のファイルとして作成される。

直下にできてるね。

$ ls -la
total 8
drwxr-xr-x  3 shinoda  staff   96 12 28 13:01 .
drwxr-xr-x  3 shinoda  staff   96 12 28 11:55 ..
-rw-r--r--  1 shinoda  staff  274 12 28 13:01 package.json
$ cat package.json
{
  "name": "testapp1",
  "version": "1.0.0",
  "description": "Test Program YO!!",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "sample",
    "test"
  ],
  "author": "shinoda",
  "license": "ISC"
}

次に、プログラム本体(といっても、JavaScript と HTML)を作成する。

まず、index.js というファイルに JavaScript を記述する。
(件のページの main.js をパチってます)

// 定数
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')

function createWindow () {
  // ブラウザウィンドウ(400x300pix)
  win = new BrowserWindow({width: 400, height: 300})

  // index.html をロードして表示
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
}

app.on('ready', createWindow)

次に index.html。これは Hello, World と表示させるだけの HTML なので簡単。

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Test Project 1</title>
    </head>
    <body>
      <h1>Hello, World!</h1>
         node <script>document.write(process.versions.node)</script>&nbsp; 
      Chrome <script>document.write(process.versions.chrome)</script>&nbsp; 
   Electron <script>document.write(process.versions.electron)</script>
    </body>
  </html>

これらをプロジェクトのディレクトリに作成する、。

$ ls -la
total 24
drwxr-xr-x  5 shinoda  staff  160 12 28 14:34 .
drwxr-xr-x  3 shinoda  staff   96 12 28 11:55 ..
-rw-r--r--  1 shinoda  staff  399 12 28 14:34 index.html
-rw-r--r--  1 shinoda  staff  502 12 28 14:33 index.js
-rw-r--r--  1 shinoda  staff  274 12 28 13:01 package.json

では実行してみる。

$ electron .

20181228_electron1.jpg

表示された。

20181228_electron2.jpg

終わるときは、「Electron」メニューから「Quit testapp1」を選んで。

あとは、Node.js で動く(Node.js 用に拡張された) JavaScript をゴリゴリ書けば、本格的なアプリも組めるということやね。
※まずは、Node.jp のインストールが必要。

Electron は、Node.js + Chromium をランタイムとする Node.js + HTML + CSS で作成されたアプリケーションをデスクトップアプリケーションとして実行するためのエンジンである。
いや、これも識者の方から「ちょっと違う」とか指摘を受けるかもしれんけど、こう理解しとけばとりあえず大丈夫じゃけえ。俺を信じろ(笑)

で、その Electron のインストール。
Node.jp のパッケージとしてインストールするだけなので、コマンド一発で終了。

$ npm -g install electron-prebuilt
npm WARN deprecated electron-prebuilt@1.4.13: electron-prebuilt has been renamed to electron. For more details, see http://electron.atom.io/blog/2016/08/16/npm-install-electron
/Users/shinoda/.nodebrew/node/v11.6.0/bin/electron -> /Users/shinoda/.nodebrew/node/v11.6.0/lib/node_modules/electron-prebuilt/cli.js

> electron-prebuilt@1.4.13 postinstall /Users/shinoda/.nodebrew/node/v11.6.0/lib/node_modules/electron-prebuilt
> node install.js

+ electron-prebuilt@1.4.13
added 149 packages from 107 contributors in 32.515s

パッケージとして追加された。
しかし、「electron-prebuilt has been renamed to electron.」なんてワーニング出てるところを見ると、「npm -g install electron」でよかったのかな?他所のサイトからコピペしてきたんだけど(笑)

-g オプションは「どこからでもコマンドが実行できるグローバルなところ(PATH が通ってるディレクトリ)にインストールするよ」というもの。

which してみたら、

$ which electron
/Users/shinoda/.nodebrew/current/bin/electron

にインストールされていた。 -g オプション付けなかったらどうなるかは知らん。npm を実行したディレクトリにインストールされるんかね?
MacBook 上で Electron で遊んでみるために、まず Node.js をインストールする。

Node.js は、このブログでも書いたことがあるが、簡単に言うと「サーバサイドで JavaScript を実行させる仕組み/環境」だ。いや、これ、絶対うるさい人から「違う」とか言われそうだけど、正直、こう覚えておけば問題ない(笑)

これを、うちの Mac OS X 10.14.2 に入れてみる。
そうそう。Electron の Mac サポートが終了したと言うてる人いるけど、終了したのは 10.9 以前のバージョンの Mac OS X サポートである。

ところで、Mac OS X は BSD UNIX ベース(Linux ベースだと誤解している人が未だにいる(笑))なので、インストール方法は UNIX への手順と変わらない。「ターミナル」(Windows にコマンドプロンプトみたいなもんね)を立ち上げ、シェル上でインストールを行う。

以下、Node.js のインストール手順。

1.Node.js がまだ未インストールなのを確認。
 (別にインストールされててもええけど(笑))

$ node -v
-bash: node: command not found

2.Mac OS X 用パッケージマネージャ homebrow のインストール
 ※今回はパッケージで Node.js を入れる。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew
==> The following new directories will be created:
/usr/local/bin
/usr/local/etc
<略>
/usr/local/Frameworks
==> The Xcode Command Line Tools will be installed.

Press RETURN to continue or any other key to abort<リターンキー>を押す

==> /usr/bin/sudo /bin/mkdir -p /usr/local/bin /usr/local/etc /usr/local/include /usr/local/sbin /usr/local/share /usr/local/var /usr/local/opt /usr/local/share/zsh /usr/local/share/zsh/site-functions /usr/local/var/homebrew /usr/local/var/homebrew/linked /usr/local/Cellar /usr/local/Caskroom /usr/local/Homebrew /usr/local/Frameworks
Password:<shinoda ユーザのパスワード>
==> /usr/bin/sudo /bin/mkdir -p /usr/local/bin /usr/local/etc /usr/local/include /usr/local/sbin /usr/local/share /usr/local/var /usr/local/opt /usr/local/share/zsh /usr/local/share/zsh/site-functions /usr/local/var/homebrew /usr/local/var/homebrew/linked /usr/local/Cellar /usr/local/Caskroom /usr/local/Homebrew /usr/local/Frameworks
Password:
<略>
Already up-to-date.
==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations
==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    https://docs.brew.sh

終了。

help を実行してみる。

$ brew help
Example usage:
  brew search [TEXT|/REGEX/]
  brew info [FORMULA...]
  brew install FORMULA...
  brew update
  brew upgrade [FORMULA...]
  brew uninstall FORMULA...
  brew list [FORMULA...]

Troubleshooting:
  brew config
  brew doctor
  brew install --verbose --debug FORMULA

Contributing:
  brew create [URL [--no-fetch]]
  brew edit [FORMULA...]

Further help:
  brew commands
  brew help [COMMAND]
  man brew
  https://docs.brew.sh

OK!ちゃんとインストールされている。

3.nodebrew のインストール
 nodebrew は node のバージョンを管理・切替するツール。これを入れておくとバージョンアップとかが簡単・・・らしい。

$ brew install nodebrew
==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
  /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 8 seconds

インストール終了。

$ which nodebrew
/usr/local/bin/nodebrew

ちゃんと入ってる。help を実行してみる。

$ nodebrew help
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

ちゃんと動いた。OK!!

4.Node.js のインストール

$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v11.6.0/node-v11.6.0-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/shinoda/.nodebrew/src/v11.6.0/node-v11.6.0-darwin-x64.tar.gz: 
Warning: No such file or directory

curl: (23) Failed writing body (0 != 1057)
download failed: https://nodejs.org/dist/v11.6.0/node-v11.6.0-darwin-x64.tar.gz

ありゃ、失敗。
https://nodejs.org/dist/v11.6.0/node-v11.6.0-darwin-x64.tar.gz は無いっていうてるなあ。
でも、サイト上にファイルは存在しているな。

/Users/shinoda/.nodebrew/src
ああ、ファイルではなく、このディレクトリが無いんか?

作る。
$ mkdir -p ~/.nodebrew/src
$ ls -la /Users/shinoda/.nodebrew/src
total 0
drwxr-xr-x  2 shinoda  staff  64 12 27 14:53 .
drwxr-xr-x  3 shinoda  staff  96 12 27 14:53 ..

そして再度インストール。
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v11.6.0/node-v11.6.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

お、成功したな。

確認。
$ nodebrew list
v11.6.0

current: none

Node.js v11.6.0 がインストールされたようだ。

5.Node.js を使えるように、もう一仕事
 nodebrew list で見たときに「current: none」になっているのは、使えるバージョンが指定されていないということ。(nodebrew では、複数のバージョンをインストールしておき、使いたい Node.js のバージョンを選ぶことができる)

$ nodebrew use v11.6.0
use v11.6.0
$ nodebrew list
v11.6.0

current: v11.6.0

「current: v11.6.0」に変わっている。

node のパスを通す。

$ ls -la /Users/shinoda/.nodebrew/current/bin
total 78800
drwxr-xr-x  6 shinoda  staff       192 12 27 15:02 .
drwxr-xr-x  9 shinoda  staff       288 12 27 14:54 ..
-rwxr-xr-x  1 shinoda  staff  40345424 12 26 16:13 node
lrwxr-xr-x  1 shinoda  staff        33 12 27 15:02 nodebrew -> /Users/shinoda/.nodebrew/nodebrew
lrwxr-xr-x  1 shinoda  staff        38 12 27 14:55 npm -> ../lib/node_modules/npm/bin/npm-cli.js
lrwxr-xr-x  1 shinoda  staff        38 12 27 14:55 npx -> ../lib/node_modules/npm/bin/npx-cli.js
$ cat ~/.bashrc
export PATH=$PATH:/Users/shinoda/.nodebrew/current/bin
^D
$ source .bashrc
$ set|grep PATH
PATH='/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/VMware Fusion.app/Contents/Public:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/shinoda/.nodebrew/current/bin'

Node.js を実行してみる。

$ node -v
v11.6.0

node.js のパッケージマネージャーである npm も実行してみる。

$ npm -v
6.5.0-next.0

ばっちり。

これで、Node.js のインストールは終了である。
以前、このブログで、JSP の実行で、

HTTPステータス 500 - javax.servlet.ServletException: javax.servlet.jsp.JspException:
Cannot find bean under name sex_list


結論として、

<bean:define id="sex_list" name="hogeForm" property="sex_list" scope="request"/>

という記述を追加してバッチリだったが、別の解として、

<html:form>タグか、<html:select>タグに name 属性で hogeForm を指定すれば良い

とも書いた。

・・・が、どうも select 項目の場合、option 項目に name 属性はないんで、<bean:define>タグの記述は必須のようである。

例えば、

<html:select name="hogeForm" property="sex">
  <html:option collection="sex_list" property="label" labelProperty="value" />
</html:select>

という具合に <html:select>タグに name 属性でフォーム bean の名前を与えても、結局「Cannot find bean under name sex_list」なエラーが出てしまう。
collection 属性で指定する項目がどのフォームbean に含まれているか、<bean:define>タグで記述しないと駄目なようだ。

自分のブログを信じて、「name 属性で指定しているから大丈夫なはず」と思い込み、ハマって貴重な時間を無駄にしてしまった(^^;
Tomcat のバージョンを 6→8に上げたら、JSPで表示しているWeb画面の「フォーム入力欄だけ」入力した日本語が化け始めた。

もちろん、入力したときは化けてないんだけど、Form の値がアクション・フォームBean→アクションクラス→ビジネスロジックと渡っていく中のどこかで化けている。
ビジネスロジックに渡ったところで、「日本語じゃないから駄目」って怒られる。
まあ、フォームBeanに渡ったところで化けてるんだろうけど。

色々 eclipse から Tomcat の設定をいじったりなんだりしたけど、server.xml の <Connector>のところに URIEncoding="Windows-31J" を追加するだけであった。

<Connector URIEncoding="Windows-31J" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" />

といった具合。

あと、設定を変更したあとにサーバを再起動するのは当たり前なんだけど、eclipse でサーバ名のところで右クリック。出てきたメニューから「Tomcat ワーク・ディレクトリーをクリーン」を選んでゴミは消しておくこと。

俺、たまに「なんで設定変えたのに、動作が変わらんのん?」ってハマることがあるから(笑)
まあ、よくあるプログラムですが。

なんかに同意する意味でチェックボックスをチェックすることで、次のページに進むためのボタンが活性化し押せるようになる・・・って画面、よくありますな。あれ。

まあ、全然難しい話ではなくて、

JavaScript

<script type="text/javascript">
  function checkValue(fname, cbox, target){
    var check = document.forms[fname].elements[cbox];
    var btn = document.forms[fname].elements[target];

    if (check.checked) {
      btn.removeAttribute('disabled');
    }
    else {
      btn.setAttribute('disabled', 'disabled');
    }
  }
</script>

Form

<form id="form1">
  <input id="check" type="checkbox" onclick="checkValue('form1', 'check', 'btn')"> あれを更新してもいい?<br>
  <br>
  <input id="btn" type="button" value="あれを更新するよ" disabled="disabled">
</form>

て感じで OK。

最初は disabled 属性に disabled を指定しているので「非活性」の状態で、同意のチェックをしたら、disabled 属性を空にして「活性化」すると。

ただ、現在使っているフレームワークは JavaServer Faces (JSF) で、input タグは h:commandButton タグで設定するんだけど、なんか、disabled 属性が無視されるんですけど?(^^;

<h:commandButton type="submit" id="btn" value="次へ"  省略 disabled="disabled" />

みたいに設定してても、実際吐き出された input タグには disabled 属性が含まれていないという・・・
JSF はほとんど経験ないのでわかんないんだけど、でも、ググってみると h:commandButton タグに disabled 属性は存在するみたい。うーん、謎。なんか環境がカスタマイズされているのかね?今回、その辺の環境がわかる人が近くにいないので、別のやり方で対応。

まあ、やり方は色々あるわけで。

JavaScript

<script type="text/javascript">
  function init(){
    var btn = document.forms['form1'].elements['btn'];
    btn.disabled = true;
  }

  function checkValue(fname, cbox, target){
    var check = document.forms[fname].elements[cbox];
    var btn = document.forms[fname].elements[target];

    if (check.checked) {
      btn.disabled = false;
    }
    else {
      btn.disabled = true;
    }
  }
</script>

Form

<form id="form1">
  <input id="initFlg" type="hidden" value="1">
  <input id="check" type="checkbox" onclick="checkValue('form1', 'check', 'btn')"> あれを更新してもいい?<br>
  <br>
  <input id="btn" type="button" value="あれを更新するよ">
</form>

として、<body onload="init()"> で画面が表示された最初に1回だけ init 処理を実行する。
その処理で、ボタンを非活性にしているのであります。

もともと、desabled="disabled" という記述が input タグになければ setAttribute などのメソッドは使えないので、input タグの disabled というプロパティを操作している。true(非活性)か false(活性)をセットしているのだね。

最初の案より、init 処理が増えているだけ、ちょっと面倒かな。

いやあ、しかし、h:commandButton タグに disabled 属性が無視されるのは何でなんだろう。

識者の方、ご教授いただければ幸いです。
大学生になったんで、さっそく授業で C言語を習っている息子から質問LINEが来た。
(俺は日ごろ全然 C言語は使わないんだけど、まあ、入門問題くらいには答えられる(笑))

問題は、

int i;
i = 077;
printf("i = %f\n", i);

だと、

i = 63.000000

と表示されるものを、

i = 77

と表示されるように修正しろってもの。

息子は 077 が 8進数の記述だということがわからず、それでハマッている様子。

「答えはいらんから、ヒントをくれ」というので、「8進数と10進数の書き方。ちなみに、16進数は 0x77」とヒントを出すと、「そういうことか!!」と息子の答えが返ってきた。

int i;
i = 077;
printf("i = %02o\n", i);

と、printf の変換子だけ修正した形だ。8進数のまま 77と出したいんやな。(2桁の数字を 2桁で出すんで、02 はいらんけどな)

なるほど。俺は、「077 は 8進数なんで、10進数なら 77と書くんよ」という問題だと思ったので、

int i;
i = 77;
printf("i = %d\n", i);

じゃねえの?って回答したんだけど、実際、先生がどっちの意図で問題出してるかわからんので、どっちも正解やな。

息子は結局、「10進の 77を出せっていう問題な気がする」と、俺の回答案を採用するというてるんだけど、実際どっちかわからんし、せっかく自分で回答考えたんだから 8進の 77を表示するほうを提出せえよ・・・と言うてるんだけど。

いやあ、しかし、そのうち C言語のややこしい質問には答えられなくなるなあ。

「先生に、Perlじゃだめですか?って聞いてみい」と言わざるを得なくなるな(笑)

#ちなみに我が家では、長男坊にはいっさいプログラミングを教えてません。大学生になって初めてプログラミングに触れた息子(笑)

このアーカイブについて

このページには、過去に書かれたブログ記事のうちプログラミングカテゴリに属しているものが含まれています。

前のカテゴリはパソコンです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。


月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら