aaaaaaaaaaaa

100円のカメラの三脚を分解してナットを埋め込みステムマウントのヘッドにしてみました。
ぱっとみの雰囲気は悪くないきがするよ！
いまはカメラとか一切つけてないから大丈夫だけど走行しながらのカメラの搭載はちょっと不安しかない。

今日はちららっとバイクで出かけてお昼ごはんを外で食べてガソリンを入れて帰ろうとしました。

ふと、お店のすぐそばの道路で

「あ、財布が無い」

ということに気がついて顔面蒼白です。
しかも、ガソリンはエンプティーが点滅中。（いや点滅しても4リットルはあるから心配はないんだけど怖い）

それよりなによりもホニャホニャが・・・・手元にない！＠＠

あわわわわと、非常にびくびくしながら帰宅。

いつもどおり年季の入った愛用のマウスをくるくるとホイールボタンを回したところ。
急にスカスカスカスカスルルルルーと。
普段はｶｶｶｶｶｶｯと聞こえる回転音が聞こえない状態になりましてな。

とりあえず、それ以外の箇所の部分は動いているのを確認してメーカーサイトにいったところ2005年製なのでそりゃモチのロンとしか言えないぐらいに在庫なし製造中止ですよ。

メーカーで修理対応も難しいとおもうので年季も入っているしこれで修理できなければ新しいマウスを考えようか・・・。
ということで、分解してみました。

一見するとネジ穴も無くどのように組み立てているかわからなかったのですが、マウスの外装をコンコンとペンでたたいていきどのような内部構造になってるのかなーと調べたところ、やっぱり内部に支えっぽいものがあるんじゃないのかと思えたので、マウスのレーザー部分の周りにあるメーカーシールをはがしてみるとビンゴでネジ穴を発見。

無事に分解。

これがホイールマウスの軸の部分に当たるパーツ。
軸とギアのかみ合わせが経年劣化でかみ合わなくなった模様。
よく見ると先のほうが丸くなってる。
本来だと6角形。

先ほどの軸とギアの部分を確認してここをうまくかみ合わせればギアが回ることを確認したので
あとはどのように軸の部分を修復するか。

パテをもるか、新しく軸を作り直すかと考えたが一番シンプルに瞬間接着剤で隙間を埋めてしまうという手間のかからない方法をチョイス。

無事に修復。

ホイールが壊れたときはかなり同様したが、修復もできてなにより。
また、マウスを分解するついでにもっすごい溜まりに溜まっていた内部や隙間の汚れをごっそり取ることができた。

今後は分解して掃除することができるようになったから、今回の出来事はある意味すごく良い結果に転んだんじゃないだろうか？

ホームセンターで色々買ってきたよ！
黒いパイプはホームセンターを回った結果サイズがあうものがなくってハンズにいってABSパイプを購入。
望んでいたサイズのもののぴったりのものがなかったから補強用にセメダインもあわせて買ったけどちゃんとはまったから無駄な買い物になってしまったよ！正直セメダインが一番高かった！

100ミリの長さのボルトにスペーサーをかませてゴムワッシャーとステンワッシャーをかませそこにABSパイプを斜めにカットしたものをいれます。
その後大きめのワッシャーをかませ手でしめれるように蝶ナットをいれます。
ちなみにこの蝶ナットを購入するときにですね・・・。

1件目のホームセンターで売ってるのは確認してたので
手に取ろうとしたときに隣のお客さんが店員さんと蝶ナットありませんか？みたいな話をしていてですね。
それでワタクシは言ったのですよ。
「これのことですよね？」と

そしたらその隣のお客さんですね。
「ああ、それです」みたいなこといって

そこの棚にあるやつを全部もっていったのですよ・・・。

心の中で泣きました。

お話して１つだけおいていってもらおうと思いましたけど
なんか、ガムをクチャクチャ言わせてなんか嫌な雰囲気を感じたので2件目のホームセンターで買いました・・。
（どうせパイプがなくって2件目にもいかないといけなかったしね！　見た目は普通なのに変な不気味さがある人だったよ・・。）

