ブラウザ | zip358.com - パート 2

javascriptのアロー関数ってアレだな。

2020.05.20

javascriptのアロー関数ってアレだな、無名関数の省略形だと思ったら良いです。アロー（arrow）＝矢って意味、まんまだよね。日本語に直訳すると矢関数って意味になるのかな・・・。矢関数って響きが良くないのでアロー関数って読んでいるだけだと思うのです。英語のわからない自分は矢関数で良いじゃないと思ったりするわけです。

例文：載せときます、、比較的新しいブラウザなら動作します。

	const test = (e)=>{
		var view = document.querySelector("#view1");
		view.innerHTML = e.target.value;
	};
	const input = document.querySelector("#t");
	input.addEventListener("input",test);

一応、デモサイトのリンクも載せときますので、動作確認してみてくださいな。
尚、今回は純正なjavascriptだけで記載しました。これから極力、純正で純粋なjavascrpitで書いていこうと思います、いまのWEBの流れはそうなんだって。そしてTypescriptとかが今後来るみたいに言われていますよね。

https://zip358.com/tool/demo15/

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2020年05月20 12:45日

タグ

１, addEventListener, arrow, const, document, gt, innerHTML, input, javascript, querySelector, quot, target, test, value, var, view, アレ, アロー, ブラウザ, まんま, 例文, 動作, 意味, 日本語, 無名, 直訳, 省略形, 矢, 自分, 英語, 関数,

ブラウザのプッシュ通知が簡単にできちゃうFirebase

2020.03.20

ブラウザのプッシュ通知が簡単にできちゃうFirebaseのでやり方を簡略的に記載します。

Firebaseにプロジェクトを作成する（グーグルのアカウントが必要）。
firebase cliというパッケージソフトをOSにダウンロードしそのソフトを任意のフォルダの中に移動させて起動させる。Node.jsはインストール済みとする（※手順）。
試しにホスティングしてみる。ホスティングはプロジェクトの左側の項目よりホスティングをクリックすると手順の説明通り行うと出来ます。
URLより確認し表示されているか確認する。
Cloud Messagingの設定よりFCM でウェブ認証情報を設定するからメッセージングオブジェクトを取得するまでをブラウザで操作し設定を行う。
ローカルに下記のURLよりファイルをダウンロードする。ダウンロードするファイルはfirebase-messaging-sw.js, firebase-logo.png.webp, index.html, main.cssになります。動かない場合は再設定が必要。
https://github.com/firebase/quickstart-js/tree/f76b14ca00cca48dbfca5c787c0a4ca73eb9857d/messaging
ダウンロードしたファイルはpublicか自分が決めたフォルダに入れる。
index.htmlソースの中に ‘<YOUR_PUBLIC_VAPID_KEY_HERE>’ と記載している部分があるので変更する。
firebase cli より『 firebase deploy』する。
ページを再読み込みして通知を許可する。
Cloud Messagingから送信してみる。
通知が届くことを確認する。
※今回はブラウザのプッシュ通知なのでアプリを追加する際はWEB（</>）を選んでください。

Introducing Firebase Cloud Messaging

ではでは?健闘を祈る?

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2020年03月20 09:28日

タグ

cli, Cloud, FCM, Firebase, firebase-logo, firebase-messaging-sw, index, JS, Messaging, node, OS, png, url, アカウント, インストール, ウェブ, オブジェクト, グーグル, クリック, ソフト, ダウンロード, パッケージ, ファイル, フォルダ, プッシュ, ブラウザ, プロジェクト, ホスティング, メッセージング, やり方, ローカル, 下記, 中, 任意, 作成, 取得, 左側, 必要, 情報, 手順, 操作, 確認, 移動, 簡単, 簡略, 表示, 記載, 設定, 認証, 説明, 起動, 通知, 項目,

楽天RMSの禁止タグ制限を突破サービス!?

2019.09.07

楽天RMSの禁止タグ制限を突破サービスを自前してみました。
完璧ではないけど需要はあると思いますのでリリース、
ちなみにこちらのソースコードは非公開とさせて頂きます。
※会社でも似たような機能開発していますから…。
自分の頭の中にソースコードの設計工場があります(^^)。
リンクはこちらからお使いください。
https://zip358.com/tool/rakuten-RMS-tag/
広告でご飯食べてます。
ちなみにモバイル対応は意識していません。
PCブラウザより操作を行ってください。
※最新のChromeブラウザ推奨しております。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2019年09月07 03:43日

