ノーコードって知ってますか?

2020.08.25

Logging

ノーコードって知ってますか?ITエンジニアだったら一度は聞いたことがあるとは思いますが、ノーコードってのはプログラムを書かずにUI(ユーザーインターフェース)上でウェブサイトやアプリが制作することが可能になるというものです。これって中小企業や零細企業にはかなり痛い話です。

こういうサービスを使えば簡単にアプリやウェブサイトが作れてしまいます。それも無料で作れるのです、広告表示が気にならないなら無料で広告表示を退けたい場合は月1000円ぐらい払えば退けてくれるので本当に便利なんです。

じぶんはノーコードをお勧めします、10万円のお金を払うなら自分たちで作ったほうが良いかなと特にアプリは企業に依頼すると高額な請求になるので簡単な仕様ならばノーコードのサービスを使用して自分たちで作ることをお勧めします。

ちなみにノーコードってこんなだよって話をしている動画がユーチューブで検索するといろいろな人が解説しているので見てみてください。

今話題のノーコード(NoCode)って?その特徴から未来まで、現役プログラマが徹底解説!

タグ

10, 1000, IT, UI, アプリ, いろいろ, インターフェース, ウェブ, エンジニア, お勧め, お金, かなり, コード, こと, これ, サービス, サイト, じぶん, それ, ノー, プログラム, もの, ユーザー, ユーチューブ, 一度, , , 中小企業, , 仕様, 企業, 使用, 依頼, 便利, 制作, 動画, 可能, 場合, 広告, , 本当, 検索, , 無料, 簡単, 自分, 表示, 解説, , 請求, 零細, 高額,

言いにくいbluetooth[ブルートゥース]が音飛びするよ。

2020.07.06

Logging

言いにくいbluetooth[ブルートゥース]が音飛びするよ。最初に解決方法を教えます。緩衝しているであろう電波の遮断とブルートゥースを再接続することで解決するということです。ぐぐるとその情報が上位に表示されるので間違いでしょう。あのSONYのサイトでも同じ解決方法ですからね。

確かにそれは解決方法として間違っていないようにも思うのだけど、PCとヘッドホンをミリ秒単位?でブルートゥースは通信を行っていると思うです、大体、音飛びする時の音って情報量が多い音源のような気がします。シンセサイザーみたいな音源だと比較的に音飛びが発生する確率が上昇するような気がするのですが、皆さんどうでしょうか?

ブルートゥースで音楽聞かないひとには分からないかもしれないけれど、ノイズや音飛びは結構、イラってする事があります。特にそれが頻発したらヘッドホンを買い換えようと考えるぐらい思うのですから、本当に音を気にする人は有線ヘッドホンを使っていると思うのですが…。

パソコンで作業をしながらって人は有線は結構邪魔な存在です。因みに少し前までは有線で頑張っていましたが無線(ブルートゥース)に切り替えました。ブルートゥースヘッドホンは充電式なので就寝前に充電すれば問題なく一日使えます。そろそろ1万円代のブルートゥースヘッドホンに変えようかなとか思っています。

タグ

bluetooth, PC, SONY, イラ, こと, サイト, シンセサイザー, それ, ノイズ, ひと, ブルートゥース, ヘッド, ヘッドホン, ミリ, 上位, 上昇, , , 単位, 大体, 情報, 接続, 方法, , 最初, 有線, 本当, , 発生, 皆さん, 確率, , 緩衝, 表示, 解決, 通信, 遮断, 電波, , 音楽, 音源, 音飛び, 頻発,

夜な夜なサーバー移行。

2020.06.27

Logging

夜な夜なサーバー移行。ほぼ徹夜してサーバー移行を行いました。ちょっとは表示速度が早くなったかな?、どうだろうか。よくわからないけど・・・。当分、このサーバーを使用していこうと思います。何故かわからないけどブログが表示されるまで結構な悪戦苦闘をしました?、全部自分でこんなんだったら、立ち上げたほうが良かったかなとか、途中から思い出しました。