そんな感じで部品を組み合わせた状態で蝶ナットを締めるとABSパイプがずれていき横幅が広がってつっかえになるという構造ですわ。

つくったものをバイクにはめるとこんな感じです。
もう少し調整したいところがあるのですがおおむね問題ない感じ。
ワッシャーとステムナットの間にゴムシートかなにかが欲しいかなと思いますわ。
衝撃干渉用とステムナットに傷がつかないように。
あとはワッシャーの色がちょっと気に入らないというか・・・、もちょっとほかの色があればなぁああああ。

次はマウスを直したときの記事だっ。

マウスが壊れた＼(^o^)／

さすが2005年製、生産終了在庫なし。
これは自力修理か・・・。

とりつけてもらったよ！
GIVIのトップケースとあわせてショップでつけてもらった。
GIVI箱のベースの取り付けは自分でやろうかと思ったけどトルク管理等あったし
まぁ、高い金額にはならないだろうとおもってステムナットとあわせて作業依頼だよ！

アルマイト加工がされてあってテカテカしてる。

これでステムマウントが可能になったからどんな感じで自作しようかと悩み中ですよ。
とりあえず現状で取り付けようとおもうのはスマホかなぁ・・・？

とりあえず、前回作ったものは一旦破棄をして別の方式で作っていこうとおもう。
前回のプログラムの困ったところは外部ファイルを使うということでプラグインフォルダにいれただけで動くというものではないというのが困ったところ。

アップロードした画像を削除したりできない。
稼動させるためには別フォルダにアップロード用のプログラムを入れないといけない。

この二つをどうにかして解消したい。
あれからいくつか探し回ったところWordpressのアップローダーを呼び出す方式を見つけたのでそれをちょっと試行錯誤してみたいと思う。

ってか足が冷えてこまるよぅ・・・orz

ＷＰの管理画面のカスタマイズはひと段落したので（プラグインにはしてないけど）
次のことを試してみようと思い。

自分のすきなTRPGのSW2.0のダメージ計算プログラムというのを作ってみようと思いましてな。
単純な計算方法だけいえば
6面ダイスを2つ振ってそこの合計値をもとに
使っている武器の強さからダメージを算出するというものです。
2D6（6面ダイスが2個の合計値という意味です）が5で武器の強さが20だったら10のダメージとする。
というような計算式になっています。

一通りのダメージの算出ができたので、ふと思いました。

あれ？　これってこのまま公開しちゃったら著作権違反とかになっちゃうのかな？と・・・・。

・・・・・・・・・・・。

確認してみるために著作権元にメールで問い合わせましたが返答にはしばらく時間がかかるということが仕様みたいです・・・。
あかん、これはモチベーションが保てないかもしれん・・・・。

function.php

//投稿ボックスギャラリー用
/*管理画面が開いたときに実行*/
add_action( 'admin_init', 'my_admin_init2' );

/*更新ボタンが押されたときに実行*/
add_action('save_post', 'save_custom_field_postdata');
 
/* カスタムフィールドを投稿画面に追加 */
function my_admin_init2() {
	add_meta_box( 'my_meta_box_post2', '添付写真', 'my_meta_box_gallery', gallery );
}

