@Blog{zip358.com}

エンジニアはクラウドなんたらで働くより稼げる方法。

2019年11月10日

Logging

フリーランスのエンジニアはクラウドなんたらで働くより稼げる方法は
エージェント（代理人）を通してお仕事をもらう方法が良い思います。

それなりに経験があるエンジニアさんは
この方法で働いたほうが稼げます、ちなみに関東、関西などで
働くということが大体、前提条件ですが、リモートワークの仕事もあります。

そのうち、リモートワーク案件も増えていくと思います。
東京で住んでいれば間違いなくフリーランスになっていたと思います。

【フリーランス エージェント】などで検索すればいろいろなサイトが
表示されます。【フリーランス エージェント 比較】などで
調べても良いかもしれません。

↑引用： https://web-director-lifehack.info/freelance-agent-refer/

タグ

いろいろ, うち, エージェント, エンジニア, お仕事, クラウド, こと, サイト, それなり, たら, フォロー, フリー, ランス, リモート, ワーク, 仕事, 代理人, 体制, 前提, 単価, 大体, 強み, 数, 方法, 最高, 条件, 東京, 案件, 検索, 比較, 現場, 経験, 職種, 表示, 関東, 関西,

眩（くらら）?北斎の娘?が良かったー！

2019年11月09日

Logging

眩（くらら）?北斎の娘?というドラマがNHKで放送されていたのですが
これ、かなり大好きな作品です。内容が良いです、ほんとに。

モノづくりをしている＝クリエイターがみると
共感できるところがあるじゃないかなとそんな内容が散りばめられています。

そんな 眩（くらら）?北斎の娘? がBlu-rayで発売されていました。
やっぱりなと、発売してほしいという人がいるだろうなと
自分が検索したときにはNHKオンデマンドで視聴も出来なかったのですが
いまでは視聴も出来るようになっています。

尚、葛飾北斎の娘役で宮崎あおいさんが出演しています。

NHKオンデマンド： https://www.nhk-ondemand.jp/goods/G2017081436SA000/

追記2021：眩（くらら）?北斎の娘?を購入しました。

タグ

000, 2017081436, 2021, Blu-ray, goods, https, jp, NHK, nhk-ondemand, SA, www, あおい, いま, オンデマンド, かなり, くらら, クリエイター, これ, たー, とき, ところ, ドラマ, ほんと, もの, 人, 作品, 共感, 内容, 出演, 北斎, 娘, 娘役, 宮崎, 放送, 検索, 発売, 眩, 自分, 葛飾北斎, 視聴, 購入, 追記,

Linuxでプロセス残すなら！

2019年11月08日

Logging

Linuxでプロセス残すなら【nohup コマンド &】を使おう。
以前、仮想ウィンドウを開いて行う方法を記載しましたが
こちらのほうが断然らくです。

ちなみにこれを使用すると、 nohup.out というファイルが作成されます。
node.jsやPythonとかで使用する機会が多いかもしれません。

例えばこんな感じで

nohup Python index.py &

過去記事：プロセス残してSSHログアウトする方法。

タグ

amp, index, JS, Linux, node, nohup, out, py, Python, SSH, ウィンドウ, こちら, コマンド, これ, ファイル, プロセス, ログアウト, 以前, 仮想, 作成, 使用, 感じ, 方法, 機会, 記事, 記載, 過去,

昨日の収益から考える。

2019年11月07日

Logging

昨日の収益から考えて、
お金を稼ぐということは難しいようで簡単なのか？
悩ましい、一人で生活が出来るほどの収益が得れれば
自分はこのままで良いような気がしますが、そんな収益を
稼げてはいない。

たまにお金って？
仕事って？なんだろうかとか思うわけです。
あのホモサピエンス全史にも書かれていたと思うだけど
ひとがここまで進化してきた過程に嘘を信じる力があったから
ここまで進化を遂げたみたいです。

お金って信用でなりたっているわけで…。
お金は単なる偽造できにくい紙切れなわけです。
それが増えるとお金持ちになるわけですけど、、、。

さてお金ってなんだろうかと思うわけです。
そして仕事ってなんだろうかと。
皆さん、お金のために仕事をしていて、
そのお金がないと生活が苦しくなるという現実があります。

ユーチューバーを見ていてこの人達は
広告収入やスポンサーで生活をしているわけですよね。

この人達の職業はなくても困るひとは殆どいないわけだけど
ビジネスとしてなりたっている。
そういう事を考えると、これから先、なくても困らない
仕事が増えていくだと思います。

仕事は自動化され、人々は職につけなくなる。
でも、お金がないと困る、、、最後の砦は
なくても困らない職業じゃないかと、そうしないと
経済が回らないじゃないのかな。

何もかもが自動化されロボットが労働する時代になれば
お金の価値や仕事の意味がわからなくなる気がして
ならないです。今後は情報（知識）がお金として
今以上に価値があるものになったり体験や経験の共有が
価値の有るものになるのかもしれない。

タグ