因みにまだ完璧に終えたわけではなくて半分ぐらい終わったかなという感じです。正直な所、つらいつらい寝たいと思っています。

タグ

サーバー, ちょっと, ブログ, わけ, 使用, 全部, 半分, 完璧, 徹夜, 悪戦苦闘, 感じ, , 正直, 移行, 結構, 自分, 表示, 途中, 速度,

ちょっとしたツール。

2020.05.11

Logging

サイト内の検索をするためのURLを生成してくれるツールを作りました。
ドメインを入力するとあらかじめ登録しているURLの候補が表示されます。
なお、プログラムでドキュメント検索する場合などに最適かなと思います、URLもプログラム関係のサイト(ドメイン)を登録しています。

因みにこれを作った経緯は単なる自分が使用するために作りました、そのお裾分けですので機能追加などは自分の判断で追加いたします(問い合わせなどは受け付けておりません)。

最後にリンクを貼っときます。
https://zip358.com/tool/site_search/ (サイト内検索URL生成)

タグ

358, com, https, search, site, tool, url, zip, お裾分け, これ, サイト, ため, ツール, ドキュメント, ドメイン, プログラム, リンク, 使用, 候補, 入力, 判断, 問い合わせ, 場合, 最後, 最適, 検索, 機能, 生成, 登録, 経緯, 自分, 表示, 追加, 関係,

PHP7でTwigを使う。

2020.05.10

Logging

Twigとは小枝であり、PHPのテンプレートエンジンであります。テンプレートエンジンが何なのかはぐぐってください。ここでは割愛します。

Twig3.x(3系)、Dumpの表示の仕方が書かれていないのでそれを記載します。記載方法は下記になります。特に記載方法が変わったのはデバッグの時の記述方法です、最初、デバッグ方法をググっていたのですが、全然上手くいかずエラーばかりはいていました。※Twig2系の情報が結構ヒットします。

require_once '/vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('テンプレートの階層を指定');
$twig = new \Twig\Environment($loader,['debug' => true]);
$twig->addExtension(new \Twig\Extension\DebugExtension());//?ここの記述を忘れずに!!
echo $twig->render('index.html(レンダーするテンプレートファイル)', ['items'=>$this->top_view()]);

結局、公式ページのドキュメントにデバッグ方法が書かれていたのですが、それにたどり着くまで、小一時間ぐらいWEBの荒野をさまよっていました。最初からドキュメントを見ろよという教訓を得たのですが、結構ググる方を優先してしまう自分がいます。実際はドキュメントの中で検索するのが一番なのかもなと。皆さんが使用するようなエンジンはドキュメントを見るほうが良いと今回、痛感しました。これからはドキュメントを見るようにします。

https://twig.symfony.com/doc/3.x/functions/dump.html

タグ

2, , 39, 7, addExtension, autoload, debug, dump, Environment, FilesystemLoader, gt, loader, new, once, php, require, true, Twig, vendor, エラー, エンジン, ここ, それ, デバッグ, テンプレート, ヒット, 下記, 仕方, , 割愛, 小枝, 情報, 指定, 方法, , 最初, 表示, 記載, 記述, 階層,

お部屋の温度と湿度を表示しています。密かに?

2020.04.26

Logging

お部屋の温度と湿度を表示しています、その情報を残すようにコードを書きました、スマホなどでは表示できないけれどPCでは表示可能です。自分が引き篭もりってあの時は寒かったなぁとかあの日は暑かったなぁという事を思い出すために作りました。因みにMY-ROOMのソースコードを見ると大体どんな仕様かわかると思います。

基本的に暑い日でも昼間はあまり冷房をつけないようにしていましたが、ここ数年、じぶんの暑さの限度を超えている日があり、そういう日はエアコンをつけてます。暑さは我慢できないのだけど、高知県ということもあり寒さにはある程度、我慢できて足温器だけで何とか生きていけます。今年はそれほど寒い日もなく暖冬かなと思います。ただ今年はとても暑くなりそうな気がします。

