@Blog{zip358.com}

サジェストでautoComplete.jsを使用したときの話．

2024.08.19

Logging

おはようございます．サジェストでautoComplete.jsを使用したときの話を書いていきます．まずよさこい祭り動画検索の方でサジェストを導入しようと決めて調べていた所、autoComplete.jsが簡単に導入できて良いよと記載されていたので使用してみました．

使用して分かったことは、一度取り込んだサジェストデータを置き換えたい場合は下記のようにしないと駄目です．SELECT部分がチェンジしたらサジェストデータの再読込みを行えば良いのかなと思っていましたが、データが一向に書き換わらないので、もしやと思って公式サイトのドキュメントを読んでいたら何となくこれは置き換わらないことに気づきました．

autoCompleteJS.unInit();

尚、書き換えるためにautoCompleteJSはグローバル扱いにしました、本当はもっとスマートなやり方があるだろうけど、これが自分にとってはベストかなと思ったのでこのような形にしています．

明日へ続く．

タグ

autoComplete.js, autoCompleteJS, autoCompleteJS.unInit, SELECT部分, サジェスト, サジェストデータ, データ, ドキュメント, やり方, 一度, 下記, 公式サイト, 再読, 形, 所, 祭り動画検索, 自分, 話,

強者求む：nginxとnodejsの共存が出来なくて困っています。

2022.02.11

Logging

今日は建国記念日ですね😌、とりわけ愛国心もないので何もしませんが・・・。

さて今日は朝からVPSサーバーを解約作業をしていて、こちらのサーバーにnginxとnodejsの共存を行おう作業していますが、nginxとnodejsの共存が出来なくて困っています。やり方は必ずあると思いますが、ググる力が無いため保留中です。誰か教えて頂けますか？

もし宜しければTwitterのDMもしくはリプライで教えて頂けると幸いです。

一応、アクセス数はまぁまぁあるので教えてくれる人が訪れると信じて今日はその作業をお休みします。尚、こちらで解決した場合や教えて頂いたらこの記事に追加して記載します。

タグ

DM, nginx, nodejs, Twitter, VPS, アクセス, お休み, こちら, サーバー, ため, やり方, リプライ, 人, 今日, 何, 作業, 保留, 共存, 力, 場合, 建国, 強者, 愛国心, 朝, 解決, 解約, 記事, 記念, 記載, 誰, 追加,

お気づきかと思いますが、サーバーを密かに変えました。（密かではないですけど。）

2022.01.08

Logging

お気づきかと思いますが、サーバーを密かに変えました。変えたのは年末あたりです、それから裏と表でサーバーをゴニョゴニョして何とか運用している感じです。変えた理由は経費削減ということが一番の理由ですね😌。

変えたことにより表示速度が若干早くなっているかのように思えます、サクラレンタルサーバーでは土台はnginx + Apache2.4系だったらしいので「.htaccess」が使用できていたのだと思いますが、現在、運用しているサーバーは nginxで動いております。 nginx上でApacheをどうやって動かせばよいのか、知見がないのでnginxだけ動いております。調べればやり方が書かれているサイトがあると思います。

12月にlog4jという脆弱性が見つかった事により、ApacheやJAVAなどに影響を与えているようです、そんな事もあったので今回はApacheサーバーを避けてnginxで構築したわけです。IPを調べるとどこのサーバーを使用しているか分かると思いますが、敢えてどこのサーバーのどのプランを使用しているかの公表は控えさせてもらいます。

因みにサーバーが落ちてもメールサーバーは別サーバーを使用しているので影響はないようにしています。今回分かったことはクラウドと言われているサーバーは、クリック一つでいろいろ出来るようになっているけれども、それを使用すると別途お金が発生するように設計されていたりしてます。なので自分はそこらへんお金を使いたくないので手動で対応しています。

結局のところ、VPSでゴリゴリとサーバサイド知見がある人にはAWSやGCPというサービスはポチポチ押すだけで、サーバー構築できるけど、もったいないと思うだけなのかもしれません。AWSやGCPの良い所は可用性だなって思えます。そしてオンプレと違ってサーバーが落ちてもAWSやGCPの障害のせいに出来ることかもしれません。

強者になりたい今日このごろでした・・・現場からは以上です。

タグ

12, 2.4, 4, Apache, htaccess, java, log, nginx, こと, ゴニョゴニョ, サーバー, サイト, さくら, やり方, レンタル, 一, 上, 事, 今回, 使用, 削減, 土台, 年末, 影響, 感じ, 構築, 現在, 理由, 知見, 経費, 脆弱性, 若干, 表, 表示, 裏, 速度, 運用,

googleドライブ使ってる？

2020.12.01

Logging