お金, お金持ち, ここ, こと, このまま, スポンサー, それ, たま, ため, なん, ビジネス, ひと, ホモサピエンス, ユーチューバー, わけ, 一人, 人, 仕事, 信用, 偽造, 全史, 力, 収入, 収益, 嘘, 広告, 昨日, 殆ど, 気, 現実, 生活, 皆さん, 簡単, 紙切れ, 職業, 自分, 進化, 過程,

あるキーワードをライクするTwitter API。

2019年11月06日

Logging

さくらレンタルサーバー、もともとmecab(メカブ)が入っているらしい。
自動であるキーワードに対してライクする方法（Twitter API）です。
たぶん、こんなコードはなかったと思います、
過去記事「ワードプレス過去記事のツイートをボット化する方法。」と併用してお使いください。
そうでないと動きませんので…。
知り合いエンジニアさんとかに組み込んでもらってください。

<?php
function mecab_tw_like($txt="",$connection=Null){
    if(!$txt)return false;
    if(!is_object($connection))return false;
    $cmd = "echo "$txt" | mecab";
    exec($cmd, $opt, $return_ver);
    //var_dump($opt);
    foreach($opt as $key=>$val){
        $r = explode("t",$val);
        if(preg_match("/名詞/",$r[1])){
            $statuses = $connection->get(
                'search/tweets',
                array(
                    'q'                 => $r[0],
                    'count'             => '3',
                    'lang'              => 'ja',
                    'locale'            => 'ja',
                    'result_type'       => 'recent',
                    'include_entities'  => 'false'
                )
            );
            if(is_array($statuses->statuses) and $statuses->statuses){
                foreach( $statuses->statuses as $tweet ){
                    $id = $tweet->id;
                    $result = $connection->post(
                        'favorites/create',
                        array(
                            'id' => $id
                        )
                    );
                }
            }
        }
    }
}

タグ

API, cmd, connection, echo, exec, false, function, if, is, like, lt, Mecab, null, object, opt, php, quot, return, tw, Twitter, txt, ver, エンジニア, キーワード, コード, サーバー, さくら, ツイート, プレス, ボット, メカブ, ライク, レンタル, ワード, 併用, 方法, 自動, 記事, 過去,

ワードプレス過去記事のツイートをボット化する方法。

2019年11月05日

Logging

WordPress（ワードプレス）の過去記事をツイートしたいけど
結構大変ですと断られる業者は腕なしかもしれない。

簡単に作れます。Composerをインストールして
TwitterOAuthのライブラリー入れてあげて、ワードプレスのwp-load.phpと
TwitterOAuthのライブラリー を参照するような下記コードを作るだけで
ツイートが可能です。

これを自動化するにはcrontab(クロンタブ)という機能で実行できます。
ほとんどのレンタルサーバーにこの機能はついています。

うちのサーバーはWindowsサーバーなんでとかいう場合は
スケジュールでなんとかしてくださいと言えばOKです。

これを実装するのに発生する単価は1万ぐらいじゃないかと思います。
それ以上高ければ、ぼったくられています。

1万円が高いかどうか？

ちなみに普通のプログラマーはこれを構築するのに30分もかからないです。
人件費を考えるとそれぐらいが妥当だと思います。
いまクラウドワークスなどで頼めば5000円以下で対応してくれる人も
いますが、単価が下がるとそれは最終的に自分の首を絞めることに
なります。なので1万円ぐらいが妥当だと思います。

<?php
//ひとつ英語名のフォルダ作って、これいれてあげて
require_once ('../wp-load.php');
require_once ("../vendor/autoload.php");
use AbrahamTwitterOAuthTwitterOAuth;
define("CONSUMER_KEY","コンシューマーキー");
define("CONSUMER_SECRET","コンシューマーシークレット");
define("ACCESS_TOKEN","アクセストークン");
define("ACCESS_TOKEN_SECRET","アクセストークンシークレット");
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);
$args = array(
  'post_status' => 'publish',
	'posts_per_page' => 1,
    'orderby' => 'rand'
);
$posts = get_posts($args);
foreach ( $posts as $val ){
    $href =  get_permalink($val->ID);
    $title = get_the_title($val->ID);
    $res = $connection->post("statuses/update", array("status" =>$title . " n" . $href . " n#黒歴史ってなんだ? #ブログ ".date('Y/m/d H:i:s')));
}

タグ

１, 30, Composer, crontab, OK, php, TwitterOAuth, Windows, WordPress, wp-load, インストール, うち, ぐ, クロン, コード, これ, サーバー, スケジュール, それ, タブ, ツイート, プレス, プログラマー, ボット, ほとんど, ライブラリー, レンタル, ワード, 万, 下記, 人件, 単価, 参照, 可能, 場合, 大変, 実行, 実装, 方法, 普通, 業者, 構築, 機能, 発生, 簡単, 腕, 自動, 記事, 過去,

Pythonコード：demo

2019年11月05日

Logging

#!/usr/local/bin/python3
# coding:utf-8
import os
import sys
import MeCab
import gensim
import markovify
import unicodedata
model = gensim.models.KeyedVectors.load_word2vec_format('/var/www/html/model.vec', binary=False)
f = open('merosu.txt')
tagger = MeCab.Tagger("-Owakati")
tagger.parse('')
text0 = tagger.parse(f.read())
text1 = text0
text0 = text0.replace('\n','')
text0 = text0.replace('\r','')
text1x = text0.split(" ")
text2 = []
try:
    for item in text1x:
        if item.strip():
            results  = model.most_similar(positive=[item],topn=2)
            #"print(results)
            for val1 in results:
                text2.append(val1[0] + "\n")