温暖化防止したいだけど・・・かなり暑いだよね。フロンは出していないのですが、それでも温暖化に影響有るだろうなぁと思いつつ。エアコンをつけてます。

ごめんなさい。

最後にMY-ROOMはこちら
https://zip358.com/my-room/

タグ

MY-ROOM, PC, エアコン, お部屋, かなり, コード, ここ, こと, じぶん, スマホ, ソース, ため, フロン, , 今年, 仕様, 冷房, 可能, 影響, 情報, 我慢, , , 昼間, , 暖冬, , 温度, 温暖化, 湿度, 自分, 表示, 足温器, 防止, 限度, 高知県,

Gさんのリアルタイム検索トレンドを抽出するPHPライブラリ

2020.04.15

Logging

Composerをインストールしていること前提条件として書いていきます。まずはライブラリーを入れます。

こんな感じに

composer require x-fran/g-trends

そして次にこんな感じのPHPコードを書きます、これだけでGさん(グーグルさん)のリアルタイム検索トレンドが表示することが可能となります。ちなみにJSONで返す処理として書いています。ライブラリーがしっかりしているので、あとはメソッドを呼び出すだけで簡単に検索のリアルタイムのトレンドが表示できてしまう。

ライブラリーコードは下記から参照できます。
https://github.com/x-fran/g-trends

<?php
include_once "../../vendor/autoload.php";
use XFran\GTrends\GTrends;
$options = [
    'hl' => 'ja-JP',
    'tz' => -540,
    'geo' => 'JP',
];
if((int)$_POST["p"]==1234){
    $gt =  new GTrends($options);
    $ret = $gt->getRealTimeSearchTrends();
    if(is_array($ret["storySummaries"]["trendingStories"])){
        $jsn = json_encode($ret["storySummaries"]["trendingStories"]);
        print $jsn;
    }
}

尚、ajaxで表示している部分は割愛します。
https://zip358.com/tool/demo14/ demo14を検証ください。

タグ

autoload, com, Composer, g-trends, github, GTrends, https, include, json, lt, once, options, php, quot, require, use, vendor, x-fran, XFran, あと, インストール, グーグル, コード, こと, これだけ, トレンド, メソッド, ライブラリ, ライブラリー, リアルタイム, 下記, 処理, 前提, 参照, 可能, 感じ, 抽出, 条件, 検索, 簡単, 表示,

ブラウザのプッシュ通知が簡単にできちゃう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, 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(</>)を選んでください。
Introducing Firebase Cloud Messaging

ではでは?健闘を祈る?

タグ

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

月の満ち欠けPHPライブラリを書きました。ちょっと適当なアイコンで表示。

2020.02.22

Logging

月の満ち欠けPHPライブラリを書きました、ご自由にお使いください。

ちょっと適当なアイコンで表示。
もっと正確なアイコンを取り入れたい方はご自身でご自由に変更ください。
月の満ち欠けの計算方法はネットから見つけてきました。
情報を記載していただいた先人の知恵を借りPHPライブラリが出来ました。
ありがとうございます。

<?php
//date_default_timezone_set('Asia/Tokyo');
class moon{
    static public $icon = array(
        "0"=>'?',//朔
        "1"=>'?',//朔
        "2"=>'?',//朔
        "3"=>'?',//三日月
        "4"=>'?',//三日月
        "5"=>'?',//三日月
        "6"=>'?',//三日月
        "7"=>'?',//上弦の月',
        "8"=>'?',//上弦の月',
        "9"=>'?',//上弦の月',
        "10"=>'?',//上弦の月',
        "11"=>'?',//上弦の月',
        "12"=>'?',//十三夜月
        "13"=>'?',//十三夜月
        "14"=>'?',//十三夜月
        "15"=>"?",//望月
        "16"=>"?",//望月
        "17"=>"?",//望月
        "18"=>"?",//望月
        "19"=>"?",//寝待月
        "20"=>"?",//寝待月
        "21"=>"?",//寝待月
        "22"=>"?",//寝待月
        "23"=>'?',//下弦の月
        "24"=>'?',//下弦の月
        "25"=>'?',//下弦の月
        "26"=>"?",//二十六夜月
        "27"=>"?",//二十六夜月
        "28"=>"?",//二十六夜月
        "29"=>"?"//二十六夜月
    );
    static public $res = "0";
    static public $moon_gregorian = array(0,2,0,2,2,4,5,6,7,8,9,10);
    public function main($year=2012,$mon=12,$day=12)
    {
        static::$res = ((($year-11)%19)*11 + static::$moon_gregorian[$mon-1]+$day)%30;
    }
    public function icon(){
        return static::$icon[static::$res];
    }
}

