変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

2016 / 11月

Prev( 10月 ) Next( 12月 )

CSSで簡単なレイアウトをやってみた

投稿日 2016年11月18日 00:18 by おっとっとっと Comment

CSSで画面いっぱいにDIVを広げてみる
というのがあったので、中にテーブルを入れてみた。
更にステータスバーを付けてみた。
思い切ってど真ん中をIFRAMEに変えてみた。
これで
帳票のエディタの画面構成を
CSSだけで、
できそうな気がしてきた。
でも、
ちょっと欲を出すと・・・
すぐ画面がぶっ壊れるので
厄介。
※Chromeで観ると　IFRAMEに横スルロールバーが出てしまうのは仕様かな？
次はルーラーを付けたいな～。
探してみると色々あるんだね。
1ｍｍ単位、0.1インチ単位は付けたいし、補助線やサイズや間隔のツールチップも付けたい。
2016/11/20  でもその前に
メニューからパーツをドラッグするとか
※上に<div>を被せたので、スクロールバーが使えなくなった。　orz
マウスで範囲設定してパーツを置くとか
配置したパーツを選択したり範囲選択とか
できないと意味がないか・・・orz
2016/11/26  とりあえず十字カーソル。
2016/11/26 ルーラを付け、パーツらしきものも貼れるようにしてみた。
2016/11/29 矢印ボタンを追加し、部品をクリックしたり範囲選択できるようにしてみた。
操作方法はこんな感じ。

  • オブジェクトをクリック：選択したオブジェクトを選択状態にする。
  • オブジェクトをCtrl＋クリック：選択したオブジェクトも選択状態にする。
  • オブジェクトをマウスで範囲指定：範囲に完全に内包されたオブジェクトを選択状態にする。
  • オブジェクトをShift＋マウスで範囲指定：範囲に一部でも内包されるオブジェクトを選択状態にする。
  • オブジェクトをCtrl+マウスで範囲指定：範囲に完全に内包されたオブジェクトも選択状態にする。
  • オブジェクトをCtrl+Shift＋マウスで範囲指定：範囲に一部でも内包されるオブジェクトも選択状態にする。

制限事項は（　＾ω＾）・・・

  • 選択状態をトグる操作を忘れていた。トグれないといづれ辛くなるハズ。
  • 範囲指定は左上端から右下端だけ。全方向に範囲指定できるようにしたい。

2016/11/30 選択状態をトグれるし、マウスドラッグでオブジェクトを移動できるようになった。
次はサイズの変更かな。UNDO、REDO、プロパティ（色など）画面はまだまだ、データ差し込みがもっと先だな。
ソースがかなり混沌としてきた。
試行錯誤しているのだから仕方がないが
ある程度考えがまとまったら、
スクラッチしなおすのが吉だな。
2016/12/2　範囲指定は全方向。
2016/12/6　フィールドやエコーが３重になっていたので修正。
2016/12/7  　できるだけCSSを使ったフィールドの変形するエコーのサンプルを作ってみた。図形をドラッグでき、矢印をドラッグすると図形が変形する。レポートライターのフィールドは大抵小さくなりがちなので、使いそうな矢印を強調するようなアニメーションとかまだまだ工夫が必要。図形の移動や変形もCSSに任せられるといいな（　＾ω＾）・・・Calc()使うか・・・矢印の位置がいい感じになった。
2016/12/9 ちゃんとエコーをON/OFFしてみると、色々想定外な出来事が出てくる。2016/12/10 多少無理してるけどHitTestを使わないでドラッグするバージョン。2016/12/14 複数選択可。



【jQuery】リッチテキストエディタっぽいもの

投稿日 2016年11月10日 01:00 by おっとっとっと Comment

HTML5のcontentEditableを使うと

リッチテキストエディタっぽい

ものができる。
MSのサイトにサンプルがあった。
でも、このままではちょっと使いにくいし、ガリガリ書かないといけないので・・・
jQueryっぽくし手直しHTMLファイルの
<div class=”rtEditMenu” id=”rtEditMenu1″ >
・・・
</div>
の中に

<select class=”rtEditMenuSelect” id=”{document.execCommandのコマンド}“>

か

<img class=”rtEditMenuButton” id=”{document.execCommandのコマンド}” src=”img/{ボタンの絵（※要透明色指定）}.png”    />