#
    # print (text1)
    # print (" ".join(text2))
    model_a = markovify.Text(text1 + "\n")
    print(str(model_a.make_sentence()).replace(' ',''))
    model_b = markovify.Text(" ".join(text2))
    print(str(model_b.make_sentence()).replace(' ',''))
    model_combo = markovify.combine([model_a, model_b], [1, 1])
    print(str(model_combo.make_sentence()).replace(' ',''))
except Exception as e:
    print("動作エラー", e.args)
    pass

タグ

-Owakati, 'merosu, 0, １, 2, ３, 39, 8, bin, binary, coding, demo, false, format, gensim, html, import, KeyedVectors, load, local, markovify, Mecab, model, models, open, OS, parse, Python, quot, read, replace, sys, tagger, Text, txt, unicodedata, usr, UTF-, var, Vec, Word, コード,

世間の基準に惑わされないBY 茂木健一郎

2019年11月05日

Logging

世間の基準に惑わされない事が大事だと茂木健一郎 氏は言っている。
有給休暇中で仕事を探しをしているのですが、平日、ハローワークに行くと
自分より年上の男性や主婦層のひとが仕事を探しているのを見かけます。
20年前の光景とは何だかちょっと違うかな。
20年前だと氷河期世代が仕事を求めて、ハローワークにいたような気がします。
ちなみに仕事はあります、仕事を選ばなければ仕事はあると思いますがみんな、いろいろな事情で仕事を選びます、
自分も仕事を選びます？。
ただ、自分はプログラマーという職でなくても良いとは思っています。
自分が重点を置いているのは最低でも10年、最高で15年働ける仕事です。
（お給料により前後しますが…それ以上は働かないと思います）
?

タグ

10, 15, 20, BY, いろいろ, お給料, それ, ハローワーク, ひと, プログラマー, みんな, 世代, 世間, 主婦層, 事, 事情, 仕事, 光景, 基準, 大事, 平日, 年上, 最低, 最高, 有給休暇, 気, 氷河期, 男性, 職, 自分, 茂木健一郎, 重点,

phpばっかり触っていた人がPython触ってみて！？

2019年11月02日

Logging

phpばっかり触っていた人がPython触って
実際コードを書いてみて思ったことは、括弧（かっこ）が無いことで
コードが見ずらい、なれるまで時間がかかりそうです。
片っ端からサンプルコードを見ていてやっとなれてきたかなってところですね。
Functionなんかが入るとまだまだ怪奇です。
PythonのコードはPHPとは真逆で、感覚的にはnode.jsなんかと同じかなと。
web上での動作的な考え方もnode.jsに似てますね。
特にPythonは学術的なコードで計算式からグラフなどを表示するなどは
いろいろなライブラリーが存在していますし、ご存知かと思いますが
AI（人工知能：機械学習）には欠かせない言語の一つかなと思います。
ちなみに音声をグラフ化するのも簡単でした。下記のような感じで表示可能です。

タグ

AI, function, JS, node, php, Python, web, いろいろ, かっこ, グラフ, コード, こと, ご存知, サンプル, ところ, なんか, らい, ライブラリー, 一つ, 上, 下記, 人, 人工, 動作, 可能, 存在, 学習, 実際, 怪奇, 感じ, 括弧, 時間, 機械, 片っ端, 知能, 簡単, 考え方, 表示, 言語, 計算, 音声,

オレオレ無名関数の再帰処理。

2019年10月26日

Logging

無名関数はよく使います。ちょっとしたモノを書きたい時、
オレオレ無名関数を書いて済ますことが多くなりました。
無名関数の良いところは無名関数を使用する手間にメソッドがあるので
確認しやすいというところですね。
 

<?php
$mumei = function ($tasu=0) use(&$mumei){
    if($tasu<=150){
        $tasu = $tasu + 5;
        print $tasu."n";
        return $mumei($tasu);
    }
    return $tasu;
};
//オレオレ無名関数の使い方は…小道具ぐらい程度のもの。
print $mumei();
// 5
// 10
// 15
// 20
// 25
// 30
// 35
// 40
// 45
// 50
// 55

タグ

0, 10, 15, 150, 20, 25, 30, 35, ４０, 45, 5, amp, function, if, lt, mumei, nbsp, php, print, return, tasu, use, オレオレ, こと, ところ, メソッド, もの, 使い方, 使用, 再帰, 処理, 小道具, 手間, 時, 済, 無名, 確認, 程度, 関数,

内容まで￥r￥nで書かれたCSVコードを整形する簡単な方法。

2019年10月19日

Logging

