月: 2017年12月

jQuery によるCSSの操作

今回は、jQuery のライブラリの eachメソッドを使ってループをかけ、DOM(Document Object Model)の Class を操作してリストのバックグラウンドのCSSを変更する方法をご紹介します。

 

<head>
<style type="text/css">
　　.even { background-color: #ffffff; }
　　.odd { background-color: #cccccc; }
　</style>
<script src="./jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
　　(function ($) {
　　　　$(document).ready(function() {
　　　　    $("ul > li").each(function(i) {
　　　　    if (i % 2 ==1) {
　　　　　　　　$(this).addClass("odd");
　　　　　　    }
　　　　　　    else {
　　　　　　　　    $(this).addClass("even");
　　　　　　    }
　　　　    });
　　    });
　　}) (jQuery);
</script>
</head>
<body>
　　<h2>Plainswalker</h2>
　　　　<ul>
　　　　　　<li>Ajani</li>
　　　　　　<li>Jace</li>
　　　　　　<li>Liliana</li>
　　　　　　<li>Chandra</li>
　　　　　　<li>Garruk</li>
　　　　　　<li>Elspeth</li>
　　　　　　<li>Tezzeret</li>
　　　　　　<li>Sorin</li>
　　　　　　<li>Nahiri</li>
　　　　　　<li>Nissa</li>
　　　　</ul>
</body>

jQuery からDOM を操作する方法として応用できるのではと思いました。
訂正）Plainswalker のスペルミスを訂正

jQuery のアコーディオン

今回は、フロントエンドで頻繁に使われる、jQuery のパーツ、アコーディオンのパターンをおさらいしました。

https://stuffy.mydns.jp/~gusachan/javascript/accordion.html

アコーディオンも項目を複数展開できるものから、閉じるボタンが付いたものなどヴァリエーションが豊富なんですね。

まだ、CSS を勉強していない自分は「いや～キツイっす。」

jQueryクックブック 大型本 – 2010/8/18
jQuery Community Experts (著),‎株式会社クイープ (翻訳) -Amazon.co.jp

訂正）アコーディオンの高さを変える、accordion.css のプロパティ、height を訂正して再送しています。

.accordion.dd {
        color: #666;
        font-size: 11px;
        overflow: hidden;
        height: 70px; ← 270pxから70px に

マイクラ・転落防止柵付き階段 Ver.2

前回からの改良点は踊り場を設けて、高さを関数化した所です。

踊り場付近のコードがごちゃごちゃしてて汚いです。

from mcpi.minecraft import Minecraft
from mcpi.block import *
def loop3(height):
    mc = Minecraft.create()
    pos = mc.player.getTilePos()

    for i in range(height):
# +x 方向の階段と転落防止柵
        mc.setBlock(pos.x+i+1,pos.y+i,pos.z,DIAMOND_BLOCK)
        mc.setBlock(pos.x+i+1,pos.y+i+1,pos.z-1,DIAMOND_BLOCK)
    for i in range(1,height):
        mc.setBlock(pos.x+i+1,pos.y+i+1,pos.z+1,DIAMOND_BLOCK)
# -x 方向の階段と転落防止柵
        mc.setBlock(pos.x-i+height,pos.y+i+height-1,pos.z+1,DIAMOND_BLOCK)
        mc.setBlock(pos.x-i+height,pos.y+i+height,pos.z+2,DIAMOND_BLOCK)
# -x 方向の内側の転落防止柵
    for i in range(height-2):
        mc.setBlock(pos.x-i+height-2,pos.y+i+height+2,pos.z,DIAMOND_BLOCK)
# ループでできた不要なブロック削除        
    mc.setBlock(pos.x+height,pos.y+height,pos.z+1,AIR)    
# z 踊り場の転落防止柵
    mc.setBlock(pos.x+height+1,pos.y+height,pos.z-1,DIAMOND_BLOCK)
    mc.setBlock(pos.x+height+1,pos.y+height,pos.z+2,DIAMOND_BLOCK)
# 踊り場の床とz 方向の転落防止柵
    for i in range(4):
        mc.setBlock(pos.x+height+2,pos.y+height,pos.z+i-1,DIAMOND_BLOCK)
        mc.setBlock(pos.x+height+1,pos.y+height-1,pos.z+i-1,DIAMOND_BLOCK)
# ２階の踊り場とz 方向の転落防止柵
    for i in range(4):
        mc.setBlock(pos.x-2,pos.y+height*2,pos.z+i-1,DIAMOND_BLOCK)
        mc.setBlock(pos.x-1,pos.y+height*2-1,pos.z+i-1,DIAMOND_BLOCK)
        mc.setBlock(pos.x,pos.y+height*2-1,pos.z+i-1,DIAMOND_BLOCK)
# ２階の踊り場と転落防止柵
    mc.setBlock(pos.x-1,pos.y+height*2,pos.z-1,DIAMOND_BLOCK)
    mc.setBlock(pos.x,pos.y+height*2,pos.z-1,DIAMOND_BLOCK)
    mc.setBlock(pos.x-1,pos.y+height*2,pos.z+2,DIAMOND_BLOCK)
    mc.setBlock(pos.x,pos.y+height*2,pos.z+2,DIAMOND_BLOCK)
    mc.setBlock(pos.x+1,pos.y+height*2,pos.z+2,DIAMOND_BLOCK)

# 関数化した引数付きの階段を作成
loop3(10)

需要があるかと言われれば、疑問？

訂正）関数定義の位置を正しい場所に移しました。

アナログ生活めも – チャレンジ編

今日はサブウェイのBLTサンドでトッピングチャレンジ。

ベーコン、サラミMAXトッピング、と行きたかったがクルーのお姉さんも困惑気味、今回はサンドに溢れんばかりのベーコン、サラミは2セット。そこは真の肉好きにこそ許される至高の逸品！無茶しやがって…食えんのか？

前置きはさて置き、いざ、実食！

サラミとベーコンがミルフィーユのように口の中に広がり、シーザードレッシングの濃厚なチーズの風味とトマトのフレッシュな酸味と相まって思わず、ウンメェーーーィとなったぞ！

これでポテトとドリンクが付いて990円は高コスパだと思った。(粉みかん)

マイクラ・転落防止柵付き階段

マイクラの階段mod に転落防止柵を付けたマイナーヴァージョン。

from mcpi.minecraft import Minecraft
from mcpi.block import *
mc = Minecraft.create()
pos = mc.player.getTilePos()

for i in range(20):
    mc.setBlock(pos.x+i+1,pos.y+i,pos.z,DIAMOND_BLOCK)
    mc.setBlock(pos.x+i+1,pos.y+i+1,pos.z+1,DIAMOND_BLOCK) ← New！
    mc.setBlock(pos.x+i+1,pos.y+i+1,pos.z-1,DIAMOND_BLOCK) ← New！


そろそろ、自分の家が欲しいですね。
 

EPSON のキーボードが・・・キーボードが・・・

「Z」と「D」と「B」の接触が悪いです。（半ギレ

ちなみにWindows10 でマインスイーパーをやるには「Microsoft Solitaire Collection」から下の方にスクロールするとストアからダウンロードできます。

UI が豪華になってスコアが記録できるようになりましたね。

 

KB4054517 の不具合

先日、Windows7からアップグレードしたVAIO機の Windows10 Fall Creators Update の累積更新プログラム KB4054517 でOSビルド16299.64 から 16299.125 にアップデートしようと、[設定]-[更新とセキュリティ]からインストールしようとすると、エラー「0x80070bc2」や、「0x80246010」でインストールはできるのですが、何度再起動しても更新失敗します。

Windows10 で windows updateに失敗する場合の対処法

にある通り、[トラブルシューティング] でデータベースの修復や、コマンドプロンプトから、

DISM.EXE /online /cleanup-image /restorehealth

も試しましたが、再起動時にプログラムが働かないような感じです。

Windows Update カタログからスタンドアローンの .msi をインストールもしましたが同じ結果でした。

最終手段、セキュリティソフトをアンインストールして、[設定]-[更新とセキュリティ]-[回復] から[このPCを初期状態に戻す]-[開始] 、初期状態からWindows Update を適用すると、OSビルド16299.64 から「KB4054517」の更新に成功しました。

休日1日、潰れました。（白目

Windows10 ログイン画面の壁紙

Windows10 のログイン画面の壁紙は、

ASCII.jp：Windowsの起動時に表示される「きれいな写真」は何？

にあるとおり、「%USERPROFILE%\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets」に450kB以上のファイルに拡張子なしで .jpg ファイルとして保存されています。[このファイルを開く方法を選んでください。] でInternet Explorerなどのアプリでファイルを開くと綺麗な写真が閲覧できます。

「名古屋城」（画像をクリックするとスライドショーが閲覧できます。）

小学校の先生を忖度した掛け算

ポイントは、足し算のループを使って乗算の演算子を使わずに掛け算の結果を格納する点です。

for (k=1; k <= j; k += 1) {     // i+i+・・・+i をj回繰り返すループ
　　　　mat[i][j] += i;　　　　　　　　// 配列に格納
}

https://stuffy.mydns.jp/~gusachan/javascript/multiplicativeMatrix.html

// (m x n)の2次元配列を定義

Array.matrix = function (m, n, initial) {
    var a, i, j, mat = [];
      for (i=1; i < m; i += 1) {
        a = [];
        for (j = 0; j < n; j += 1) {
          a[j] = initial;
        }
        mat[i] = a;
      }
      return mat;
}

// ゼロで埋められた 10 X 10 の行列を生成する

var myMatrix = Array.matrix(10, 10, 0);

// 配列にループで九九の計算結果を入力する

Array.multiplicative = function (n) {
    var i, j, mat = Array.matrix(n, n, 0);
    for (i=1; i < n; i += 1) {
      for (j=1; j < n; j += 1) {
        for (k=1; k <= j; k += 1) {        // i+i+・・・+i をj回繰り返すループ
          mat[i][j] += i;　　　　　　　　// 配列に格納
        }
        mat[i][j] = i +" ×" +  j + " =" + mat[i][j]  kループ外で出力
      }
    }
    return mat;
};

myMatrix = Array.multiplicative(10);

// 生成された行列を書き出すメソッド

Array.output = function (m, n) {
  window.onload = function() {
    var mat = Array.multiplicative(n);
    var divId = document.getElementById('result');
    var table = document.createElement('table');
    divId.appendChild(table);
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);
    for (var i = 1; i < m; i++) {
      var tr = document.createElement('tr');
      for (var j = 1; j < n; j++) {
        var td = document.createElement('td');
        td.innerHTML = myMatrix[i][j];
        tr.appendChild(td);
      }
      tbody.appendChild(tr);
    }
    return mat;
  }
};

printMatrix = Array.output(10,10);

Web記事を印刷するなら

Google ドキュメントが便利、これだけは伝えたかった。

ブラウザから選択したテキストを印刷しようとするとテーブルやレイアウトまでそのままでコピーされるのでうまくいきません。そんなときに使えるサービス、Google ドキュメント。

右下の＋アイコンをクリックして[新しいドキュメントを作成]

プリントアウトしたいWeb記事を選択、コピペ、印刷するとPDFに変換してくれます。

.jpg や .png などの画像形式のドキュメント、文字列もいったん、Google ドライブにアップロードして右クリック、[アプリで開く]-[Googleドキュメント]すると画像を読み取ってテキストデータに自動で起こしてくれます。（変換精度は解像度に比例して良くなります）

今まで何故、使わなかった・・・。（後悔）