※透明色指定の画像はMS-Office365のEXCELに画像を挿入し、画像をダブルクリックすると、ツールバーの「色」から「透明色を指定」、画像の背景をクリックすると背景が透明に、Webページ(*.htm)で保存。
を追記するダケで
機能を増やせる様にしてみた。
使える（ハズの）コマンドはコメントで書いておいたので
好きなだけ機能を盛り込む
のも・・・
そう難しく無いだろう。
※SUPとSUBは、document.execCommand に対応したコマンドが無かった。
※フォントサイズの設定はクセがある様で1～7の範囲外は無効らしい。
※色は表示を工夫しないと文字色と背景色が区別できない。
※本来はcontentEditable=true時にはCtrl+BやCtrl+Iのショートカットが使えるらしいが、ブラウザのショートカットと重なっているので、この辺は調整しないといけない様だ。（要検討。
※メニュー設定のUIが欲しい。
※localstrageでいいから、メニィー設定の永続化が欲しい。インポートとエクスポートも欲しい。
※編集したものをインポートやエクスポートもしたい。
※HTMLファイルを読み込んで、サクっと編集できるようにしたい。
※最後にHLなどのタグが入ってしまうと、末端にカーソルが移動しない
などと考えていると
これで暫く遊べそうだ。
 
 
 
 



【TortoiseSvn】インストしっぱなしでも・・・PCが異常に重くならない様な設定

投稿日 2016年11月8日 00:59 by おっとっとっと Comment

ダウンロードはココからすると日本語の翻訳モジュールやマニュアルもあるので便利。
デスクトップのドコかで右クリックして「TortoiseSvn」 ＞ 設定（S)
全般を選択し、全般のTortoiseSvnの言語（L）を「日本語（日本）」に変えて【適用】。
再び、デスクトップのドコかで右クリックして「TortoiseSvn」 ＞ 設定（S)
アイコンオーバーレを選択し、監視するフォルダから大雑把に「除外するパス（X)：」の中に

C:

D:

E:

・・・

とSSDやHDDの全ドライブを指定し、svnのリポジトリィからチェックアウトするフォルダだけを「含めるパス（N）」の中に

E:\workspace

な感じで指定し、Windowsを再起動する。含めるパス（N）の内容を変更した場合は再起動が必要。但し、パスを削除した場合のみ、再起動不要。
これでTortoiseSvnを入れっぱなしでも、PCが重たくなりにくくなりそうな気がする。
ps.
チェックアウトしてもファイルが１つも出来なかったり、全部✖マークが付く異常な現象に遭遇。
タバコ一服をした後、ログの赤い文字を順に追っていく・・・消失の長いリストの後に、削除の文字。
どうやら、チェックアウトしたフォルダの下で　TortoiseSvn　＞　削除　し、その後にその上のフォルダを普通に削除したらしい。
以前のバージョンなら.svnが直下のフォルダの修正内容を把握していたため、TortoiseSvn　＞　削除　しても、その上のフォルダも削除してしまえば、修正内容は全て無かったことにできた。しかし、今ではチェックアウトしたフォルダにだけ.svnが出来、配下の修正情報が一極集中するので、　どこかのサブフォルダを　TortoiseSvn　＞　削除　した後は、その上位のフォルダをしても覚えていることが多い。
このため、TortoiseSvn　＞　削除　などの操作を含め、チェックアウトしたフォルダの一部をやり直す場合には、『TortoiseSvn　＞　編集の取り消し』で　『コミットしていない内容を全て水に流す』のが最良の手段になっている。
な訳で古いsvnのクセのまま、まめにチェックアウトすると、.svnよりもネストが深いパスのフォルダにいつのまにか、.svnができると、ハマる訳だ。
リポジトリィを最初にチェックアウトする場合はtrunkを指定するのが今風らしい。
 



【Deep Learning】tensorflow　Dockerでインスト

投稿日 2016年11月7日 22:28 by おっとっとっと Comment

公式ページのDocker版のインスト方法から
待ち時間は長いけど、セットアップは簡単。

> docker run -it -p 8888:8888 gcr.io/tensorflow/tensorflow

 

 でも、Jupyter notebook　をインストしてないと何もできないっぽい。

と思ったけど、

ipconfig で

イーサネット アダプター vEthernet (DockerNAT):