内容まで￥r￥nで書かれたCSVコードを整形する簡単な方法。
CSVの内容まで￥r￥nで書かれているとプログラム（PHP）で読み込みが
とても面倒くさいなので、自分は手っ取り早い方法で整形を行いました。
まずCSV編集専用のソフトか何かでファイルを開いてください。
おそらく正しく読み込まれると思います。次に
列の最後に新たに列を追加しCSVで使用されていないユニークな文字を
記入して行端まで値を入れて再度保存してください。
次にエディターでCSVを開き、全ての￥r￥nを￥nに置き換えます。
次に列の最後につけた、ユニークな文字を￥r￥nに置き換えます。
こうすることにより列の終端を探すなどのコード書かなくても
explodeなどで取り出すことが可能です。
但し容量が多いG（ギガ）単位のCSVファイルには通用しません。
その場合、CSVファイルを分離するか、
プログラムで何とかするかになります。
以上、小技テクニックでした。
 

タグ

CSV, explode, php, エディター, ギガ, コード, こと, ソフト, ファイル, プログラム, ユニーク, 但し, 何か, 使用, 保存, 値, 全て, 内容, 再度, 分離, 列, 単位, 可能, 場合, 容量, 専用, 整形, 文字, 方法, 最後, 簡単, 終端, 編集, 自分, 行端, 記入, 追加, 通用,

自分の務めてる会社の１次入社試験（過去問）

2019年10月12日

Logging

自分の務めてる会社の入社試験（過去問）です。
これぐらいのことは出来てもらわないと困るという事で出題したのですが
どうもこの問題難しいのか？
ここまで漕ぎ着けて採用された人はひとりしかいない。
大手の会社にはこんなの簡単だよという人は
たくさんいると思いますが、自分の務めてる会社は
どちらかと言えば零細企業です。
こういう問題出しても中々、解けない人が多くて
採用まで至らないのが現状です。
※今は募集していません。
■問題
郵便番号入力すると検索結果を表示するようにせよ。
また下記の条件を満たしていることとする。
1．サジェスト機能がある。
2.PHP言語を使用。
3.非同期処理。
単なるこれだけでも、中々出来る人が来ない。
これが零細企業地方の現状です。
https://zip358.com/tool/postal_code_search/

タグ

１, 2, ３, 358, Code, com, php, postal, search, tool, zip, ここ, こと, これ, これぐらい, これだけ, サジェスト, たくさん, どちらか, ひとり, また下, 中々, 事, 人, 今, 企業, 会社, 使用, 入力, 入社, 処理, 出題, 募集, 同期, 問題, 地方, 大手, 採用, 条件, 検索, 機能, 現状, 番号, 簡単, 結果, 自分, 表示, 言語, 記, 試験, 過去問, 郵便, 零細,

ちょっとした物。InstagramのAPI取得する

2019年10月05日

Logging

Instagram（インスタグラム）の画像などが取得することが出来ます。アクセストークンの取得の方法がわからない場合はぐぐってください。尚、APIのバージョンが、今後上がった場合は下記のコードは使用できなくなる可能性があります。ちなみにこのコード動作確認はしておりません。このコードを理解して使用できる人のみお使いください。
尚、画像取得数はデフォルト10にしています。プログラムではアクセストークンと20を渡しています。
画像URLはコメントアウトのところに入ってきます。※プログラムを可変してお使いください。

<?php
//Instagram
//https://api.instagram.com/v1/users/self/media/recent/?access_token=&count=
class instagram_api{
    public const url ="https://api.instagram.com/v1/users/self/media/recent/?access_token=";
    public function api ($access_token= "",$img_count =10){
        $url = self::url;
        return (object)json_decode(@file_get_contents($url . $access_token."&count=".$img_count));
    }
    public function obj_img($obj=Null){
        if(!is_object($obj))return false;
        if(!$obj->data)return false;
        foreach ($obj->data as $key => $item) {
            var_dump($item);
            // $item->images->standard_resolution->url
            // $item->images->low_resolution->url
        }
        return true;
    }
}
$obj = instagram_api::api("access_token",20);
instagram_api::obj_img($obj);

タグ

１, 10, 20, access, API, class, com, const, count, https, instagr, Instagram, lt, media', php, public, quot, recent, self, token, url, users, アウト, アクセス, インスタグラム, コード, こと, コメント, デフォルト, トークン, ところ, バージョン, プログラム, 下記, 人, 今後, 使用, 動作, 取得, 可能性, 場合, 方法, 物, 理解, 画像, 確認,

動画を無音声に変換するバッチ

2019年09月28日

Logging

こらからプログラムしている所のVlogを撮ろうと
月曜日に、WEBカメラを新調しました。
いざ撮影してみると部屋の雑音などが入ってしまうので
音声カットする方法は無いのかなと
フリー編集ソフトをググっていたのだけど
フリーの動画編集ソフトは動画の最初に開発会社のロゴが
表示されるものが多くて何だかやだなーと思い
断念、よくよく考えると自分プログラマーじゃないかということを
思い出しffmpegの存在を思い出して、、、。
ffmpegで無音声で検索すると音の切り離しができる事を知り
バッチを作る事が出来たのでその方法をおすそ分け。
Windows用のffmpeg（解凍したフォルダffmpeg）がC:の直下に入っているとした場合の
バッチです、尚、解凍したフォルダはffmpegに名前変更済とします。
下記のコードをテキストファイルにコピーしてその後、拡張子をbatと変更し
お使いください。動かない場合、下記のプログラムを正しく理解するか
知り合いのIT関係者にヘルプしたら大体の方はわかると思います。
※環境変数には登録していないのでexeにパラメータを渡します。