呼び出しはこんな感じで。

<?php
    moon::main($year,$mon,$day);
    $chg = moon::icon();

タグ

0, , 2, , 39, array, Asia, class, date, default, gt, icon, lt, moon, php, public, quot, set, static, timezone, Tokyo, アイコン, ご自身, ネット, ライブラリ, 先人, 変更, 情報, , 方法, , , 正確, 満ち欠け, 知恵, 表示, 計算, 記載, 適当,

YOUTUBE登録者数を購入するべきか?答えはNGですか?

2020.02.06

Logging

YOUTUBE登録者数を購入するべきか?自分が考える所、YOUTUBEの登録者数を過度に増やすべきではないが購入は否定しない。数年前はYOUTUBEチャンネルをBAN(バン)される事もなく登録者を増やすことが出来た、いまは非常にBANされる可能性が高くなってきているのであまりお勧めはしない。もう一つの理由は怪しげなサイトも有り、そんなサイトでYOUTUBEの登録者を購入した時点であなたの個人情報などを勝手に悪用される可能性が高い、なので地道に登録者数を増やすか、正規販売店?から少しの登録者数を購入するのがベスト。

YOUTUBE登録者数が増えても再生回数を水回ししても最終的に見るのは人なので、その人達が良い評価をしてくれない限り意味がない。ちなみに『YOUTUBE 登録者 購入』などでググると上位に表示される広告があるが、そんなサイトには怪しいものが多いので気をつけたほうが良い。

ちなみにYOUTUBEの登録者数や再生回数を購入することが出来る有名サイトに Multiflave株式会社(マルチフレーブ)のSNSマーケティングストアというサイトがある。
https://www.snsmarket.jp/

自分は購入することは考えていませんが、但しいろいろ調べていく内に、コレも無きにしもあらずなサービスかなと思えてきた。グレーゾーンな所ですけどね。

※なお、くれぐれも自己責任で!!バンされる可能性もあります。

タグ

BAN, NG, youtube, あなた, いま, お勧め, こと, サイト, チャンネル, パン, ベスト, もう一つ, もの, 上位, , , 個人, 再生, 勝手, 可能性, 否定, 回数, 地道, 少し, 広告, 悪用, 情報, 意味, , , 時点, 正規, , 水回, 理由, 登録者, 答え, 自分, 表示, 評価, 販売店, 購入, 限り,

パンくずリストの構造化を変えない人がいるよ。

2020.01.29

Logging

Gさんから、data-vocabulary.org schema deprecated のお叱り(警告)が出た方はschema.orgの形式の構造体に変更しなくてはなりません。パンくずリストって何って方はまずググってみてください。以前勤めていた会社はこのパンくずリストを対応しているサイトは見かけませんでした。長いものにはまかれろな会社になっていたので誰も言いたいことが言えなかっただけなのかもしれません。

ちなみにこれを変更することによりGさんの検索サイトに表示される時に表示を目立たさせる効果があります。ちょっとした事ですがクリック率はかなり上がります。対応していないとしているでは雲泥の差があります。

タグコードはこんな感じです。

  <ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="https://zip358.com">
        <span itemprop="name">home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="https://zip358.com/PHP">
        <span itemprop="name">php入門</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
  </ol>