接続固有の DNS サフィックス . . . . .:
リンクローカル IPv6 アドレス. . . . .: ＊＊＊＊＊＊＊
IPv4 アドレス . . . . . . . . . . . .: 10.0.75.1
サブネット マスク . . . . . . . . . .: 255.255.255.0
デフォルト ゲートウェイ . . . . . . .:

とあるので、

ブラウザから、http://10.0.75.１:8888/　でつながった。

３つデモがあるので眺めてみた。

でも何がrunningなのかもよく判らない。

jupyter



【jQuery UI】DatePickerとか

投稿日 2016年11月4日 11:26 by おっとっとっと Comment

本家のホームページは、http://jquery.com/、ここからjQuery UIのライブラリィをダウンロードできるが、cssのテーマが色々あるので、ドレを選ぶか非常に迷う。
迷うなら、ALLからダウンロードするといいかもしれない。※２つあるが、後述の様にGoogle CDNのソースを使うならthemeだけでいい。
※現在は、バージョン1.12.1らしい。
ウェジット（部品）は、

  • Accordion
  • Autocomplete
  • Button
  • Checkboxradio
  • Controlgroup
  • Datepicker
  • Dialog
  • Menu
  • Progressbar
  • Selectmenu
  • Slider
  • Spinner
  • Tabs
  • Tooltip