@echo off
set /P INMP4="動画ファイル名（絶対パス）を入力ください"
set /P OUTMP4="出力動画ファイル名（絶対パス）を入力ください"
cd C:ffmpegbin & ffmpeg.exe -i "%INMP4%" -vcodec copy -an "%OUTMP4%"
echo "complete"

 
無事、無音声の動画に音楽をYOUTUBEで付与することが出来ました。
https://www.youtube.com/watch?v=0-0FH3iaEP4

タグ

Bat, ffmpeg, Vlog, web, Windows, おすそ分け, お使い, カット, カメラ, コード, こと, コピー, ソフト, だなー, テキスト, バッチ, プ, ファイル, フォルダ, フリー, プログラマー, プログラム, もの, ロゴ, 下記, 事, 動画, 名前, 場合, 変換, 変更, 存在, 後, 所, 拡張子, 撮影, 断念, 新調, 方法, 最初, 月曜日, 検索, 用, 直下, 編集, 自分, 表示, 解凍, 部屋, 開発, 雑音, 音, 音声,

高知県のダム貯水率をグラフ化してみた。

2019年09月21日

Logging

高知県のダム貯水率をグラフ化してみた。
親戚にダムに勤めている人がいるのがきっかけで貯水率って
HPで表示させているのかなという事で調べてみました。
結果、かなり古いデザインサイトが現れた。
何とも懐かしい気持ちになりました。
そこでこの表からグラフ化してみたいなとか思って
ゴニョゴニョ作ってみた。
ちなみにソースコードが変わると
抜き取り出来なくなります。
追記：やはり変更されていました2へ続く
ソースコードを貼っときます。
ajaxとPHPを使用してます、XPathで貯水率だけ抜き取ってます。
サンプルサイト
https://zip358.com/tool/demo6/index.html

<?php
$html = file_get_contents("高知県のダム情報のURL");
$html = mb_convert_encoding($html,"UTF-8","SJIS");
$dom = new DOMDocument();
$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html,LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$ary=array(
    "nagase",
    "kamaidani",
    "kagami",
    "sameura",
    "kirimi",
    "sakamoto",
    "oodo",
    "nakasugawa",
    "iburigawa"
);
for($i=3;$i<=11;$i++){
    foreach ($xpath->query("/html/body/form/div[2]/table/tr/td/table/tr[$i]/td[7]") as $node) {
        $r[] = preg_replace("/x{00a0}/u","",$node->textContent);
    }
}
foreach ($r as $key => $value) {
    $obj[$ary[$key]] = $value;
}
print json_encode($obj);