SEOは必要ないとは言いません。昔のサイトはコードも古いデザインも古いけど上位表示されているサイトがありますよね。それには理由があります、アクセス数と競合会社がいない、ドメインが古いという事から上位表示されているだけで、SEO対策を行ったサイトが出てきたらそちらが上位表示される恐れがあります。そして一番怖いのは古いサイトは下手にデザイン等や構造を変えると上位表示から転落しますので、ご注意ください!

タグ

BreadcrumbList, data-vocabulary, deprecated, gt, http, itemscope, itemtype, li, lt, ol, org, quot, schema, お叱り, かなり, クス, クリック, コード, こと, これ, サイト, タグ, パン, もの, リスト, , , 以前, 会社, , 効果, 変更, 対応, , 形式, 感じ, , , 検索, 構造, 構造体, 表示, , 警告, 雲泥,

ブログとYOUTUBERの厳しい現状。

2020.01.28

Logging

月1万PV(表示)でも収益はそれほどの額ではない。今日、ブログのPVの割合とYOUTUBERの登録者数の割合を調べてみた結果、ブログに力を入れるよりYOUTUBEに力を入れる方がまだ合理的だと感じた。上位3%の人がまぁそれなりの生活が出来ているという感じですね。なんだかこれってブログが始まった当初のような感じです。結局、ブルーオーシャンのときに初めていたひとが良いという感じ。

ユーチューバー全体に対するチャンネル登録者数の割合について解説!

唯、ブログやYOUTUBEで収入を得るより地道に何でも良いから働いたほうが幸せなのかもしれない。事情があって働けない人は力を注いでも良いかもしれないが、そうではない場合は当たれば良いなぐらいの感覚で毎日のようにUPしていく方が良いと思います。ちなみに自分はブログやYOUTUBEはその感覚でいます。

ブログのPVと収益対比表はこちらです。
https://ebloger.net/bloger-ranking/

世の中甘い話はないなと感じます。例えば高知の代表的なYOUTUBERに「ちゃがまらん」というYOUTUBERがいます。いま1.5万人の登録者数がいるのだけどこれだけでは食っていけそうにない。一人なら大丈夫だと思うのだけど複数人でやっているから、これだけでは厳しいじゃないかと思う。唯、伸びていっているので何とかなるかもしれないが…。
ちゃまがらんのチャンネル登録はこちらです。
10万人登録者数になれば彼らは生きやすくなると思います。
https://www.youtube.com/channel/UC-L-MfqOsxHu3CdqWfiy4Aw

タグ

, , bloger-ranking, ebloger, net, PV, UP, youtube, YOUTUBER, オーシャン, こちら, これ, それなり, とき, ひと, ブルー, ブログ, , 上位, , , 事情, , 今日, 割合, , 収入, 収益, , 地道, 場合, 対比, 幸せ, 当初, 感じ, 感覚, , , 毎日, 現状, 生活, 登録者, 結果, 自分, 表示, , ,

スマホの次は複合現実(mixed reality)ですね。

2020.01.28

Logging

複合現実とは何か、現実と仮想との融合だと思ってもらえれば良いかと思います。下記の動画を見ていただけると分かりやすいかも。HoloLens2(ホローレンズ2)というメガネのようなもの装着すると現実と仮想の映像が合わさって表示されるというもの、いまは結構大きな機器を装着しているけれど、最終的にメガネぐらいに軽量になるのではと思っています。

Microsoft shows off HoloLens 2 mixed reality headset at MWC

これで何が変わるかといえば、動画に流れているように仕事のアシスタントなどの補助が出来たりする。自分はMR(複合現実:mixed reality)が普及するとエンターテイメントな事に使われたり、新たな広告市場になるのではないかと思っています。スマホの次は間違いなく複合現実なんだと思うけど、これが普及するまではもう少し時間がかかるのではないかと思っています。

先に流行るのはスマートグラスかなという考え、スマートグラスが認知されて来る頃にはホローレンズもかなり改良されているだろうなと感じました。

[HoloLens 2] ベルシステム24 & デロンギ・ジャパン事例 MR を活用したコールセンターの働き方改革