googleドライブをパソコンにインストールするとgoogleドライブという領域が作らます。その領域を使用すれば他のパソコン間でファイルを共有することが可能です。それぞれPCでも同じパスにしてファイルを共有したい場合はシンボリックリンクを使用します。

やり方はこんな感じです。まずgoogleドライブ領域にフォルダを構えます、次に同じパスにしたい階層（googleドライブの階層ではなく）にシンボリックリンクでフォルダとリンクします。このことにより、シンボリックリンクの階層で作業したファイルなどは、おわかりの通りGoogleドライブに実際は作成されたことになるので、この方法で別のPCにもシンボリックリンクを使用して作成すれば、複数のPCでも同じファイル環境を整えることが可能です。

ちなみにシンボリックリンク作成は管理者権限でDosコマンドで下記のように打ってください。なお、MacとWindowsではコマンドは違います。Macの場合はターミナルになります。

シンボリックリンクとは何かはこちらを参照ください。?＊＊＊＊

mklink /D 階層とシンボリックリンク名 階層とgoogleドライブのフォルダ名

ln -s 階層とgoogleドライブのフォルダ名 階層とシンボリックリンク名

WindowsとMacではコマンド名も命名規則も違う感じです・・・ややこしい?なっと。

タグ

Dos, Google, Mac, PC, Windows, インストール, おわかり, こと, コマンド, シンボリック, それぞれ, ターミナル, ドライブ, パス, パソコン, ファイル, フォルダ, やり方, リンク, 下記, 他, 作成, 作業, 使用, 共有, 別, 可能, 場合, 実際, 感じ, 方法, 権限, 環境, 管理者, 複数, 通り, 階層, 領域,

ipadをさぶでぃすぷれいに変えるやつとか出来ないし。

2020.10.17

Logging

うちのMacはCatalinaには対応しているものの、サブディスプレイ表示には対応していない機種です。それぐらい古いMacなのです。この古いMacにもSidecarPatcherというパッチを当ててあげれば出来るらしいが怖くて出来ない。どうもMacの心臓部（コアファイル）を編集するらしくて、もし間違えてこれてしまったらヤダから自分入れないままにしときます。

因みにSidecarPatcherを簡単に入れるアプリ、free Sidecarという物も存在していますが、自分はいれません。

やり方を動画で解説しているひとがいますので、興味が在る方はご視聴くださいませ。

タグ

8, amp, Catalina, com, free, https, IDaXb, iPad, Mac, Sidecar, SidecarPatcher, tFw, watch, www, youtube, アプリ, うち, コア, サブ, それ, ディスプレイ, バッチ, ひと, ファイル, プレイ, まま, やつ, やり方, 動画, 存在, 対応, 心臓, 方, 機種, 物, 簡単, 編集, 自分, 興味, 表示, 視聴, 解説,

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

2020.03.20

Logging

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

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

ではでは?健闘を祈る?

タグ

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

TinyMCE 5.0でwindowManager.openUrl使用してコードの送受信。

2019.08.03

Logging

TinyMCE 5.0の記事が好評だったので前回に続き、windowManager.openUrl使用してコードの送受信の内容を記載します。あくまでもサンプルコードです。プログラムなので他にもやり方はあると思います。前回の記事に勘どころは記載していますので割愛します。尚、自分は英語がダメダメですが幸いコードを読む力はある程度あるので何とかなりました。サンプルコードを記載しますので解析してみてください。

PHP＆HTMLコード

<!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">
        <link rel="stylesheet" href="/tool/bootstrap/css/bootstrap.css">
        <script src="/tool/jquery/jquery-3.4.1.js"></script>
    </head>
    <body>
        <form method="post">
        <textarea name="htmlcode1" class="form-control">
<?php
    echo urldecode($_GET["sdata"]);
?>
        </textarea>
        <input type="button" name="submitbtn" value="htmlcode-submit"class="btn btn-primary">
        </form>
        <script>
            var chageJson = function(data) {
            console.log(data);
            var JsonData = [];
            for (i = 0; i < data.length; i++) {
                if(/htmlcode/.test(data[i].name)){
                    data[i].value = encodeURIComponent(data[i].value);
                }
                JsonData[data[i].name] = data[i].value
            }
            //console.log(JSON.stringify(data));
            return JsonData;
            }
            $("[name=submitbtn]").on("click",function(){
                data = chageJson($("form").serializeArray());
                window.parent.postMessage({ mceAction: 'customAction',data:data});
                window.parent.postMessage({ mceAction: 'close' });
            });
        </script>
    </body>
</html>

jsコード