タグ

358, Chrome, com, https, nbsp, PC, rakuten-RMS-tag, RMS, tool, www, zip, お使い, コード, こちら, ご飯, サービス, ソース, タグ, ブラウザ, モバイル, リリース, リンク, 中, 会社, 公開, 制限, 完璧, 対応, 工場, 広告, 意識, 推奨, 操作, 最新, 楽天, 機能, 禁止, 突破, 自分, 自前, 設計, 開発, 需要, 頭,

画像をタイル状に分離して一括ダウンロードさせるジェネレーター

2019.09.07

画像をタイル状に分離して一括ダウンロードさせるジェネレーターを
作ってみました。画像は自動的に削除されます？
あることをすれば他人の画像がアップした画像も削除されます。
ちなみに一括ダウンロードbuttonを押すと画像がサーバー上に保存され
強制ダウンロードが始まります。
動作はブラウザChromeオンリーです。
また一括ダウンロードを押すと複数のファイルを一括ダウンロードするか
どうかの問い合わせが表示されますので「はい」を
選択してください。尚、30秒以内に保存されていないファイルは
次々と削除されます。
サイトはこちらから
https://zip358.com/tool/demo5/index-14.html
ソースコードは下記になります。
ページ（base64生成＋画像ダウンロード処理）

追記：zipファイルにより格納するように処理を変更しました。
参考にしたサイト：https://ex1.m-yabe.com/archives/4215

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>画像分離してダウンロード：画像分離ジェネレーター</title>
        <meta name="description" content="画像分離してダウンロード：画像分離ジェネレーター">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../jquery/jquery-3.4.1.js"></script>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-71682075-1"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-71682075-1');
        </script>        
        <style>
            body{
                background-color: black;
                color: antiquewhite;
            }
            img{
                margin:10!important;
                padding:10!important;
            }       
            #container{
                width: 100%;
            }
            #container img{
                margin:10px;   
            }       
        </style>    
    </head>
    <body>
        <span id="bat"></span><a id="dl"></a>
        <input class="form-control" type="file"></input>
        <div id="container"></div>
        <script>
            $(function(){
                $("[type=file]").on("change",function(){
                    $('#container').html("");
                    $("#bat").html("");
                    console.log($(this));
                    if(!$(this).prop('files')[0].type.match(/[png|jpg|jpge|gif]/)){
                        alert("ファイル形式エラー");
                        return false;
                    }                        
                    var canvas = document.createElement('canvas');
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var image = new Image();
                        image.onload = function() {
                            sprite = {width:50,height:50};
                            canvas.width = sprite.width;
                            canvas.height = sprite.height;
                            var ctx = canvas.getContext("2d");                            
                            var x = 0;
                            for(var i=0; i*sprite.height<image.height; i++){
                                for(var j=0; j*sprite.width<image.width; j++){
                                    ctx.drawImage(
                                    image,j*sprite.width,i*sprite.height,
                                    sprite.width,sprite.height,
                                    0,0,
                                    sprite.width,sprite.height
                                    );

                                    var spriteElement = new Image;
                                    spriteElement.src= canvas.toDataURL();
                                    $('#container').append(spriteElement);
                                }
                            }
                            $("#bat").html("<input type='button' value='一括ダウンロード' onclick='bat_img()'>");
                        }
                        image.src = event.target.result;                       
                    }
                    reader.readAsDataURL($(this).prop('files')[0]);
                    
                });
            });

            function bat_img(){
                var data = [];
                for(var i=0; i< $("img").length;i++){
                    data.push({"base64":$("img").eq(i).attr("src"),"no":i});
                }
                $.ajax({
                    type: 'POST',
                    url: 'bat_img.php',
                    data:{"obj":data},
                    dataType: 'json'
                }).done(function(obj){

                    if(obj[obj.length - 1 ].chk=="ok"){

                        var link = document.getElementById("dl");
                        link.href = obj[obj.length - 1].zippath;
                        link.download = "zipimg.zip";
                        link.click();

                        var data2 = [];
                        for(var i = 0 ; i < obj.length ; i++){
                            if(i==0){
                                data2.push({Path:obj.path,no:obj.no,t:obj.t,"zipimgpath":obj[obj.length - 1].zippath});
                            }else{
                                data2.push({Path:obj.path,no:obj.no,t:obj.t});
                            }
                            
                        }

                       var del = function(){
                            $.ajax({
                                type: 'POST',
                                url: './bat_del.php',
                                data:{"obj":data2},
                                dataType: 'json'
                            });
                        };
                        del();
                    }
                    });
                }
        </script>
    </body>