タグ

2, 8, 90, com, e-n, HoloLens, mixed, Mr, reality, xrVXh, youtube, アシスタント, いま, エンターテイメント, くら, これ, スマート, スマホ, ホロー, メガネ, もの, レンズ, 下記, , 仕事, 仮想, , 動画, 市場, 広告, 映像, 時間, 普及, 機器, , 現実, 自分, 融合, 表示, 装着, 補助, 複合, 軽量,

WEB担当者様各位、サジェスト機能(予測変換)を意識している?

2020.01.24

Logging

サジェスト機能(予測変換)を意識しているブロガーやアファリエターの方は結構多いと思いますが、自分はそれを全然意識はしていませんし、調査して文章を書いていません。本当は意識した方が良いだろうけれど、例えば人工知能でサジェスト機能を使用すると下記のような候補が表示されます。

動画を再生してみてください:サジェスト機能の動画

サジェスト機能で候補が現れる単語(キーワード)の単語を散りばめて記事を書いても上位表示は難しいでしょう。候補が現れるという事は激戦区状態です、そんな内容で記事を書くと殆どはGさんは拾ってくれません。それよりかこれから検索されそうなキーワードを散りばめて記事を書くことをオススメします。

前から自分のブログに書いているように好きな事を書くことのほうが大事です。そして有益な情報をオープンに公開している記事はいづれ検索サーチが進化すると拾ってくれます。三年後には人工知能が記事の意味を理解できるところまで技術は進化すると思っています。

タグ

web, アファ, おすすめ, キーワード, こと, これ, サーチ, サジェスト, それ, たー, ブロガー, ブログ, リエ, , 上位, 下記, 予測, , 人工, 使用, 候補, 公開, 内容, 再生, 動画, 単語, 各位, 変換, 大事, 情報, 意味, 意識, 担当者, 文章, , 有益, 本当, 検索, 機能, 殆ど, 激戦区, 状態, 理解, 知能, 自分, 表示, 記事, 調査, 進化,

SEOを解説しているYOUTUBER

2020.01.12

Logging

KYOKOさんと言う方がYOUTUBEでSEO解説やWEB副業の解説を
しています。SEOって結構怪しげな物も多いのですが
このひと、まともな事を語っています。

下記の文章は自分のSEO対策に関しての考えです。
アクセスを上げたいと考えているのならば
自分が発信したいものに2?3個をカテゴリーに分けて
最初は発信したほうが良いと思います。その2?3個のジャンルの中で
アクセス数が多いジャンルが必ず出てきます。
そうなったら、徐々にそのジャンルに焦点を当て記事を書いていく事を
オススメします。たまにどれも平均的なアクセスと言う場合もありますが。

あと、SEO対策を追っていくと切りがないので
最低限しないといけないSEO対策だけを行うことが良いと思います。
例えば、下記の動画にあるようにモバイルフレンドリーなどは大事かと思いますし、サイトの表示速度も大事です。表示速度は下記からテストが出来ます。

pagespeed insights(Gさんが提供しています)
https://developers.google.com/speed/pagespeed/insights/

最後にKYOKOさんのYOUTUBEチャンネルのリンクを貼っときます。

https://www.youtube.com/channel/UCF7IKesFOYQb34uzNiuNDqQ/featured

https://www.youtube.com/watch?v=dH050wfHEPM

タグ

2, , insights, KYOKO, pagespeed, SEO, web, youtube, YOUTUBER, アクセス, あと, おすすめ, カテゴリー, こと, サイト, ジャンル, たま, テスト, どれ, ひと, フレンドリー, まとも, もの, モバイル, 下記, , , 副業, 動画, 場合, 大事, 対策, 提供, 文章, , 最低限, 最初, 焦点, , 発信, 自分, 表示, 解説, 記事, 速度,

レンタルサーバーの帯域幅を増やしたい

2019.12.26

Logging

浜辺美波VS池田エライザの妖艶対決? 「賭ケグルイ」OP映像特別編第1弾が公開