$(function(){
    dam();
    //setInterval(dam,9999)
});
function dam(){
    $.ajax({
        url　: './dam.php',
        dataType : 'json',
        success　: function(obj){
            $("#nagase").attr( "style","width:"+ parseInt(obj.nagase) +"%");
            $("#kamaidani").attr( "style","width:"+ parseInt(obj.kamaidani) +"%");
            $("#kagami").attr( "style","width:"+ parseInt(obj.kagami) +"%");
            $("#sameura").attr( "style","width:"+ parseInt(obj.sameura) +"%");
            $("#kirimi").attr( "style","width:"+ parseInt(obj.kirimi) +"%");
            $("#sakamoto").attr( "style","width:"+ parseInt(obj.sakamoto) +"%");
            $("#oodo").attr( "style","width:"+ parseInt(obj.oodo) +"%");
            $("#nakasugawa").attr( "style","width:"+ parseInt(obj.nakasugawa) +"%");
            $("#iburigawa").attr( "style","width:"+ parseInt(obj.iburigawa) +"%");
            $("#nagase").attr( "aria-valuenow",parseInt(obj.nagase));
            $("#kamaidani").attr( "aria-valuenow",parseInt(obj.kamaidani));
            $("#kagami").attr( "aria-valuenow",parseInt(obj.kagami));
            $("#sameura").attr( "aria-valuenow",parseInt(obj.sameura));
            $("#kirimi").attr( "aria-valuenow",parseInt(obj.kirimi));
            $("#sakamoto").attr( "aria-valuenow",parseInt(obj.sakamoto));
            $("#oodo").attr( "aria-valuenow",parseInt(obj.oodo));
            $("#nakasugawa").attr( "aria-valuenow",parseInt(obj.nakasugawa));
            $("#iburigawa").attr( "aria-valuenow",parseInt(obj.iburigawa));
            $("#nagase").text(obj.nagase + "%");
            $("#kamaidani").text(obj.kamaidani + "%");
            $("#kagami").text(obj.kagami + "%");
            $("#sameura").text(obj.sameura + "%");
            $("#kirimi").text(obj.kirimi + "%");
            $("#sakamoto").text(obj.sakamoto + "%");
            $("#oodo").text(obj.oodo + "%");
            $("#nakasugawa").text(obj.nakasugawa + "%");
            $("#iburigawa").text(obj.iburigawa + "%");
        },
        error: function(obj){
            alert("error");
        }
    });
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高知県のダム貯水率</title>
    <script src="../jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="./js/dam.js"></script>
    <style>
        body{
            background-color: #3e4654;
            color: aliceblue;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
    <main role="main" class="flex-shrink-0">
        <div class="container">
            <table class="table table-dark">
                <tr>
                    <td style="width:15%">
                        <p>永瀬ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress"  style="width:100%">
                            <div id="nagase" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>鎌井谷ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kamaidani" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>鏡ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kagami" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>早明浦ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="sameura" class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>桐見ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kirimi" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>坂本ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="sakamoto" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>大渡ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="oodo" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>中筋川ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="nakasugawa" class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>以布利川ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="iburigawa" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </main>
    <footer class="footer mt-auto py-3">
        <div class="container">
            <span class="text-muted">©zip358.com</span>
        </div>
    </footer>
</body>
</html>

タグ

2, 358, 6, 8, ajax, com, contents, convert, demo, encoding, file, GET, HP, html, https, index, lt, mb, php, SJIS, tool, url, UTF-, XPath, zip, かなり, きっかけ, グラフ, コード, ゴニョゴニョ, サイト, サンプル, ソース, そこ, ダム, デザイン, 事, 人, 何, 使用, 変更, 情報, 気持ち, 結果, 表, 表示, 親戚, 貯水, 追記, 高知県,

Tera Termで自動ログインする方法：秘密鍵有り無し対応

2019年09月14日

Logging

秘密鍵有り自動ログイン

connect 'ホスト名:22 /ssh /2 /auth=publickey /user=ユーザー名 /passwd=パスワード /keyfile=秘密鍵'
wait '#'
sendln 'ls'
sendln 'cd /var/www/html'

 
秘密鍵無し自動ログイン

connect 'ホスト名:22 /ssh /2 /auth=password /user=ユーザー名 /passwd=パスワード'
wait '#'
sendln 'ls'
sendln 'cd /var/www/html'
上記の内容をテキストファイルにコピペしてホスト名、ユーザー名、パスワード、

秘密鍵（場所）をそれぞれ変更し任意の名前で保存。
保存後、拡張子をTTLへ変更。
Tera TermでTTLを呼び出すようにする方法に
ついては割愛します（ググってください）。
ちなみにこの記事、過去に書いています。
（過去記事は別のブログに移転しています）
 

タグ

2, 22, auth, cd, connect, html, keyfile, ls, nbsp, passwd, password, publickey, sendln, SSH, Tera, Term, TTL, user, var, wait, くだ, コピペ, それぞれ, テキスト, パスワード, ファイル, ホスト, ユーザー, ログイン, 上記, 任意, 保存, 内容, 割愛, 名前, 場所, 変更, 対応, 拡張子, 方法, 有り無し, 秘密, 自動, 鍵,

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

2019年09月07日

Logging

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

タグ

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

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

2019年09月07日

Logging

画像をタイル状に分離して一括ダウンロードさせるジェネレーターを
作ってみました。画像は自動的に削除されます？
あることをすれば他人の画像がアップした画像も削除されます。
ちなみに一括ダウンロード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();
    }

}

タグ

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

会社でLaravel開発するみたい。

2019年08月31日

Logging

会社でLaravel開発するみたいな事を言っていた。
自分が提案してからかなり月日が経過している気がする。
Laravelやるぞって言ってから長く月日が経過しているので
自分のテンション下がっていて昨日から少し触ってみたところ。

タグ

Laravel, Laravel開発, かなり月日, テンション, ところ, 会社, 少し, 月日, 気, 自分,

もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。

2019年08月24日

Logging

もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。
自動で九九表を生成するjQueryなんかを作ってそう。
(いまの小学生が羨ましいなw夏休み一日中ネットに浸っているだろう）
デモサイトはこちら
https://zip358.com/tool/demo5/index-12.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九九表</title>
    <link rel="stylesheet" href="../MDB-Free_4.8.5/css/bootstrap.css" >
    <link rel="stylesheet" href="../MDB-Free_4.8.5/css/mdb.css" >
    <link rel="stylesheet" href="../fontawesome-free-5.9.0-web/css/all.css">
    <script src="../jquery/jquery-3.4.1.js"></script>
</head>
<body>
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">数字を入力してください</label>
        <input type="text" class="form-control" id="inp" aria-describedby="inp" placeholder="数字を入力してください(デフォルト(9))">
        <small id="emailHelp" class="form-text text-muted">1以下の数字、数字以外、または桁が2桁を超えた場合デフォルトを表示します</small>
    </div>
    </form>
    <span id="tbl99"></span>
    <script>
        $(function(){
            var cc = function(){
                var c=$(this).val().match(/[0-9]{1,2}/) && Number($(this).val())>1?$(this).val():9;
                $("#tbl99").html(c99(c));
                return c;
            };
           $("#tbl99").html(function(){
                c99($("#inp").val(cc));
           });
           $("#inp").on("keyup",cc);
           $("#inp").on("keydown",cc);
        });
        function c99(c){
            var str="<h1><span class="badge badge-primary">九九表</span></h1>";
                var x = y = c;
                str+="<table class="table table-striped table-dark table-bordered">";
                for(var i=1;i<=x;i++){
                    str+="<tr>";
                    for(var ii=1;ii<=y;ii++){
                        var s = i * ii;
                        str+="<td>" + i + " × " + ii + " = " + s + "</td>";
                    }
                    str+="</tr>";
                }
                str+="</table>";
                return str;
        }
    </script>
</body>
</html>

タグ

aria-describedby, cc, content, css, device-width, function, IE, Ii, initial-scale, inp&quot, jquery, lt, match, Number, placeholder, quot, STR, stylesheet&quot, val,

画像ファイル系一覧のパスを列挙するバッチ

2019年08月17日

Logging

setlocal enabledelayedexpansion
type nul >imglist.txt
set BEFORE_STRING=
set AFTER_STRING=/
set BEFORE_STRING2=F:/
set OUTPUT_FILE=imglist.txt
for /f %%a in ('dir /a-d /s /b *.jpg.webp *.gif') do (
set line=%%a
set RES=!line:%BEFORE_STRING%=%AFTER_STRING%!
echo !RES:%BEFORE_STRING2%=!>>%OUTPUT_FILE%!
)
endlocal

画像ファイル系一覧のパスを列挙するバッチです。
ググりながら作ってみました。
ちなみに勘所はsetlocal enabledelayedexpansion（endlocal）と！です。
どうもforの中の変数をセットするタイミングが関係しているので
上記の文言を使用しないとうまく取り出す事が
できないようです。
遅延環境変数とかいうそうですね。。。
あまり理解していないけれどもorz

タグ

2, a-d, AFTER, BEFORE, DIR, do, echo, enabledelayedexpansion, endlocal, file, For, gif', gt, imglist, in, jpg, line, nul, OUTPUT, res, set, setlocal, string, txt, type, パス, バッチ, ファイル, 一覧, 列挙, 勘所, 画像,

変なコードを書いてしまった。それはいつものこと（笑）

2019年08月10日

Logging

変なコードを書いてしまった。
PHPにstr_repeatという関数が存在しているのだけど
何のために使用するのか全然わからない。関数の内容は任意の文字を
指定回数、繰り返した文字列として返してくれるというものです。
試しにその関数を使用し変なコードを書きました。
茶目っ気ですので…。これがPCに負担がかかるとか
無限ループとかの処理にすると御縄なんでしょうけど・・・。
サンプルコードはこちらから
https://zip358.com/tool/demo5/index-11.php

<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="../jquery.tubular.1.0.1/js/jquery.tubular.1.0.js"></script>
        <link rel="stylesheet" type="text/css" href="../jquery.tubular.1.0.1/css/screen.css">
        <script>
            $('document').ready(function() {
            var options = {
                videoId: '760lRwLKFF0',
                mute: true,
            };
            $('#bgmovie').tubular(options);
            });
        </script>
        <style>
            body{
                background-color: #000;
                color: #fff;
                font-size: 80px;
                line-height: 80px;
            }
            p{
                color: #38a9c5;
            }
        </style>
    </head>
    <body>
    <div id="bgmovie">
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
<?php
$str = str_repeat("高知 よさこい 踊る,",7);
var_dump(str_getcsv($str));
?>
<p class="oshite" data-oshite="<?=$str?>"style="text-decoration: underline">▼おして知るべし</p>
※おして知るべしをクリックすると7ウィンドウ開きますよ！！
<?php
    foreach(str_getcsv($str) as $val){
?>
<?php
    }
?>
</div>
        <script>
            $(function(){
                $(".oshite").on("click",function(){
                    let oshite = $(this).attr("data-oshite").split(",");
                    for(var i = 0 ; i < oshite.length ; i++){
                        if(oshite[i]!==""){
                            window.open("https://twitter.com/search?src=typed_query&q=" + encodeURIComponent(oshite[i]));
                        }
                    }
                });
            });
        </script>
        <script src='https://vjs.zencdn.net/7.6.0/video.js'></script>
    </body>
</html>

タグ

--, 11, 358, 5, 7, 8, ９, class, com, demo, DOCTYPE, endif, gt, html, IE, if, index, lt, lt-ie, no-js, PC, php, repeat, STR, tool, zip, いつも, コード, こちら, こと, これ, サンプル, それ, ため, もの, ループ, 任意, 何, 使用, 内容, 処理, 回数, 変, 存在, 指定, 文字, 文字列, 無限, 縄, 茶目っ気, 負担, 関数,

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, コード, サンプル, ダメダメ, プログラム, やり方, 他, 使用, 内容, 前回, 割愛, 力, 勘どころ, 好評, 自分, 英語, 解析, 記事, 記載, 送受信,

TinyMCE 5.0でオリジナルプラグイン作成するはググれば何とかなるが？

2019年07月27日

Logging

TinyMCE 5.0で独自のプラグインを開発するにあたって
ググれば4.0で作成する方法は山ほど例題があるのだけど5.0は
非常に少ないtinymce.windowManager.openを使用してのプラグインは
5.0でも案外簡単に見つかるのだけど、tinymce.windowManager.openUrlを
使用しての情報はググってもない。
唯一、公式サイトが記載しています。
しかし残念なことに全て英語で書かれています。
日本語で記載しろよという話だけど・・・・。
で！！tinymce.windowManager.openUrlで
何が出来るかと言えば外部ファイルを
読み込みが出来てそのレスポンスを受け取る事が出来るのです。
英語が嫌いでも原文で英語を読め！！ですよ・・・。
答えはそのページに書いているのですね。
※ちなみに会社でこの機能（e.windowManager.openUrl）を
使用し開発中です。
たぶん、自分みたいに困っている人もいると思うので
基本的な部分を記載しています、なお自作プラグインの作り方は
理解しているという前提で記載しています。
まず例としてPHPファイルを読み込みたいのなら
自作プラグインのPHPファイルに下記の記載を行います。

<!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">
        <input type="text" name="L_japan" class="form-control">
        <input type="text" name="L_English" class="form-control">
        <input type="button" name="submitbtn" value="恩恵を受ける"class="btn btn-primary">
        </form>
        <script>
            var chageJson = function(data) {
            console.log(data);
            var JsonData = [];
            for (i = 0; i < data.length; i++) {
                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>

PHPファイルはこのような感じでjavascriptが大事ここで、
submitを行っています。
当然、JSON形式で返却しましょう。公式ページにも書かれいますが
mceActionで制御しましょう。
プラグイン側のJSは下記のようになります。

(function() {
    tinymce.create('tinymce.plugins.language_boon', {
        init : function( ed,  url) {
            console.log(ed);
            act =function(ed)
            {
                ed.windowManager.openUrl(
                    {
                    type: 'panel',
                    title: '恩恵を受ける',
                    url:url + "/language_boon.php",
                    onMessage:function(api, details){
                      console.log(api, details);
                      console.log('オレオレjapan', details.data.L_japan);
                      console.log('オレオレEnglish', details.data.L_English);
                   }
                });
            };
            // window.addEventListener('message', function (event) {
            //   console.log(event);
            //   var data = event.data;
            //   console.log(data.data);
            //   if(ed.settings.id == data.data.id_){
            //     console.log('オレオレjapan', data.data.L_japan);
            //     console.log('オレオレEnglish', data.data.L_English);
            //   }
            // });
              ed.ui.registry.addButton('language_boon',{
                title : '恩恵を受ける',
                text: '恩恵',
                onAction:function(){act(ed)}
            });
        },
    getInfo : function() {
        return {
            longname : 'tinymce.plugins.language_boon',
            author : 'taoka',
            authorurl : 'https://zip358.com',
            infourl : 'https://zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('language_boon', tinymce.plugins.language_boon);
})();

公式ページは下記のリンクより
https://www.tiny.cloud/docs/ui-components/urldialog/#urldialoginstanceapi
サンプルサイトはこちら
https://zip358.com/tool/editor/
 
 

タグ

4.0, 5.0, open, openUrl, TinyMCE, windowMan, windowManager, オリジナル, こと, サイト, ファイル, プラグイン, ページ, レスポンス, 事, 会社, 何, 作成, 使用, 例題, 全て, 公式, 原文, 唯一, 外部, 嫌い, 山ほど, 情報, 方法, 日本語, 機能, 残念, 答え, 簡単, 英語, 記載, 話, 開発,

phpでイマドキDB接続の仕方なの？

2019年07月20日

Logging

実行していないので上手く動いているかは
未知数ですが、コードの書き方はイマドキの書き方に
しています。PHP公式ではこう書かれています。

プリペアドステートメントのパラメータに変数をバインドすると・・・。
i 対応する変数の型は integer です。
d 対応する変数の型は double です。
s 対応する変数の型は string です。
b 対応する変数の型は blob で、複数のパケットに分割して送信されます。

<?php
$servername = "hostname";
$dbname ="dbname";
$dbusername = "root";
$dbpassword = "pass";
if($conn = mysqli_connect($servername,$dbusername,$dbpassword,$dbname)){
    $sql = "select username from mastertbl where uid =? and password = ?";
    $stmt = mysqli_stmt_init($conn);
    if(mysqli_stmt_prepare($stmt,$sql)){
        mysqli_stmt_bind_param($stmt,"ss",$uid,password_hash($password,PASSWORD_DEFAULT));
        mysqli_stmt_execute($stmt);
        mysqli_stmt_store_result($stmt);
        if($cnt=mysqli_stmt_num_rows($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            for($i=0;$i<$cnt;$i++){
                $row = mysqli_fetch_assoc($result);
            }
        }
    }
    mysqli_stmt_close($stmt);
    mysqli_close($conn);
}

タグ

blob, conn, connect, db, dbname, dbpassword, dbusername, double, hostname, if, Integer, lt, mysqli, pass, php, root, select, servername, SQL, string, user, イマドキ, コード, バインド, パケット, パラメータ, プリペアドステートメント, 仕方, 公式, 分割, 型, 変数, 実行, 対応, 接続, 書き方, 未知数, 複数, 送信,