</html>

<?php
$i=0;
foreach($_POST["obj"] as $key=>$val){
    $b64 = base64_decode(str_replace("data:image/png;base64,","",$val["base64"]));
    $no = (int)$val["no"];
    $t = time();
    $Path = "./bat_img/tmp/$t-$no.png.webp";
    $re = @file_put_contents($Path,$b64);
    if($re){
        $obj[$i]["chk"] = $re?"ok":"ng";
        $obj[$i]["name"] = "$t-$no.png.webp";
        $obj[$i]["path"] = $Path;
        $obj[$i]["no"] = $no;
        $obj[$i]["t"] = $t;
        $i++;
    }
}
$obj[--$i]["zippath"] = zipfile($obj);

print json_encode($obj);


function zipfile($obj){
    $ZipFiles = function($obj){
        foreach($obj as $key=>$val){
           $path[] = $val["path"];
        }
        return $path;
    };
    $Zip_Files = $ZipFiles($obj);
    $zipFileName = time().'_zipimg.zip';

    set_time_limit(0);
    $zip = new ZipArchive();
    $zipTmpDir = './tmp/zip/';
    $result = $zip->open($zipTmpDir.$zipFileName, ZIPARCHIVE::CREATE | ZIPARCHIVE::OVERWRITE);
    if( $result !== true ){ //エラー処理
      echo 'error!';
      exit();
    }
    foreach ($Zip_Files as $key=>$filepath) {
      $filename=basename($filepath);
    // ZIP圧縮するファイルを追加
    // ファイルパス・ファイル名としないと圧縮ファイルを解凍するとフルパスになる
      $zip->addFile($filepath,$filename); 
    }
    //ZIP 出力
    $zip->close();

    return $zipTmpDir.$zipFileName;
}

<?php

unlink($_POST["obj"][0]["zipimgpath"]);
foreach($_POST["obj"] as $key=>$val){
    $Path = $val["Path"];
    $no = (int)$val["no"];
    $t = (int)$val["t"];
    
    $cmd = function(){
        foreach(glob("./bat_img/tmp/*") as $file_name){
            $command = "rm -rf " . realpath($file_name);
            exec($command);
        }    
    };
    
    if(pathinfo($Path)["extension"]=="png" and preg_match("/bat_img\/tmp/",$Path)){
        if(is_file($Path)){
            sleep(30);
            unlink($Path);
        }else{
            $cmd();
        }
    }else{
        $cmd();
    }

}

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2019年09月07 12:00日

タグ

１, 14, 30, 358, 4, 5, 64, archives, base, button, Chrome, com, demo, ex, html, https, index, m-yabe, tool, www, zip, アップ, オンリー, コード, こちら, こと, サーバー, サイト, ジェネレーター, ソース, タイル, ダウンロード, はい, ファイル, ブラウザ, ページ, 一括, 下記, 他人, 保存, 処理, 分離, 削除, 動作, 参考, 問い合わせ, 変更, 強制, 格納, 生成, 画像, 表示, 複数, 追記, 選択,

xdebugの動作仕方が分からなかったのでメモ。

2019.06.29

Xdebugを動作させます。（F5）
次にブラウザを開き動作させたいURLを記入しエンター:D

すると…

debug出来るようになります、設定等は割愛します。
ちなみにphp.iniの方はこんな感じにしてます。

zend_extension ="/xxx/xdebug.so"
xdebug.remote_autostart=1
xdebug.remote_enable=1
xdebug.remote_port=9000
xdebug.remote_connect_back = 1
xdebug.remote_host=IP Address

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2019年06月29 05:52日

タグ

１, 5, 9000, Address, autostart, back, connect, debug, enable, extension, host, ini, IP, php, port, remote, so, url, xdebug, xxx, zend, エンター, ブラウザ, メモ, 仕方, 割愛, 動作, 感じ, 方, 記入, 設定,

ANA積立で決済する方法とiPhoneでウォレット追加する方法。

2019.04.09