なので変わっていない。(と思う。
グラフやスプレッドシートもあったらいいのにと思うけど、デザイン（見た目）だけでは使えない類なので、多少の改造はあり得るものなので、ここに無い方が都合が良いかもしれない。
以前は、カレンダー（DatePicker）の日本語化が難しかった。今でも　jQuery CDN　には無く、 Google Hosted Libraries にある。
使い方は、
<!–　jQuery UI CDN にあるソース　//–>
<link type=”text/css” rel=”stylesheet” href=”http://code.jquery.com/ui/1.11.3/themes/cupertino/jquery-ui.min.css” />
<script type=”text/javascript” src=”http://code.jquery.com/jquery-3.1.1.min.js”></script>
<script type=”text/javascript” src=”http://code.jquery.com/ui/1.11.3/jquery-ui.min.js”></script>
<!–Google CDN にあるソース–>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/i18n/jquery-ui-i18n.min.js”></script>
を貼り、
初期化の先頭に
$(function() {
// まず、カレンダーの言語設定を日本語に変更。
$.datepicker.setDefaults($.datepicker.regional[‘ja‘]);
・・・
});
を付け加えればいいらしい。
※Google CDNにはまだ1.12.1 の国際化対応のソースが載っていないらしい。
ググってみると、GitHubにすでに1.12.1のソースはあるが、jquery-ui-i18n.min.js は無く、ダイレクトに datepicker-ja.js と日本語化することになる。
1.11.3のjquery-ui-i18n.min.jの中身は、

datepickert.regional.{各リージョン名} = {

closeText:”＊＊＊＊”,

・・・

yearSuffix:””

},

t.setDefaults(t.regional.{各リージョン名}),　t.regional.{各リージョン名},　←多分いらないコード。

と少し変な感じになっているけど、こんな感じで、i18nのjsファイルをマージしたものなので、
$.datepicker.setDefaults($.datepicker.regional[‘ja’]);
$(‘#date’).datepicker({ dateFormat: ‘yy年mm月dd日’ });
で日本語向きのカレンダーになる。
とりあえず、jquery-ui-i18n.min.jsの1.11.3を最新のjQueryやuiに使いまわしても動くらしい。



【jQuery】基本

投稿日 2016年11月3日 22:05 by おっとっとっと Comment

本家のホームページは、http://jquery.com/、ここからjQueryのライブラリィをダウンロードできる。
※現在は、バージョン3.1.1らしい。

  • jquery-3.1.1.js
    • ソース。タブレーションしてあるので読みやすい。
  • jquery-3.1.1.min.js
    • jquery-3.1.1.jsからタブレーションや改行を取り除いてファイルサイズを小さくした実用向けのもの。
  • jquery-3.1.1.min.map

利点

HTMLやNode.jsでJavaScriptのライブラリィとして使うと、ブラウザの差異をあまり気にせずにコードできる。

イベント・ドリブンなコードを書くので、必要な個所だけ付け加えればいい。

難点

HTMLに取り込むとコードが見づらくなる。

ライブラリィを参照させるとサーバーが必要だしローカルに保存し実行しにくいが、最近のブラウザはページを保存するとそのサブフォルダの参照ファイルを保存してくれるのであまり不便ではない。

jQueryで書くコードは、イベントの事前に宣言することを基本にコードするので、書いたものはイベントが発生しないと実行しないので、コードが上から下に順に動作する訳では無いので、普通のJavaScriptに混ぜると非常に読みにくくなる。

とりあえず

<script>
$(function(){
// この中に変数の初期化やイベントを書いていくと
//HTMLファイルを読み終わった後に、初期化やイベント宣言（っぽい）が処理されるので便利。
});
</script>

妙な形だが、$のパラメータに名無しの関数を書き込んでいるダケ。

普通にJavaScriptを書くと、<body>の部分を読んでいないのに処理されてしまうと、document.getElementByID(‘*****’)な部分が　undefine　となってしまうので、<body onclick=”init()” >な感じに初期化処理を書かないといけないけど、$(function(){・・・});はそれを自動的にやってくれるので、デザインとスクリプトが別々の人で作っている時には特に便利なので、こんな風にした方がいいのだろう。
セレクターの書き方

document.getElementByID(‘＊＊＊’)のように長く指定せず、$(‘#＊＊＊’)と簡単に書ける。

IDで指定する場合は　$(‘#＊＊＊’)　、クラスの場合は $(‘.＊＊＊’)　、タグの場合は　$(‘table’) 　とそのまま書く。

よく見ればcssの指定と同じなので、$(‘td  aaa’)のように細かく分けて指定もできるが , で区切って複数指定もできそう。

イベントの書き方

先のセレクターを使い
$(‘#****’).click(  function() {
// イベントの中身
});
のように書く。

妙な形だが、セレクターで指定したオブジェクトのclickイベントのパラメータに名無しの関数を書き込んでいるダケ。

もしclickイベントに既に設定されているものがあれば、そのリストの最後に追加される。

オブジェクトの見た目を変える

イベントの書き方と同じ様にプロパティを変える。

書式なら css 。
$(‘#test1’).click(function() {
$(‘#test1’).css(‘background-color’, ‘#777700’)
});
テキストなら text　か　val 。
※HTMLタグによる。
//INPUTタグやTEXTAREAタグの場合
$(‘#test2’).click(function() {
$(‘#test2’).val(“INPUTタグを変えました”);
});
//DIVタグやTEXTAREAタグの場合
$(‘#test3’).click(function() {
$(‘#test3’).text(“DIVを変えました”);
});

アニメーション

フェードアウトなどがある。
$(‘#test’).click(function() {
$(‘#test’).fadeOut(“slow”);
});

AJEX

一時期流行った非同期通信の例

ajexでファイルを読み込んでいる。指定のdataType: “script” は、読み込んだらトリアエズ勝手に実行してくれるので便利だが、外部変数をイジる場合は使えないかもしれないので、

勘違いしやすいところ

上でイベント宣言（っぽい）と書いたのは、HTMLを全部読まないと使えないイベントの宣言なので、本物の宣言ではない。

なので・・・

（１）同じIDをいくつも使う場合は#***** ではなく　[id=****]　と書かないと先頭の1個目しか反応しない。

（２）後に追加したものは中途半端に無視してしまうので、※ID指定の場合

$(document).on(‘click’, ‘#test1’ , function() {
$(‘#test1’).css(‘background-color’, ‘#777700’)
});

な感じに書き、タグを追加した時にマメにイベントも処理する様にしないといけない。

という感じに注意が必要になっている。

クラスの場合はどうでもいいらしい。

（３）jsファイルをいっぱい作ると相対パスを変えてしまうと修正がめんどくさい。

<base>で指定できるが、チョット間違えると動かなくなるし、ｊｓファイルのパスを指定すると、cssファイルや画像ファイルの方も困るかもしれないので、

共通のjsファイルで

var base_js_path     = “/sample/jquery/js/”;
var base_css_path   = “/sample/jquery/css/”;
var base_img_path = “/sample/jquery/img/”;

個別のjsファイルで、

url: base_js_path + “sample12init.js”

と書いた方がマシ。




top

Prev( 10月 ) Next( 12月 )