レンタルサーバーの帯域幅を増やしたい、そうする事によって表示速度はかなり変わる、特にモバイルファーストにはかなり良いと思うのだ。

レタリング処理能力が上がるのと帯域幅を増やすことによってモバイルファーストの評価は上がるだけど
共有のレンタルサーバーは帯域幅を上げることはすら出来ない仕様になっているところが多い。

WordPressを高速に動かすクサナギとかいうやつが良いのだが・・・。
それでもそんなに評価が上がるわけでもない。

WordPress専用サーバなどを試したことがないので試してみたいのだが、自分が思うにはあまりレタリング処理は
変わらないのではないかと思っている。

悩ましい、収入が安定すれば良いサーバに変えてみようとか密かに思っています。

やはりモバイルファーストってかなり影響するよね。
追記2021:因みにカゴヤ・ジャパンのレンタルサーバーだと帯域幅を増やせますよ。

Japanese Webmaster Office Hours(ウェブマスター オフィスアワー 2016 年 12 月 7 日)

タグ

2021, https, WordPress, www, You, かごや, かなり, クサナギ, こと, サーバ, サーバー, ジャパン, ところ, ファースト, モバイル, やつ, レタリング, レンタル, わけ, , 仕様, 共有, 処理, 収入, 安定, 専用, 帯域, , 影響, 能力, 自分, 表示, 評価, 追記, 速度, 高速,

googleスプレッドシートの値を取得することは可能ですが!

2019.11.24

Logging

googleスプレッドシートの値を取得することは可能ですが動的な値を取得することは不可能です。
動的処理というのはスプレッドシートの関数などで値を表示している情報をPHPなどで外部取得することは不可能です。

【Google神関数】生産性が100倍上がる!スプレッドシート4つの便利関数はこれ!

※方法があるようでしたら、教えて頂ければありがたいです。

なお、PHPからスプレッドシートの値などは変更可能です。
今回は値の取得に関しての方法を記載しております。

手順
1.グーグルさんからグーグルスプレッドシートのAPIKEYを取得する。
2. グーグルスプレッドシートを作成しスプレッドシートのID部分を取得する。
3.サーバ上にComposerをインストールし、下記のコマンドを実行する。

composer require google/apiclient:"^2.0"

下記のソースのAPIキー、スプレッドシートIDの部分を取得した値に置き換える。

<?php
require_once __DIR__ . '/vendor/autoload.php';
//$keyFile = __DIR__. "/credentials.json";
define("APIKEY","APIキー");
define("SPID","スプレッドシートID");
$spreadsheetId = SPID;
$range ="Sheet1!A1:B123";
$client = new Google_Client();
$client->setApplicationName("Spreadsheet");
$client->setDeveloperKey(APIKEY);
$scopes = [Google_Service_Sheets::SPREADSHEETS];
$client->setScopes($scopes);
$service = new Google_Service_Sheets($client);
$response = $service->spreadsheets_values->get($spreadsheetId, $range);
// TODO: Change code below to process the `response` object:
echo '<pre>', var_export($response->getValues()), '</pre>', "n";

結構ハシオッタ説明になりますが、こちらでGoogleスプレッドシートの値を取得または操作が可能となります。

タグ