ANA積立航空券で決済する方法ですが、
まずWEBで予約まで行います、次に下記のサイトに
書かれているANA旅行積立プラン専用デスクに電話します。
その後、WEBへログインし支払い期限が延長されている
事を確認します。
サイトにANA航空券（旅行券）を送る住所が記載されているので
封筒にそれらを明記しANA旅行積立プラン専用デスク行と記入した
うえで、郵便局で簡易書留＋追跡サービスで送りましょう。
※送付するときは必ず送付書を入れて送りましょう。
尚、往復の場合、余白に搭乗日時などを明記し上記の内容に
合算することを明記しましょう。
http://www.anas.co.jp/tsumitate/anaticket/use_ticket/dom_desk/index.html
iPhoneでウォレット追加する方法
下記のサイトから手順通り行うとうまく行くはずなのですが、
純正ブラウザ以外の場合、インストールできない場合があります。
なので必ずSafariを使用してウォレット追加しましょう。
https://www.ana.co.jp/ja/jp/serviceinfo/share/passbook/

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2019年04月09 07:11日

タグ

ANA, anas, anaticket, co, desk, dom, htmliPhone, http, index, iPhone, jp, Safa, ticket, tsumitate, use, web, www, インストール, うえ, ウォレット, こと, サービス, サイト, それら, デスク, とき, パス, ブラウザ, プラン, ログイン, 上記, 下記, 予約, 事, 住所, 余白, 内容, 合算, 場合, 封筒, 専用, 延長, 往復, 後, 手順, 搭乗, 方法, 旅行, 旅行券, 日時, 明記, 期限, 決済, 確認, 積立, 簡易書留, 純正, 航空券, 行, 記入, 記載, 追加, 追跡, 送付, 郵便局, 電話,

年賀状CSVを作りました。SJISで保存してください。

2018.12.30

https://zip358.com/tool/nenga/
ブラウザ上で完結しています。
禁則処理などはありません、ただ純粋に入力したものが
CSV形式の文字列で出力されます。
これ何のために使えるかといえば
https://nenga.yu-bin.jp/
こちらのサイトで住所録を登録する際に使用できます。
タイトルにも描きましたがSJISの文字コードで出力をお願い致します、
また、データベースに保持などはしていないため
リロードしてしまうと全てのデータが消えてしまいます。
これを作った経緯。
自分が郵便年賀.jpで登録するのが面倒だったため作りました。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2018年12月30 09:23日

タグ

358, com, CSV, jp, nenga, SJIS, tool, yu-bin, zip, お願い, コード, こちら, これ, サイト, タイトル, ため, データ, データベース, ブラウザ, もの, リロード, 住所, 何, 使用, 保存, 保持, 入力, 全て, 処理, 出力, 完結, 年賀, 年賀状, 形式, 文字, 文字列, 登録, 禁則, 純粋, 経緯, 自分, 郵便, 際, 面倒,

ドロップシッピングCSV流し込み開設に向けて。WEB知識のある業界の方オススメします！

2018.07.06

ドロップシッピングCSV流し込みの過程。
ドロップシッピングからCSVをダウンロード、
その後、ヘッダー部分の削除を行い、CSVを10000行単位で
分割する。リナックスのコマンドで行いましたが
PowerShellやフリーソフトでも分離は可能です。
次にDBへ登録を行うプログラミングをPHP言語で記述し
コマンドラインからPHPファイルを叩く。コマンドラインで叩くほうが
処理が早いのでこちらを選びましたが、ブラウザから送信ボタンを押したときに
非同期処理（ajax）を走らせて行う方法もあります。
自分が登録したドロップシッピングのCSV容量は
850MBでした、まぁまぁ多いファイルです、これを一行単位で取り込んで
行くのですが、、、、かなり時間がかかります。
取り込み終わるのに数時間かかりました。
最初、一括CSVで取り込めないかなと思っていろいろ試しましたが515円のサーバでは
無理でしたので、10000処理を行ったら一度、PHPを終了させ
再度、開き次のファイルをパラメーター付きで実行させるシェルスクリプトを
作りました。そちらを叩いて後は終了するまで待つという方法です。
登録したDBから商品の一覧や詳細画面、カテゴリー一覧、
トップページを作らないといけないという作業が残っています。
こちら会社でも使っているSmartyで当初思ったのですが
やめてPHPテンプレートエンジン「Twig」を使用して作ることに決めました。
ここまで来て思ったのは会社での事がかなり役に立つという事です。
ノウハウがあるのとないのとはぜんぜん違うなと思います。
ドロップシッピングが軌道に乗るのかはわかりませんが、
サイトを作るというのは楽しいですね。
ちなみにドロップシッピングのURLは非公開とさせていただきます。
https://youtu.be/rrvL2-jqZ-4

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2018年07月06 12:28日