(function() {
    tinymce.create('tinymce.plugins.btxt', {
        init : function( ed,  url) {
            //console.log(ed);
            act = function(e)
            {
                    //console.log("e=",encodeURIComponent(e.selection.editor.getContent()));
                ed.windowManager.openUrl(
                    {
                    type: 'panel',
                    title: 'HTMLCODE',
                    url:url + "/btxt.php?sdata=" + encodeURIComponent(e.selection.editor.getContent()) ,
                    onMessage:function(api, details){
                      console.log(e);
                      //console.log('htmlcode1',decodeURIComponent(details.data.htmlcode1));
//                      var editorInstance = tinymce.editors[0];
                      e.selection.editor.setContent(decodeURIComponent(details.data.htmlcode1));
                   }
                }
                );
            };
              ed.ui.registry.addButton('btxt',{
                title : 'htmlcode',
                text: 'htmlcode',
                onAction:function(){act(ed)}
            });
        },
    getInfo : function() {
        return {
            longname : 'tinymce.plugins.btxt',
            author : 'taoka',
            authorurl : 'https://zip358.com',
            infourl : 'https://zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('btxt', tinymce.plugins.btxt);
})();

タグ

--, 5.0, 7, 8, ９, class, DOCTYPE, endif, gt, html, IE, if, lt, lt-ie, no-js, openUrl, php, quot, TinyMCE, windowManager, コード, サンプル, ダメダメ, プログラム, やり方, 他, 使用, 内容, 前回, 割愛, 力, 勘どころ, 好評, 自分, 英語, 解析, 記事, 記載, 送受信,

datetimepicker-master：：でぃーたたいむぴっかーマスター！！日本語化

2017.10.14

Logging

datetimepicker-masterが日本語化できない。時刻だけ表示したい、カレンダーだけ表示したいなどに
実は対応しているのだけど、バージョンがアップしてからそのやり方が変わっていて
ググってもそのやり方が出てこないので、じぶんが記載してみました。
ソースを読まないと見えてこないものが有るですが、ぶっちゃけ他人のソースを読むのは面倒くさいでもプラグインは使用したい方。
下記のコードで日本語化可能です。
カレンダー非表示可能です。
時刻非表示可能です。
ちなみにソースを見るとdefault_options（でふぇるとおぷしょん）のオブジェクトで
その他、操作も可能ですのでソースを読みたい人は読んでみてください。
ちなみにちなみにdatetimepicker-masterプラグインはこちらからダウンロード可能です。
https://github.com/xdan/datetimepicker
サンプルプログラムはこちらです。
https://zip358.com/tool/datetimepicker

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>zip358.com:datetimepicker日本語</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
  <link rel="stylesheet" href="./datetimepicker-master/jquery.datetimepicker.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="./datetimepicker-master/build/jquery.datetimepicker.full.js"></script>
  <script>
      $(function(){
          $.datetimepicker.setLocale("ja");//にほんご
          $("#dtp").datetimepicker({
              format:"Y/m/d H:i",
              formatTime:"H"//時間だけ(分：非表示)
          });
          $("#dtp2").datetimepicker({
              format:"Y/m/d",
              timepicker:false//時刻非表示
          });
          $("#dtp3").datetimepicker({
              format:"H:i",
              datepicker:false//カレンダー非表示
          });
      });
  </script>
</head>
<body>
    <input id="dtp" type="text">
    <input id="dtp2" type="text">
    <input id="dtp3" type="text">
    <div id="ana">
    </div>
</body>
</html>

タグ

com, datetimepicker, datetimepicker-master, default, github, https, options, xdan, アップ, オブジェクト, カー, カレンダー, コード, こち, こちら, サンプル, じぶん, ソース, その他, タイム, ダウンロード, バージョン, ふぇると, プラグイン, プログラム, マスター, もの, やり方, 下記, 人, 他人, 使用, 可能, 対応, 操作, 方, 日本語化, 時刻, 表示, 記載,

感覚的に好き嫌いと思ってる

2015.09.23

Logging

思考のトラップ（脳があなたをダマす48のやり方）って本に書いている
事だけど、好き嫌いに理由はないってのは本当だった。
こうだから好きとかは、後付けで
本当は直感的に何となく好き、嫌いを判断して
いるだなと言うことは人って結構、単純だなと…。
この本は、パラパラ暇な時にめくると
面白いことが書いていてオススメです。
心理学って面白いです、こういう本以外にも
TSUTAYAとかで「人たらし」のブラック交渉術とか
いろいろなちょっとした心理学を書いている本が
流行っていたりして手にとって読んでみると
面白いです。
全員が同じようなことを考えているかといえば
そうではないですが、そういう傾向が多いことが
あるって知っておくことだけでも何かの役に立つかも
知れないですね。

タグ

TSUTAYA, あなた, いまいち, ダマす48, たらし, トラップ, ブラック交渉術, やり方, 何か, 傾向, 全員, 多いこと, 好き嫌い, 後付け, 心理学, 思考, 本, 本以外, 理由, 脳, 面白いこと,