/* 投稿画面に表示するフォームのHTMLソース */
function my_meta_box_gallery() {
    //既に値がある場合は値をフォームに反映して出力
    $uploaded_image = get_post_meta( $_GET['post'], 'upload_image' );

?>
<div id="meta_div">
<?php print_r ($uploaded_image);?>
<ul id="meta_ul">
<div class="uploadedImageView"></div>
<?php
if($uploaded_image == ""){ $num = 1 ; }else{ $num = 0 ; }
$com = $num + count($uploaded_image[0]);
for($i = 1; $i <= $com; $i++):
?>

<li class='inbox'>
<input type='text' class="upload_image" name='upload_image[]' value='<?php echo esc_html($uploaded_image[0][$i-1]);?>'> <span class="upload_image_button">IMAGE</span>｜<span class='deth'>Delete</span>
</li>
<?php endfor;?>
</ul>
<span id="animate">テキストエリアを追加</span>
<div id="mydialog" class="cf">

<div id="drop-files" ondragover="return false">
		Drop Images Here
</div>
	
	<div id="uploaded-holder" >
		<div id="dropped-files">
			<div id="upload-button">
				<a href="#" class="upload">Upload!</a>
				<a href="#" class="delete">delete</a>
				<span>0 Files</span>
			</div>
		</div>
		<div id="extra-files">
			<div class="number">
				0
			</div>
			<div id="file-list">
				<ul></ul>
			</div>
		</div>
	</div>
	
	<div id="loading">
		<div id="loading-bar">
			<div class="loading-color"> </div>
		</div>
		<div id="loading-content">Uploading file.jpg</div>
	</div>
	

</div>
</div>
<script>
jQuery(document).ready(function () {


function app(){
var bts = jQuery('.deth').size();
if(bts == 1){
jQuery('.deth').hide();
}else{
jQuery('.deth').show();
}
}

app();

jQuery("#animate").click(function(){
jQuery("#meta_ul li:first").clone().appendTo("#meta_ul");
jQuery("#meta_ul li:last input").val("");
app();
});

jQuery("span.deth").live("click",
function(){
jQuery(this).fadeOut("slow" , function (){
jQuery(this).closest('li').remove('.inbox');
app();
});
});



});
</script>


<?php
}

/* 設定したカスタムフィールドの値をDBに書き込む記述 */
function save_custom_field_postdata( $post_id ) {
    $mydata = $_POST['upload_image'];
    if ( "" == get_post_meta( $post_id, 'upload_image' )) {
        /* upload_imageというキーでデータが保存されていなかった場合、新しく保存 */
        add_post_meta( $post_id, 'upload_image', $mydata, true ) ;
    } else if ( $mydata != get_post_meta( $post_id, 'upload_image' )) {
        /* upload_imageというキーのデータと、現在のデータが不一致の場合、更新 */
        update_post_meta( $post_id, 'upload_image', $mydata ) ;
    } else if ( "" == $mydata ) {
        /* 現在のデータが無い場合、page_layoutというキーの値を削除 */
        delete_post_meta( $post_id, 'upload_image' ) ;
    }
}

//管理画面にアップローダー用のJSを追加
function admin_js() {
global $post_type;
if( 'gallery' == $post_type ) {
 wp_enqueue_script('admin', get_bloginfo('template_url').'/js/my_admin_scripts.js', null, true);
}
}
add_action( 'admin_print_scripts-post-new.php', 'admin_js', 1000 );
add_action( 'admin_print_scripts-post.php', 'admin_js', 1000 );

JS