タグ

CSV容量, PHPテンプレートエンジン, powershell, Smarty, Twig, コマンドライン, サーバ, シェルスクリプト, ドロップシッピングCSV流し込み, ドロップシッピングCSV流し込み開設, パラメーター付き, ブラウザ, フリーソフト, プログラミング, ヘッダー部分, リナックス, 一括CSV, 一行単位,

また、Composerをインストールしてみたよ。

2017.10.06

一昔前のファミコンゲームみたいな、コンポーザー（Composer）を
インストールしてみた。これ必要なんだ。
ネットでゴロゴロとインストール仕方が転がっているけれども
その方法は使わないで、こういう方法でインストールしてみた。

https://getcomposer.org/installer

上記のURLをLinux系ならwgetとかでダウンロードする。
WindowsならそのままブラウザでURL叩けばファイルが落ちてきます。
そのファイルを任意の場所にアップロードし、下記のコマンドを叩けば
インストールが可能かと思います。ちなみにXサーバとかなら
PHPバージョンとかを気にしないといけませんので、
そこら辺はググってください。

php composer installer

これだけでインストールが始まります。
インストール後、composer.pharとかいうファイルが出来上がっています

composer -v

ので、コンポーザーと呪文詠唱すると
上記のような画面が現れるという・・・。
あとは煮るなり焼くなりしてあげてください。
ちなみにネットでゴロゴロ出回っているインストール方法は
こちらです。パイプ使ってやってんだね。

curl -sS https://getcomposer.org/installer | php

ちなみに普通のレンタルサーバにはwgetとか入っていないので
curlコマンドでインストールしてあげてください。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2017年10月06 04:20日

タグ

AM, composer.phar, curlコマンド, Linuxコマンドポケットリファレンス, php composer installer, php installer, wget, インストール, インストール仕方, インストール方法, コンポーザー, そこら辺, ネット, パイプ, ファイル, ファミコンゲーム, ブラウザ, レンタルサーバ, 上記, 改訂,

やっぱりChromeなんだなぁ・・・いまのブラウザ1位は。

2017.07.28

いまのブラウザの覇王はGoogle Chromeなんだなぁと
ネットの可視化しているサイトを観ていると思う、次にシェアが高いのは
Safariだけど、圧倒的にGoogle Chrome強しですね。
いっその事、みんな同じブラウザを使って欲しい、もしくは
同じふるまいが出来るようにして欲しいですね、ブラウザエンジニアは
同じもので、ブラウザの操作機能は各社違うようにするとか・・・。
特にIEは何だかんだ言って問題児です、特に古いバージョンになると
IEだけ独特の振る舞いしてくれます、IEだけ見栄えが違ったり
動作しなかったりと、フロントエンドエンジニア泣かせかなと感じます。
このグラフ見ていると、まだまだデスクトップは健在なんだということも分かります。
モバイルファーストとか言われているけれど、まだまだデスクトップも頑張っていらっしゃる。
ちなみにグーグルを制するものがウェブを制すると言われていますが、
この頃は、アプリを制するものがウェブを制するとも言われてきています。
要するにアプリ完結の時代が来ていたりします。
専門的な情報を得るには、検索サイトを使わず、アプリを使用して
情報を得るという流れになってきているのだとか。
https://www.youtube.com/watch?v=LUDmC8LrnPk

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2017年07月28 05:00日

タグ

Google Chrome, IE, アプリ, アプリ完結, インタフェースデザイン, ウェブ, グーグル, デスクトップ, ブラウザ, ブラウザエンジニア, ふるまい, フロントエンドエンジニア泣かせ, モバイルファースト, 古いバージョン, 問題児, 振る舞い, 覇王, 見栄え,

Yahooゲームプラス、ブラウザでゲームが出来ちゃう。

2017.07.19