, 2, 2.0, , 4, 5, A`, apiclient, APIKEY, com, Composer, et, fCs, Google, https, ID, php, quot, require, watch, www, youtube, インストール, グーグル, こと, コマンド, サーバ, シート, スプレッド, ソース, 下記, 不可能, 今回, 作成, , 処理, 取得, 可能, 変更, 外部, 実行, 情報, 手順, 方法, 表示, 記載, 部分, 関数,

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

2019.11.10

Logging

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

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

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

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

エージェント名 案件
(現場)数
フォロー
体制
最高単価 強みのある職種
フォスターフリーランス 
(旧スキルサーフィン)
人月
230万円
・ITエンジニア全般
レバテックフリーランス 人月
160万円
・多種多様なWebエンジニア
・多種多様なWebクリエイター
・Web/UIデザイナー
ハイパフォエンジニア 人月
130万円
・航空会社システムエンジニア
・FinTech関連立ち上げ
・消費財メーカーECサイト構築
・上流工程ITコンサル案件
Midworks
(ミッドワークス)
人月
160万円
・UIデザイナー
・Scala(スカラ)エンジニア
・ブロックチェーン(C#)
・AIエンジニア(Python)
・アプリエンジニア(Swift)
・Ruby(ルビー)エンジニア
techcareer freelance
(テックキャリアフリーランス)
人月
120万円
・サーバーサイドエンジニア
・アプリエンジニア
・フロントエンドエンジニア
・UI/UXデザイナー
Pe-BANK
(ピーイーバンク)
人月
200万円
・経験豊富なエンジニア
ハイパフォコンサル
(High-Performer Consultant)
人月
200万円
・航空会社システム移行推進PMO
・SAPシステムの再構築
・データイノベーション推進支援
ビッグデータナビ
(BIGDATA NAVI)
人月
150万円
・データサイエンティスト 
・SREエンジニア 
・レコメンドアルゴリズム構築 
・ビッグデータ基盤構築 
・各種データ解析 
・DevOpsエンジニア
ワークシップエージェント
(Workship AGENT)
人月
80万円
・UI/UXデザイナー 
・AngularJSエンジニア 
・Node.jsエンジニア 
・フルスタックエンジニア 
・広報/人事フリーランス 
・財務/ファイナンス 
・プランナー/マーケター 
・編集/ライター
ポテパンフリーランス 人月
100万超
・エンジニア
※特にRuby on Rails(レイルズ)
ITプロパートナーズ 人月
130万円
・Laravel開発エンジニア
・Salesforceエンジニア
・PHPエンジニア
・iOSエンジニア
・Androidエンジニア
・PHPエンジニア
・AWSサーバーエンジニア
・Javaサーバーエンジニア
・React.JS開発エンジニア
・UI/UXディレクター
・SEM広告ディレクター
・SEOディレクター
・Webディレクター
クラウドテック
(Crowdtech)
人月
120万円
・フロントエンドエンジニア
・Webデザイナー
・Webエンジニア
ギークス
(geechs job)
人月
100万円
・アプリエンジニア
・ゲームエンジニア
・ゲームデザイナー
エンジニアルート
(Engineer-Route)
人月
75万円
・Webデザイナー 
・フロントエンドエンジニア 
・AIエンジニア
みらいワークス 
(FreeConsultant.jp)
人月
180万円
・業務コンサルタント 
・ERP導入コンサルタント 
・PMO/SAP/BPR/PM
flexy 
(フレキシー)
人月
100万円
・アプリ開発エンジニア 
・PHPエンジニア 
・UI/UXデザイナー
Waris 人月
100万円
・営業/マーケター 
・コンサルタント 
・広報担当
ザッピーリンク 人月
160万円
・Webディレクター 
・Webライター 
・Webメディア編集者 
・Webマーケター

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

タグ

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

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

自分の務めてる会社の1次入社試験(過去問)

2019.10.12

Logging

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

タグ

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

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

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, かなり, きっかけ, グラフ, コード, ゴニョゴニョ, サイト, サンプル, ソース, そこ, ダム, デザイン, , , , 使用, 変更, 情報, 気持ち, 結果, , 表示, 親戚, 貯水, 追記, 高知県,

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

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";
    $re = @file_put_contents($Path,$b64);
    if($re){
        $obj[$i]["chk"] = $re?"ok":"ng";
        $obj[$i]["name"] = "$t-$no.png";
        $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, アップ, オンリー, コード, こちら, こと, サーバー, サイト, ジェネレーター, ソース, タイル, ダウンロード, はい, ファイル, ブラウザ, ページ, 一括, 下記, 他人, 保存, 処理, 分離, 削除, 動作, 参考, 問い合わせ, 変更, 強制, 格納, 生成, 画像, 表示, 複数, 追記, 選択,