jQuery(document).ready(function() {
	
	// Makes sure the dataTransfer information is sent when we
	// Drop the item in the drop box.
	jQuery.event.props.push('dataTransfer');
	
	var z = -40;
	// The number of images to display
	var maxFiles = 5;
	var errMessage = 0;
	
	// Get all of the data URIs and put them in an array
	var dataArray = [];
	
	// Bind the drop event to the dropzone.
	jQuery('#drop-files').bind('drop', function(e) {
			
		// Stop the default action, which is to redirect the page
		// To the dropped file
		
		var files = e.dataTransfer.files;
		
		// Show the upload holder
		jQuery('#uploaded-holder').show();
		
		// For each file
		jQuery.each(files, function(index, file) {
						
			// Some error messaging
			if (!files[index].type.match('image.*')) {
				
				if(errMessage == 0) {
					jQuery('#drop-files').html('Hey! Images only');
					++errMessage
				}
				else if(errMessage == 1) {
					jQuery('#drop-files').html('Stop it! Images only!');
					++errMessage
				}
				else if(errMessage == 2) {
					jQuery('#drop-files').html("Can't you read?! Images only!");
					++errMessage
				}
				else if(errMessage == 3) {
					jQuery('#drop-files').html("Fine! Keep dropping non-images.");
					errMessage = 0;
				}
				return false;
			}
			
			// Check length of the total image elements
			
			if(jQuery('#dropped-files > .image').length < maxFiles) {
				// Change position of the upload button so it is centered
				var imageWidths = ((220 + (40 * jQuery('#dropped-files > .image').length)) / 2) - 20;
				jQuery('#upload-button').css({'left' : imageWidths+'px', 'display' : 'block'});
			}
			
			// Start a new instance of FileReader
			var fileReader = new FileReader();
				
				// When the filereader loads initiate a function
				fileReader.onload = (function(file) {
					
					return function(e) { 
						
						// Push the data URI into an array
						dataArray.push({name : file.name, value : this.result});
						
						// Move each image 40 more pixels across
						z = z+40;
						var image = this.result;
						
						
						// Just some grammatical adjustments
						if(dataArray.length == 1) {
							jQuery('#upload-button span').html("1 file to be uploaded");
						} else {
							jQuery('#upload-button span').html(dataArray.length+" files to be uploaded");
						}
						// Place extra files in a list
						if(jQuery('#dropped-files > .image').length < maxFiles) { 
							// Place the image inside the dropzone
							jQuery('#dropped-files').append('<div class="image" style="left: '+z+'px; background: url('+image+'); background-size: cover;"> </div>'); 
						}
						else {
							
							jQuery('#extra-files .number').html('+'+(jQuery('#file-list li').length + 1));
							// Show the extra files dialogue
							jQuery('#extra-files').show();
							
							// Start adding the file name to the file list
							jQuery('#extra-files #file-list ul').append('<li>'+file.name+'</li>');
							
						}
					}; 
					
				})(files[index]);
				
			// For data URI purposes
			fileReader.readAsDataURL(file);
	
		});
		

	});
	
	function restartFiles() {
	
		// This is to set the loading bar back to its default state
		jQuery('#loading-bar .loading-color').css({'width' : '0%'});
		jQuery('#loading').css({'display' : 'none'});
		jQuery('#loading-content').html(' ');
		// --------------------------------------------------------
		
		// We need to remove all the images and li elements as
		// appropriate. We'll also make the upload button disappear
		
		jQuery('#upload-button').hide();
		jQuery('#dropped-files > .image').remove();
		jQuery('#extra-files #file-list li').remove();
		jQuery('#extra-files').hide();
		jQuery('#uploaded-holder').hide();
	
		// And finally, empty the array/set z to -40
		dataArray.length = 0;
		z = -40;
		
		return false;
	}
	
	jQuery('#upload-button .upload').click(function() {
		
		jQuery("#loading").show();
		var totalPercent = 100 / dataArray.length;
		var x = 0;
		var y = 0;
		
		jQuery('#loading-content').html('Uploading '+dataArray[0].name);
		
		jQuery.each(dataArray, function(index, file) {	
			
			jQuery.post('/date/wp_fileuploads.php', dataArray[index], function(data) {
			
				var fileName = dataArray[index].name;
				++x;
				
				// Change the bar to represent how much has loaded
				jQuery('#loading-bar .loading-color').css({'width' : totalPercent*(x)+'%'});
				
				if(totalPercent*(x) == 100) {
					// Show the upload is complete
					jQuery('#loading-content').html('Uploading Complete!');
					
					// Reset everything when the loading is completed
					setTimeout(restartFiles, 500);
					
				} else if(totalPercent*(x) < 100) {
				
					// Show that the files are uploading
					jQuery('#loading-content').html('Uploading '+fileName);
				
				}
				
				// Show a message showing the file URL.
				var dataSplit = data.split(':');
				if(dataSplit[1] == 'uploaded successfully') {

					
					jQuery('#meta_ul').append('<li><a href="/date/images/'+dataSplit[0]+'">'+fileName+'</a> '+dataSplit[1]+'</li>');
				

				
				} else {
					jQuery('#meta_ul').append('<li><a href="/date/images/'+data+'. File Name: '+dataArray[index].name+'</li>');
				}
				
			});
		});
		
		return false;
	});
	
	// Just some styling for the drop file container.
	jQuery('#drop-files').bind('dragenter', function() {
		jQuery(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #bb2b2b'});
		return false;
	});
	
	jQuery('#drop-files').bind('drop', function() {
		jQuery(this).css({'box-shadow' : 'none', 'border' : '4px dashed rgba(0,0,0,0.2)'});
		return false;
	});
	
	// For the file list
	jQuery('#extra-files .number').toggle(function() {
		jQuery('#file-list').show();
	}, function() {
		jQuery('#file-list').hide();
	});
	
	jQuery('#dropped-files #upload-button .delete').click(restartFiles);
	
	// Append the localstorage the the uploaded files section
	/*if(window.localStorage.length > 0) {
		jQuery('#uploaded-files').show();
		for (var t = 0; t < window.localStorage.length; t++) {
			var key = window.localStorage.key(t);
			var value = window.localStorage[key];
			// Append the list items
			if(value != undefined || value != '') {
				jQuery('#uploaded-files').append(value);
			}
		}
	} else {
		jQuery('#uploaded-files').hide();
	}*/
});

wp_fileuploads.php

<?php

// We're putting all our files in a directory called images.
$uploaddir = 'images/';

// The posted data, for reference
$file = $_POST['value'];
$name = $_POST['name'];

// Get the mime
$getMime = explode('.', $name);
$mime = end($getMime);

// Separate out the data
$data = explode(',', $file);

// Encode it correctly
$encodedData = str_replace(' ','+',$data[1]);
$decodedData = base64_decode($encodedData);

// You can use the name given, or create a random name.
// We will create a random name!

$randomName = substr_replace(sha1(microtime(true)), '', 12).'.'.$mime;


if(file_put_contents($uploaddir.$randomName, $decodedData)) {
	echo $randomName.":uploaded successfully";
}
else {
	// Show an error message should something go wrong.
	echo "Something went wrong. Check that the file isn't corrupted";
}


?>

CSSの設定

#drop-files {
	width: 100px;
	height: 55px;
	background: rgba(0,0,0,0.1);
	border-radius: 10px;
	border: 4px dashed rgba(0,0,0,0.2);
	padding: 75px 0 0 0;
	text-align: center;
	font-size: 2em;
	float: left;
	font-weight: bold;
	margin: 0 20px 20px 0;
}