Yahooゲームプラス、ブラウザでゲームが出来ちゃう。
やってみたい人はこちらをクリック！！
https://games.yahoo-net.jp/
原理はどのようになっているかと言えば、ブラウザのキーを取得し
クラウド上の仮想マシン（PS4）を起動して処理を行う、行なった映像を
ブラウザに送信するという仕組みらしいですね。
仕組みはだいだい上記の方法だと思うのですが
実際、どうすれば出来るのかという技術的な仕様は知りません。
こういう技術的な要素を知ることができれば、じぶんの技術も飛躍的に
伸びることは間違いないと感じます。
ちなみに自分はPS4があるので、PS4で十分かなとか思っています。
外でゲームとかすることもまず無いですし、家でもPS4の上には
本が何冊か積んである始末ですから・・・ほぼゲームはしないです。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2017年07月19 05:21日

タグ

PS4, Yahooゲームプラス, キー, クラウド上, クリック, じぶん, だいだい上記, ブラウザ, 仕様, 仕組み, 仮想マシン, 何冊, 処理, 原理, 実際, 技術, 方法, 映像, 要素,

文字化けがモヤモヤした件：Unicodeめ！！とか機種依存文字とかの話。

2017.07.14

文字化けがモヤモヤした件：Unicodeめ！！とか機種依存文字とかの話。
会社でこちらの件でモヤモヤして最終的に解決できたのだけどなんだか腑に落ちないので自宅に帰って文字化けの検証をしてみました。勤めている会社はサイトコピー防止の為なのか、未だにEUC-JPコードで動いています（楽天とかもEUCだったりする🙄）。なので、会社のWEBシステムのファイルはEUCなのです。ブラウザ側がEUCだけどAjaxで送受信しているから強制的にUTF8で送られる？ので、PHP側で正しい文字コードで変換しないと文字化けするですね🤔。👈此処らへんサーバーサイドも絡んできます。
レスポンスされた文字コードも表面上は難なく表示されます。その戻ってきた文字をコピペしてWindowsのテキストファイルなどにペースト（貼り付ける）すると文字化けを起こす文字があります。
酷いときは文字が消える文字化け表示されるという問題がおきるのです。

その時、はてなって思った訳です🙄

何故・・・起きるのかPHPでエンコードするときの問題に変換にミスっていると思っていたが、そうではなかった。
WindowsエディタがSJISだったのです。要するにブラウザの文字コードとWINDOWSエディタの文字コードに違いがあった為、ある一部の文字コードで文字化けを起こしていました。

ブラウザ側がUTF8やEUC文字コードをエクセルファイルに貼り付けたら、一部の文字コードがバグったりします・・・。これは文字コードを扱うバイト領域等が違って起きる現象です。

追記2022/10/03：記事の文言を修正しました。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2017年07月14 02:20日

タグ

8, ajax, EUC, euc-jp, php, Unicode, UTF-, web, Windows, コード, こちら, コピー, コピペ, サーバー, サイト, システム, テキスト, とき, ファイル, ブラウザ, ペースト, べん, レスポンス, 件, 会社, 依存, 側, 問題, 変換, 文字, 文字化け, 検証, 楽天, 機種, 此処ら, 為, 腑, 自宅, 表示, 表面, 解決, 話, 送受信, 防止,

通称オレオレ認証の警告でハマる解決策。

2017.03.11

https://jp.globalsign.com/　『SSL導入のことなら↑』
会社で必要になりオレオレ認証SSLを導入！！
通称オレオレ認証の警告でハマる解決策です。ググると簡単にコピペでローカルSSLの環境を作れると
思っていのですが、少しだけ甘かった。巷でググるとオレオレ認証のことが山のように出てくるのだけど、その記述では警告が出てしまいます。なぜ、警告が出てしまうか。
それはsha-1にしか、対応していないからです。なので警告表示が出ます。いまは各ブラウザ、sha-2=>sha256にしか対応していないオレオレ認証出来ません。
ということで?
下記の記述で大体のローカルサーバでSSL認証が可能になります。

openssl genrsa 2048 > oreore-server.key
openssl req -new -sha256 -key oreore-server.key > oreore-server.csr
Common Name (eg, YOUR name) []: oreore.com ←ここだけ合わせる。あとの入力欄はエンターでOK
openssl x509 -in -sha256 oreore-server.csr -days 777777 -req -signkey oreore-server.key > oreore-server.crt
cp oreore-server.crt /var/www
cp oreore-server.key /var/www
/etc/httpd/conf/httpd.conf
下記の記述などを追加。
<VirtualHost *:443>
    SSLEngine on
    SSLCertificateFile /var/www/oreore-server.crt
    SSLCertificateKeyFile /var/www/oreore-server.key
</VirtualHost>
systemctl restart httpd Apache再起動
一旦ブラウザを閉じオレオレ認証がうまく行ったか
確認を行う。
なお、ファイアウォールで見えない場合は443ポートを
開放するように！！

systemctl restart httpd Apache再起動
一旦ブラウザを閉じオレオレ認証がうまく行ったか確認を行う。
なお、ファイアウォールで見えない場合は443ポートを開放するように！！

※尚、出来上がったcrtファイルを個人分のパソコンにダウンロードして設定するように！！
設定方法はこちら
https://scratchpad.jp/ssl-self-certification/
追記：Chrome58以降、上記の方法ではうまく行かなくなりました。
https://qiita.com/ll_kuma_ll/items/13c962a6a74874af39c6

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2017年03月11 02:27日

タグ

１, 2, 2048, 256, com, csr, genrsa, globalsign, gt, https, jp, key, new, openssl, oreore-server, req, sha, SSL, いま, オレオレ, こと, コピペ, サーバ, それ, ブラウザ, ローカル, 下記, 会社, 可能, 大体, 対応, 導入, 少し, 山, 巷, 必要, 環境, 簡単, 表示, 解決策, 記述, 認証, 警告, 通称,

ファイナルファンタジー14のキャラをうっぷしてみる。

2015.10.31

http://jp.finalfantasyxiv.com/lodestone/character/6101539/
ファイナルファンタジー14のキャラをうっぷしてみる。｛2回目｝
購入してから一年ぐらいは経過しているのですが未だにレベルが16しかない
のです・・・。殆どゲームをしていない状態が続いています。
その理由の一つは共同でゲームする仲間がリアルにもいないので
ひとりプレイしていても何だか長続きしないのですね。
FF14の良い所はひとりでも何とか出来るところなんですが
逆にこの頃、ひとりでプレイしていてもあまり楽しさを感じられない
ので・・・。
ここで告知します。殆どオフラインなので
自分とプレイしてみたい奇特な方はTwitterのダイレクトに
お声がけでもしていただけると有難いです。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2015年10月31 02:29日

タグ

2回目, FF14, iframe, Twitter, お声がけ, キャラ, ところ, トコロ, ひとり, ファイナルファンタジー1, ファイナルファンタジー14, ブラウザ, 一つ, 一年, 仲間, 共同, 昨日, 殆どオフライン, 殆どゲーム, 状態, 理由, 良い所, 部分,

wordpressのhttps化は基本的に不可能だという事。｛現時点では｝改め｛対応｝

2015.08.02

wordpressのhttps化は基本的に不可能だという事がわかった。httpsに変更することはできるができるのは、トップページのみ、それ以外はwordpressの仕様なのかwp_head部分がhttpを指すことがわかったので恐らく現時点ではhttps化は無理だという事が判明。もし、どうしてもhttps化したい場合は他のCMSを使用することをお勧めします。基本的にNET業界はhttpsを推進しているので、そう遠くない時期にWordpressもhttps化を行うだろうと思っています。
※SSL化を試みる方法をぐぐると記載していますが恐らく難しいのではないだろうかと思います。今回、SSL化にあたりDBを一括置換して置き換えてみてたりしたのですが、全然、うまく行きませんでした。おそらくwp_head関連のファイルを変更すれば可能だと思いますが、そこまでしてまでSSL化するほど・・体力がありませんので自分は辞退します。
今回、さくらサーバが提携したラビットSSLを使用してSSL化を試みたわけですが、若干、損をした気分はありますがDLファイル時にSSLのURLでダウンロード出来るようになったので、そこだけは、よかったです。

※ちなみに初期の状態でSSLを使っていたら、おそらく問題なく使用できると思います。

header.phpに書かれているwp_head()が実行されたタイミングでブラグインのjs・cssパスが出力されるので、その内容を書き換えてしまいます。
下記の方法で対応可能になります。

   // HTTPS通信時、プラグインがcss・jsパスをhttp://?で出力するのを対策する。
   ob_start();
   wp_head();
   $wp_head_contents = ob_get_clean();
   $wp_head_contents = str_replace('http://', '//',$wp_head_contents);
   echo($wp_head_contents);

上のソースコードは、wp_head()が吐き出す内容をob_start関数で出力バッファリングします。バッファリングした内容を変数に格納して、変数内の文字列にhttp://?で始まるパスがあれば、//?に置換した上でブラウザに出力しています。
こうすることで、http・httpsのどちらにも対応できるようになります。
引用：http://coneta.jp/11936.html

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2015年08月02 08:54日