#dropped-files {
	float: left;
	position: relative;
	width: 560px;
	height: 125px;
}

#upload-button {
	position: absolute;
	top: 87px;
	z-index: 9999;
	width: 210px;
	display: none;
}

#dropped-files .image {
	height: 100px;
	width: 200px;
	border: 4px solid #fff;
	position: absolute;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

#upload-button .ss-upload {
	font-size: 0.7em;
}

#upload-button a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	box-shadow: 0 0 1000px 62px rgba(255, 255, 255, 1), inset 0 -35px 40px -10px #0A9FCA;
	font-size: 20px;
	padding: 10px 20px;
	background-color: #4bc1e3;
	border-radius: 10px;
}

#upload-button span {
	display: block;
	width: 160px;
	text-align: center;
	margin: 20px 0 0 0;
	background: white;
	border-radius: 10px;
	font-size: 1.1em;
	padding: 4px 0;
	position: relative;
	left: -14px;
}
#upload-button a:hover {
	box-shadow: 0 0 1000px 62px rgba(255, 255, 255, 1), inset 0 -5px 40px 0px #0A9FCA;	
}

#extra-files {
	display: none;
	float: left;
	position: relative;
}

#extra-files .number {
	background: rgba(0,0,0,0.6);
	border-radius: 4px;
	display: inline-block;
	position: relative;
	font-weight: bold;
	color: #fff;
	padding: 20px 30px;
	margin: 60px 0 0 0;
	cursor: pointer;
	font-size: 30px;
}