タグ

$wp_head_contents, CMS, css・jsパス, DLファイル時, header.php, head部分, https化, js・cssパス, NET業界, ob_start関数, SSL化, str_replace, WordPress, wp_head, wp_head部分, wp_head関連, wp_https化, さくらサーバ, ソースコード, トップページ, ブラウザ, プラグイン, ラビットSSL, 一括, 仕様, 体力, 内容, 初期, 判明, 変数, 損, 文字列, 時期, 現時点, 若干,

び?え?てぃ?バッチ処理、えぇもう披露困憊です(´Д｀)。

2015.01.21

バッチ処理ってモノは自分苦手です。生まれてこの方、バッチなんてものを触る機会がなかったのえぇもう披露困憊ですって言うのは嘘ですが、はっきり言って使い分けがイマイチなんですね。この頃、バッチ処理で出来ることはバッチで投げてあるべきだと言う事を認識しました。その方が処理が早いですからね。昨日、バッチ処理のボットさんと一悶着あったので綴ります。ボットと言っている割にはボットサービスを使ったボットかよ！とツッコミどころがありましたが、質問しているとそれなりにバッチ処理を理解しているかなと思ったので深く質問しているうちに自分の書いたバッチ処理が間違いに気づきました。
家に帰ってバッチ処理を見てみると案の定、javascriptの関数名をバッチ処理に書いていたというオチです。まさに何やっているだという感じです。
こういうのあまり参考にならないかもしれませんが掲載しておきます。あるホームページをIEブラウザを開いてある処理を実行したあとブラウザで閉じるというバッチです、今回はある処理に関してのコードは記載しません。尚、ブラウザを開いてから処理が終わるまでの感覚を5秒とします。

start "C:Program FilesInternet Exploreriexplore.exe" "https://google.co.jp"
timeout /t 5
taskkill /f /im iexplore.exe
exit

※デフォルトでIEが開く状態になっていないとブラウザは閉じません(´Д｀)ので注意してください。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2015年01月21 07:32日

タグ

AM, exit, IEブラウザ, im iexplore.exe, javascript, Program FilesInternet Exploreriexplore.exe, t 5, taskkill, timeout, えぇもう披露, えぇもう披露困憊, ツッコミどころ, デフォルト, バッチ処理, ブラウザ, ホームページ, ボット, ボットサービス, 一悶着, 体, 使い分け, 関数名,

パスワードのチョメチョメ（***）が見えるソフト（Windows）はこれ(ﾉ´∀｀*)

2015.01.13

パスワードのチョメチョメ（***）が見えるソフト（Windows）はこれです。
PasswordEyeというソフトです、結構、役に立ちます。ちなみにブラウザ上の
パスワードはIE以外は対応してないだとか。あくまでもWindowsソフトのチョメチョメ（***）が
見えるソフトです。ちなみにFirefoxの場合はブラウザ上のパスワード部分が
覗ける拡張アプリが存在したことを覚えています。
余談ですが、よく巷でパスワードが流出したとか言う記事を見かけると思いますが
絶対にDB上からパスワード流出しない会社があります。その中の一つに
グーグル社がはいってるとか・・・・。
パスワードに暗号化をかけるのはどの会社も行っている
事だと思いますが、暗号化したものは基本的に復号化する事が可能だと
思います。そうではないモノのもありますが・・・。どうもグーグル社の場合は
グーグル社のサーバー上でしか復号化できないような仕様になっているらしく
社外にパスワード情報が流出しても復号化は不可能らしいのです。
ちなみに世界的に有名なポータルサイトを列挙しときます。
日本ではYahooのシェア率が高いみたいですが、世界的にはグーグルが
トップです。

追記
たまには日本以外のポータルサイトを覗いてみるのも結構たのしいですよ。
ちなみにこれが国別Yahooのポータルサイトのアドレスです。
https://everything.yahoo.com//world/

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2015年01月13 03:00日

タグ

db, Firefox, IE, PasswordEye, Windows, アプリ, グーグル, こと, これ, サーバー, ソフト, チョメチョメ, パスワード, ブラウザ, もの, 一つ, 上, 中, 事, 仕様, 以外, 会社, 余談, 可能, 場合, 存在, 対応, 巷, 役, 復号, 拡張, 暗号化, 流出, 社, 記事, 部分,