#dropped-files #upload-button .delete {
	padding: 7px 6px 4px 6px;
	border-radius: 100px;
	background: rgba(0,0,0,0.6);
	box-shadow: none;
	font-size: 1em;
	margin-left: 8px;
}

#dropped-files #upload-button .delete:hover {
	background: rgba(0,0,0,0.8);
}


#extra-files .number:after {
	position: absolute;
	content: " ";
	top: 18px;
	left: -40px;
	display: block;
	border: 20px solid;
	border-color: transparent rgba(0, 0, 0, 0.6) transparent transparent;
}

#extra-files #file-list {
	display: none;
	background: white;
	padding: 20px 0;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	width: 250px;
	top: 100px;
	border: 1px solid #dadada;
	left: -10px;
	left: -16px;
	max-height: 220px;
	top: 150px;
	position: absolute;
	color: #545454;
}

#file-list ul {
	overflow: scroll;
	padding: 0;
	border-top: 1px solid #dadada;
	max-height: 200px;
	width: 250px;
	list-style: none;
	border-bottom: 1px solid #dadada !important;
}


#file-list ul li:last-of-type {
	border-bottom: 0 !important;
}

#uploaded-holder {
	width: 700px;
	height: 250px;
	display: none;
	float: left;
}

#extra-files #file-list:after, #extra-files #file-list:before {
	position: absolute;
	content: " ";
	top: -40px;
	left: 40px;
	display: block;
	border: 20px solid;
	border-color: transparent transparent #ffffff transparent;
}

#extra-files #file-list:before {
	border-color: transparent transparent #dadada transparent;
	top: -41px;
}

#extra-files #file-list li {
	border-bottom: 1px solid #eee;
	font-weight: bold;
	font-size: 1.5em;
	padding: 10px;
}

#loading {
	display: none;
	float: left;
	width: 100%;
	position: relative;
}

#loading-bar {
	width: 404px;
	height: 40px;
	background: #fff;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 2px;
}

.loading-color {
	width: 0%;
	height: 100%;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	border-radius: inherit;
	background-color: #4edbf1;
}

#loading-content {
	position: absolute;
	top: 15px;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	width: 405px;
}

#file-name-holder {
	width: 100%;
	float: left;
}

#file-name-holder h1 {
	text-align: center;
	border-bottom: 1px solid #dadada;
	padding: 20px 0;
	font-size: 3em;
	margin: 0;
}

#uploaded-files {
	background: white;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	width: 407px;
	top: 100px;
	padding: 0;
	border: 1px solid #dadada;
	max-height: 320px;
	overflow: scroll;
	color: #545454;
}

#uploaded-files li {
	padding: 10px;
	border-bottom: 1px solid #eee;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 25px;
	color: #545454;
}

#uploaded-files a {
	color: #1bacbf;
}

できてしまった。
いや、できてしまったという表現もどうかとおもうけど。

画像を管理画面の特定の場所にドラッグアンドドロップすると画像を特定の場所にアップロードを行う。
アップロードされた画像の情報をリスト化し管理画面に表示する。

うひょー＠＠　（ﾃﾝｼｮﾝ上

自分で本来ならWPのデフォルトのアップローダーを使うのが一番好ましいのだけど
現状のWPにはそれらの関数はない？みたいなのでほかのアップローダーを組み合わせて行いました。
いくつかの試行錯誤はあったけども大分シンプルでいかした感じにできてるかとはおもいます（自画自賛）

基本的にローカルPCにある画像をそのままサーバ上にアップロードするだけですので画像のリサイズなどの動作は行っていません。
ワタシの考え的には
・PCで画像加工
・その後まとめてUP
・表示！
という代物を想定しています。

画像の添付はできるようになったので序列の変更をどのようにやっていくか！

最終的にはプラグイン化を行う。
そうすれば毎回テンプレートを触らなくてもいいようになる！
やーるーぞー。