dockerでlaravel環境構築したお話。 #hosts

2022.12.08

Logging

おはようございます、今日は早朝に明日の記事を書いています😆。

さて、dockerでlaravel環境構築したお話を書いていきます、Dockerの環境でApacheをインストールし、バーチャルホストを設定してwindows側のhostsも変更しDocker側のhostsも設定、起動確認も取れたので、一旦Dockerを終了し再度立ち上げるとDocker側のhostsが初期値に戻っている🤔。

これDockerの仕様らしいので、下記のようにdocker-compose.ymlを設定(extra_hosts)するか、Docker runでコンテナを立ち上げる場合はパラメーター–add-hostを付与してあげないといけない😳。

version: "3"
services:
  web:
    image: almalinux:latest
    container_name: Apache_v2.4
    ports:
      - 80:80
    privileged: true
    command: /sbin/init
    extra_hosts:
      - "example1.com:127.0.0.1"
      - "example2.com:127.0.0.1"
    volumes:
      - E:\var\www\html:/var/www/html
docker run --add-host=example1.com:127.0.0.1 .....

尚、Docker側のhostsを変更しないまま、立ち上げてもLaravelは動かないと思います。何故、動かないかはここでは割愛させて頂きます🙇。

タグ

--add-host, , almalinux, ap, Apache, container, docker, docker-compose, extra, hosts, image, Laravel, latest, name, quot, run, services, Version, web, Windows, yml, インストール, お話, これ, こんてな, バーチャル, パラメーター, ホスト, 一旦, 下記, 今日, 仕様, 付与, , 再度, 初期, 場合, 変更, 早朝, 明日, 構築, 環境, 確認, 終了, 記事, 設定, 起動,

Qiitaのfeedを取得して表示するだけのコード。 #php

2022.11.05

Logging

おはようございます、土曜日の朝ですね😗。

今日は文化の日にQiitaにUPしたfeedを取得して表示するだけのコードを書きました。見た目はこんな感じでQiitaの雰囲気を取り入れたデザインにしています。デモ版として実際にサーバーで起動しているモノです、feedを取得しているユーザーは自分を入れて3人です。

表示する人数が多くなるとページを描画する時間が遅くなるので実質、10人が限度かも知れないです。もし何人ものユーザーを取得したいと考えている方は表示部分と処理部分を別けて、尚且つ処理部分は非同期処理で変更することを推奨します。

尚、明日には2つに別けたプログラムコードを別記事として記載しますので、しばしお待ち下さいませ🙇。

今回のソースコードはこんな感じになってます。

<?php
    function get_Qiitafeed(string $feedUrl){
        $xml = @simplexml_load_file($feedUrl);
        if(isset($xml->entry)){
            print("<ul class='qiita_feed-list'>");
            foreach($xml->entry as $key=>$val){
                print("<li><a href='{$val->url}'>".$val->title."</a></li>");
            }
            print("</ul>");
        }
    }
?>
<!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">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
    .qiita_feed-list > li{
        /* font-weight: bold; */
        color:aliceblue;
    }
    .qiita_feed-list > li > a{
        color:aliceblue;
    }
    body{
        background-color:#60b111;
    }
    .shadow-lg {
        box-shadow: 0 1rem 3rem rgba(255,255,255,.195)!important;
    }    
</style>
<title>Qiita-feed</title>
<?php
    require $_SERVER['DOCUMENT_ROOT'] ."/header_script.php";
?>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-light">Qiita-feed</h1>
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <?php
            $Id_List = ["taoka-toshiaki","mpyw","suin"];
            foreach ($Id_List as $key => $id) {
            ?>
        <div class="row shadow-lg p-3 mb-5 bg-body rounded">
            <div class="col-12">
                🌿<span class="text-light">://qiita.com/<?=$id?>/feed :[引用]</span>
                <?=get_Qiitafeed("https://qiita.com/".$id."/feed")?>
            </div>
        </div>            
            <?php
            }
        ?>
        Copyright <?=date("Y")?>  <a href="https://358tool.com">358tool.com</a>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

タグ

10, 2, , feed, feedUrl, function, GET, lt, php, qiita, Qiitafeed, string, UP, お待ち, コード, こと, サーバー, ソース, デザイン, デモ版, プログラム, ページ, もの, ユーザー, 人数, 今回, 今日, 何人, 処理, 別記事, 取得, 同期, 土曜日, 変更, 実質, 実際, 感じ, 推奨, 描画, 文化の日, , 明日, 時間, , 自分, 表示, 見た目, 記載, 起動, 部分, 限度, 雰囲気,

Next.jsやNuxt.js.コレやアレやでport80は使えない。

2022.10.15

Logging

おはようございます、土日は雨が降るとか降らないとか🥕。

さて、Node.jsを飛び越えRact.js、Vue.jsを飛び越えてNext.jsNuxt.jsの事を調べてたりデモページを起動してみたりして、わかったこと。コレはアプリ開発の為の道具なんだという事を改めて認識。

オープンなWebサーバーで動くように設計されていない。ポート80番上で動くように設計されていないのだから、この理由はnode.jsのインストール仕様や動作仕様が関係しているような気がします。

TypescriptとNext.jsをアプリ開発しながら学んでみよう【Typescript入門】

Next.jsやNuxt.jsが出来た背景はHTMLコードを記入したりするのが面倒くさいからだと…w。だからこういうフレームワークが出来たんだろう。フレームワークの概念はLaravel等と概念的にはあまり変わりないので、まぁそんなにって思うけど、初学者はVue.jsを勉強してNode.jsを触った後にRact.js、Next.jsが良いと思います。因みにVue.jsのフレームワークがNuxt.jsです。

Next.jsでlocalhost:3000で表示させるのは簡単なだけど、独自ドメインで表示する方法はドキュメント以外に表示されていなかった。ググっても出てこない事もあるのだなと・・・。

ツイッターにメモとして呟いて置きましたので、そちらを参照ください。この独自ドメインを使う調査に数十分使用してしまった。この時間、とても勿体無いメンターが欲しいなって思います。

タグ

80, html, JS, Laravel, NEXT, node, nuxt, port, Ract, vue, web, アプリ, アレ, インストール, コード, こと, コレ, サーバー, デモ, フレームワーク, ページ, ポート, , 仕様, 初学者, 勉強, 動作, 土日, , 概念, , , 理由, 背景, 記入, 設計, 認識, 起動, 道具, 開発, 関係, ,

Picture-in-Pictureっていう拡張機能が良いです😍

2022.09.03

Logging

こんにちは、収益化が出来ても収入が少なかったらやっぱ悩ましいものですね。

今日はPicture-in-Pictureっていうグーグル公式が開発したChromeの拡張(Edgeでも似たような物があります)。ピクチャー・イン・ピクチャー(拡張)はYOUTUBEの他にネットフリックス、アマゾン・プライムなどもピクチャ・イン・ピクチャに対応していてとても良いです。

映画を観ながら、ネットサーフィンは勿論のこと、プログラムコード(他のアプリ起動)もながら書くことが出来てしまいます。YOUTUBEは右クリック*2回でピクチャー・イン・ピクチャーになることは知っていましたが、この拡張を使用すると拡張のアイコン・ボタンを押すか、ALT+Pでその機能を使用することが出来ます。

Picture-in-Picture Extension (by Google)

今まで公式が出してきた拡張機能の中でダントツ良いですねぇ~。本当に快適です。

タグ

2, ALT, Chrome, com, edge, https, LxCw-vvmIiI, Picture-in-Picture, watch, www, youtube, アイコン, アプリ, アマゾン, いん, グーグル, クリック, コード, こと, サーフィン, ダント, ネット, ネットフリックス, ピクチャ, ピクチャー, プライム, プログラム, ボタン, もの, , 今日, , 使用, 公式, 収入, 収益, , 対応, 拡張, 映画, 機能, , 起動, 開発,

Windows10~起動時にアプリ(ソフト)を自動起動させる方法です。

2022.06.23

Logging

おはようございます。隠しフォルダーが見える環境です。

さて、今日のお題はITエンジニアなら朝飯前のことだと思います。「Windows10~起動時にアプリ(ソフト)を自動起動させる方法です。」知らなかったら恐らくとても運の良いITエンジニアかと思います。方法を箇条書で記載しますねーーー😌。

  1. 隠しフォルダが表示できるようにエクスプローラーの設定を変更します(ググって)。
  2. 下記のフォルダ場所まで移動します(ユーザー名はご自身の環境によって違います)。
  3. 移動したフォルダにご自身が自動起動したいアプリのショートカットリンクファイルをコピペ(コピーアンドペースト)します。
  4. 再起動してみてアプリが自動起動している事を確認する。
C:\Users\ユーザー名\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

職場のPCが変わったりした時は必ず最初にやっていた作業になります。これをすることで出社しPC立ち上げ後、アプリの立ち上げなどは全くしなくて良くなります。因みにショートカットリンクにパラメーターを与えてあげることで、もっと短縮できる可能性があります。そこは割愛します。

タグ

10, AppData, IT, menu, microsoft, PC, Programs, Roaming, start, Startup, users, Windows, アプリ, アンド, エクスプローラー, エンジニア, こと, コピー, コピペ, ご自身, ショートカット, ソフト, ファイル, フォルダ, フォルダー, ペースト, ユーザー, リンク, 下記, , 今日, 再起動, 場所, 変更, 方法, , 朝飯, 環境, 確認, 移動, 箇条書, 職場, 自動, 表示, 記載, 設定, 起動, , ,

SSDが破損しましたのでm.2 ssdにしたお話。

2021.08.17

Logging

先日、ワクチン接種を行いました。最初は全然問題ない感じだったけど数時間後、注射をした腕が痛くなりました?。ちなみに痛みは和らぎましたが、まだ痛みがあります。

さて、昨日の朝、パソコンの電源ボタンを押したところ、起動はするもののSSDが認識されない。何度、やっても電源がつかないのでOSの入ったSSDを取り出して他のパソコンで認識するか、USB接続をしてみた所、やはり認識がかなり不安定になっていたので仕方なくパソコン専門店さんにm.2を購入しに行きました。

SSD買うよりm.2 ssdの方が爆走に早いということは知っていたので、どうせ同じぐらいの値段なら起動速度などの早いm.2 ssdを買ったほうがマシだと思い購入しました。1万2800円の出費です。働いていたらどうってことのない金額でも今は結構痛い額です。

早速、m.2 ssdに取り替えてみた所、やはり爆速ですね????。こんなにも早いとは思いませんでした、超絶に早い!!!サクサクと動きます。

でも痛い額です。パソコンの性能が上がっても使っている人が技術を持ってなくては何も意味がないですよねぇとまじで思います。

タグ

, 2, 2800, OS, SSD, USB, お話, かなり, こと, ところ, パソコン, ボタン, まし, ワクチン, , 不安定, , , 何度, 値段, 先日, 出費, 専門店, 感じ, , 接種, 接続, , , 昨日, 最初, , 注射, 爆走, 爆速, 破損, , 認識, 購入, 起動, 超絶, 速度, 金額, 電源, ,

家のPersonalComputer様の調子が悪いので騙し騙し使っている件。

2021.06.17

Logging

家のPersonalComputer様の調子が悪いので騙し騙し使っている件。パーソナルコンピューターとはPC(パソコン)の略です。因みにこの頃のジェネレーションギャップgeneration gap)はアドレスバーやURLとか言っても若い女性には通じなかったことです・・・?。これには驚きを超えショックでした?、通じないというのは、知っていたのですが本当にZ世代などには通じない人が結構多そうです。

話戻しまして、家のパソコンのどこの調子が悪いのかといえば、Cドライブ(SSD)の認識がとても良くなく立ち上がりにOS(オペレーションシステム)を読んでくれません。いや、違うなBIOSがSSDを認識してくれないので立ち上がらないのです。BIOSを再起動すると何故か二回目はSSDを認識してくれてOS=windowsが起動します。

自分はssdに問題があるという事までは突き止めています。SSDを違うポートに入れ替えても同じ現象が発生するのでおそらくCドライブのSSDだと断定したのですが・・・。この現象が発生したのがWindowsを21h1にアップグレードしてからなんで、実はソフトウェアのバグなのかもしれないのです。ダウングレードしても発生したので違うかもしれませんが・・・。

Windows 10 21H1 – Whats New?

近々、SSDを交換しないといけないかなと思っています。ちなみにM.2に交換するつもりです!!!交換するなら爆速で立ち上げたいですよね。

【PC】マニアックな話!M.2のSATAとNVMeの違いを簡単に説明!これから自作PCやる人は覚えておいてね!

タグ

BIOS, gap, GENERATION, OS, PC, PersonalComputer, SSD, url, Windows, アドレス, オペレーション, ギャップ, こと, これ, コンピューター, ジェネレーション, システム, ショック, どこ, ドライブ, バー, パーソナル, パソコン, ポート, 世代, , , , , 再起動, 問題, 女性, , 本当, , , 自分, 認識, 調子, 起動, ,

FF14を自動起動させてパスワード入力を

2021.03.23

Logging

Power Automate Desktop使用してFF14を自動起動させてパスワード入力する事を試みる。パスワード入力の動作を録画して再現して実行してみると動かないので自分で直しました。当初はUI Pathを活用して試してみたけど結局、うまく行かないので凄く単純な方法で動作をさせました。因みにこの方法はFF14が開いている最中に他のアプリを開いたりすると上手く動作することが出来ないので悪しからず。

上記のような設定をします。ウェイト(待ち時間)はご自身のPCによって調整が必要です。キーの送信部分は下記のように設定ください。

これで超長いパスワードを入力することもなくワンパスワードを入力すれば良いようになりました。ワンパスを設定していない方やフリープレイの方は送信するテキストを入力して保存するだけで後は、Power Automate Desktopを起動してフローを再生(実行)することで自動的にFF14が起動してパスワードを入力してくれます。

※前手順としてID保存状態にした状態で上記を実行ください!!!

https://flow.microsoft.com/ja-jp/desktop/

タグ

14, Automate, Desktop, FF, path, PC, Power, UI, アプリ, ウェイト, キー, こと, これ, ご自身, テキスト, パス, パスワ, パスワード, フリー, プレイ, フロー, ワン, 上記, 下記, , , 使用, 保存, 入力, 再現, 再生, 動作, 単純, 実行, 当初, 待ち時間, , 必要, , 方法, 最中, 活用, 自分, 自動, 設定, 調整, 起動, 送信, 部分, 録画,

VirtualBoxで共有フォルダ設定とApacheが表示されるまで。

2020.11.29

Logging

前処理としてこのコマンドを打つ。

yum -y groupinstall "Development Tools"
yum -y update kernel
yum -y install kernel-devel kernel-headers gcc gcc-c++

起動したらメニューから[デバイス]-[Guest Additions CDイメージの挿入]

mount /dev/cdrom /mnt
cd /mnt
./VBoxLinuxAdditions.run

reboot
cd /var/www/
ln -s マウント先 sf_html
gpasswd -a oreore vboxsf
gpasswd -a apache vboxsf

mount -t vboxsf -o dmode=0755,fmode=0755 (共有名) (マウント先)

reboot

Apacheのconfig設定ではリンク先はシンボルリンクを参照させとこう、これでリブートさせて完了やねん。さてこれで理解できたら、あなたは凄いです。これは単なるメモ書き記載なので、わからないと思います。

なので、参考にしたサイトのリンクを貼っときます。
http://itemy.net/?p=1355
https://www.codelab.jp/blog/?p=2587

これらでおそらく大体の人が理解できたと思います。

タグ

-o, -s, -t, -y, 0755, A`, Additions, Apache, cd, cdrom, dev, Development, dmode, fmode, gcc, gcc-c, gpasswd, groupinstall, Guest, html, install, kernel, kernel-devel, kernel-headers, ln, mnt, mount, oreore, quot, reboot, run, SF, Tools, UPDATE, var, VBoxLinuxAdditions, vboxsf, virtualBOX, www, yum, イメージ, コマンド, デバイス, フォルダ, マウント, メニュー, 共有, 前処理, 挿入, 表示, 設定, 起動,

bingから画像を一括ダウンロードするアプリ。

2020.06.14

Logging

任意のキーワード検索でbing画像からを一括ダウンロードするアプリを作りました。img-dl-bing-sss.exeファイルを起動すると動画のようなコンソール画面が開くので入力してダウンロードを開始してください。ダウンロードが終わると勝手に閉じます。

なお、一応R指定にも対応しています、キーワードがR指定項目かもと思う場合、Yと入力ください。
新垣結衣さんの熱烈なファンでもないですが、綺麗な方だとは思います。ということで例として使用させて頂きました、、、関係者の皆様ごめんなさい。

bingから画像を一括ダウンロードするアプリ

このアプリはウィンドウズ10環境で動作します。また、動作しないブロックされる場合は下記のURL等を参照しブロックを解除しお使いください。ブロック解除方法:https://forest.watch.impress.co.jp/docs/news/1130655.html

※なお、Bingサイトのデザインが変わった場合、動作しなくなりますのであしからず。

画像ダウンロードアプリのソースコードはこちら(古いコードですので動かない場合がありますVS2019C#)

using System;
using System.Runtime.CompilerServices;

namespace img_dl_bing_sss
{
    class Program
    {
        static void Main(string[] args)
        {
            string keyword = "",R18="";
            Console.ForegroundColor = ConsoleColor.Red;
            Console.WriteLine("処理中は画面や立ち上がったブラウザを閉じないでください。\n" +
                "処理が完了すると「***終了します***」と表示されます。\n" +
                "何かキーを押し終了してください\n\n");


            Console.ForegroundColor = ConsoleColor.Green;
            Console.WriteLine("↓検索キーワードを入力しエンターを押してください");
            keyword = Console.ReadLine();
            Console.ForegroundColor = ConsoleColor.White;
            Console.WriteLine("↓R指定ですか?\nY or N かの文字を入力しエンターを押してください");
            R18 = Console.ReadLine();
            Console.ForegroundColor = ConsoleColor.Yellow;
            Console.WriteLine("***画像のダウンロード量(画像数ではありません) 1?999 ***");
            var scroll = 9999;
            try
            {
                scroll = int.Parse(Console.ReadLine());
                if(scroll >=1 && scroll <= 999)
                {
                    scroll = scroll * 9999;
                }
            }
            catch
            {
                Console.ForegroundColor = ConsoleColor.Yellow;
                Console.WriteLine("***検索キーワードが不適切です。***");
            }
            SuiteTests img =  new SuiteTests();
            if (img.Imgdlok(keyword, R18, scroll))
            {
                img.Dispose();
            }
            else {
                Console.ForegroundColor = ConsoleColor.Yellow;
                Console.WriteLine("***検索キーワードが不適切です。***");
            }
            Console.ForegroundColor = ConsoleColor.Yellow;
            Console.WriteLine("***終了します***");
            
        }
    }
}
// Generated by Selenium IDE
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Firefox;
using OpenQA.Selenium.Remote;
using OpenQA.Selenium.Support.UI;
using OpenQA.Selenium.Interactions;
using Xunit;
using AngleSharp;
using AngleSharp.Html.Parser;
using AngleSharp.Html.Dom;
using AngleSharp.Dom;
using System.Runtime.InteropServices;
using Newtonsoft.Json;
using System.IO;
using System.Net;

public class SuiteTests : IDisposable {
  public IWebDriver driver {get; private set;}
  public IDictionary<String, Object> vars {get; private set;}
  public IJavaScriptExecutor js {get; private set;}
  public SuiteTests()
  {
    driver = new ChromeDriver();
    js = (IJavaScriptExecutor)driver;
    vars = new Dictionary<String, Object>();
  }
  public void Dispose()
  {
    driver.Quit();
  }
  public bool Imgdlok(string keyword="", string R18= "",int scroll = 999999)
    {
        if (keyword == "") return false;
        Console.Clear();
        string path = System.IO.Directory.GetCurrentDirectory() + "\\IMG\\";
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }
        driver.Navigate().GoToUrl("https://www.bing.com/?scope=images&nr=1&FORM=NOFORM");
        driver.Manage().Window.Size = new System.Drawing.Size(945, 1030);
        driver.FindElement(By.Id("sb_form_q")).Click();
        driver.FindElement(By.Id("sb_form_q")).SendKeys(keyword);
        driver.FindElement(By.CssSelector(".search.icon.tooltip")).Click();
        try
        {
            if (R18 == "Y")
        {
            driver.FindElement(By.LinkText("設定の変更")).Click();
            driver.FindElement(By.CssSelector("#settings_safesearch div:nth-child(3)")).Click();
            driver.FindElement(By.Id("adlt_set_off")).Click();
            driver.FindElement(By.Id("sv_btn")).Click();
            driver.FindElement(By.Id("adlt_confirm")).Click();
        }
        }
        catch
        {
            Console.ForegroundColor = ConsoleColor.Yellow;
            Console.WriteLine("***R指定ではありません***");
        }
        try
        {
            double ps = 0;
                for (int i = 99; i < scroll;i+=1000)
            {

                js.ExecuteScript("window.scrollTo(0," + i + ")");
                Console.CursorLeft = 0;
                ps = (double)(((double)i / (double)scroll) * 100);
                Console.Write("処理中::{0:D2}%",(int)ps);
            }
        }
        catch
        {
            Console.ForegroundColor = ConsoleColor.Yellow;
            Console.WriteLine("***Max画像まで到達しました***");
        }
        Console.ForegroundColor = ConsoleColor.White;
        Console.WriteLine("\n***ダウンロード処理開始***\n");
        int cnt = 0;
        var elm = driver.FindElements(By.ClassName("iusc"));
        driver.Manage().Window.Minimize();
        foreach (var e in elm) {
           dynamic jsondata = JsonConvert.DeserializeObject(e.GetAttribute("m"));
            Console.ForegroundColor = ConsoleColor.Red;
            Console.WriteLine((string)jsondata.murl + "::wait.....");
            string imgurl = (string)jsondata.murl;
            if(4 <= Path.GetExtension(imgurl).Length && Path.GetExtension(imgurl).Length <= 5)
            {
                try
                {
                    cnt++;
                    string ext = Path.GetExtension(imgurl);
                    WebClient myWebClient = new WebClient();
                    myWebClient.DownloadFile(imgurl, path + "No-" + cnt + "-" + keyword + ext);
                    myWebClient.Dispose();
                    Console.ForegroundColor = ConsoleColor.Cyan;
                    Console.WriteLine("***" + cnt +"::" + imgurl + "\n::ダウンロード中、画面を閉じないでください...***");
                    Console.ForegroundColor = ConsoleColor.Green;
                    Console.WriteLine("***" + cnt + "::ダウンロード済***");
                }
                catch
                {
                    Console.ForegroundColor = ConsoleColor.Yellow;
                    Console.WriteLine("***ダウンロードが失敗しました***");
                }

            }else{
                Console.ForegroundColor = ConsoleColor.Yellow;
                Console.WriteLine("***画像の拡張子が不明のためダウンロードが失敗しました***");
            }
        }
        Console.ForegroundColor = ConsoleColor.Blue;
        Console.WriteLine("***ダウンロード完了しました***\n" + path);
        return true;
  }
}

タグ

10, bing, exe, img-dl-bing-sss, url, VS, アプリ, ウィンドウズ, キーワード, コード, こちら, こと, コンソール, サイト, ソース, ダウンロード, デザイン, ファイル, ファン, ブロック, 一括, 下記, 任意, 使用, , 入力, 動作, 動画, 勝手, 参照, 場合, 対応, 指定, 新垣結衣, , 方法, 検索, 環境, 画像, 画面, 皆様, , 綺麗, 解除, 起動, 開始, 関係者, 項目,

ブラウザのプッシュ通知が簡単にできちゃう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, アカウント, インストール, ウェブ, オブジェクト, グーグル, クリック, ソフト, ダウンロード, パッケージ, ファイル, フォルダ, プッシュ, ブラウザ, プロジェクト, ホスティング, メッセージング, やり方, ローカル, 下記, , 任意, 作成, 取得, 左側, 必要, 情報, 手順, 操作, 確認, 移動, 簡単, 簡略, 表示, 記載, 設定, 認証, 説明, 起動, 通知, 項目,

ユーチューバーで生活している人。

2017.03.25

Logging


ユーチューバーで生活している人は凄いなと思います。
この頃のユーチューブは再生回数で上位表示されなくなりました。
再生回数よりBOT再生で再生しているか否かを判断して
表示されるようになっています。
昔、関わったことのある映像編集や写真などを生業している人(過去形?)の
YOUTUBEチャネルを先日見に行きました。
何やら今も生業しているのか、新着で2つ動画がアップされておりました。
商売の邪魔になるのでこれ以上は記載しませんが・・・。
 

タグ

2つ動画, BOT再生, YOUTUBEチャネル, ひとと軌道, ユーチューバー, ユーチューブ, 上位, , 再生回数, 写真, , 商売, 損切り, 新着, 映像編集, 現状, 生業, 起動, 軌跡, 過去形, 邪魔,

Windows10のコンピューターが毎日特定の時刻にスリープ状態から復帰するよ!?なぜ

2016.03.12

Logging

Windows10のコンピューターが毎日特定の時刻にスリープ状態から復帰するよ!?なぜ
ANSWER

Windows Media Center の更新機能が自動的に開始されるときに発生します。ということです。

この問題を解決するには下記のURLをクリックして、手順に従ってスケジューラから変更等を行ってください。

https://support.microsoft.com/ja-jp/kb/979878

このようにスリープ状態から勝手に起動するようなソフトがインストールされている場合があるので注意してください。今回は、マイクロソフト社のソフトでしたが他のソフトでもこのような設定になっている場合があるので、気をつけてください。また、スケジュールに設定する事によって起動時にソフトを起動することや曜日によってソフトを起動するなどの設定するなどの設定を追加することも可能です。

タグ

10, 979878, ANSWER, Center, com, https, ja-jp, kb, media', microsoft, support, url, Windows, インストール, クリック, こと, コンピューター, スケジューラ, スケジュール, スリープ, ソフト, とき, マイクロソフト社, 下記, , 今回, , 勝手, 可能, 問題, 場合, 変更等, 復帰, 手順, 時刻, 曜日, 更新, 機能, 毎日, , 注意, 特定, 状態, 発生, 解決, 設定, 起動, 追加, 開始,

指定時間になったら自動的に復帰(スリープ/休止状態)

2015.11.18

Logging

rtcwake -m mem -s 3600
rtcwake -m disk -s 3600
rtcwake -m mem -t $(date +%s -d "2015-11-18 06:30")

上記のコマンドで指定時間になったら自動的に復帰(スリープ/休止状態)する
事ができます。ちなみに3600とは3600秒(1時間後)という意味です。
menはスリープ状態を指し、diskはサスペンドを指します。
スリープ状態では電源ボタン等で指定時間内でも復帰が出来ますが
サスペンドモードでは電源ボタンを押してもパソコンは起動しないので
注意が必要です。
———————
自分はローカルサーバーを立ち上げているのですが
平日など自分が使わない時間帯などはスリープ状態にしています。
そうすることで、電気代の節約をしています。
ローカルサーバーと言っても使わない時間帯は余計な電力は
使いたくないですから(。>?<。)。
Ubuntuなどはこの方法ではうまく行かないと思います。
Ubuntuの事はあまり知らないので分からないのですが・・・・。
※リナックス(Linux)、CentOSの話です。

タグ

```, -m, -s, -t, 06, , 11, 18, 2015, 30, 3600, D-, date, disk, mem, men, quot, rtcwake, こと, コマンド, サーバー, サスペンド, スリープ, パソコン, ボタン, モード, ローカル, 上記, , 休止, 余計, , 平日, 復帰, 必要, 意味, 指定, 時間, 注意, 状態, 節約, 自分, 起動, 電力, 電気, 電源,

この前までサクサク動いてたのにWindows10のアップデートで

2015.11.13

Logging


この前までサクサク動いてたのにWindows10のアップデートで
スリープからの起動で固まるようになってしまいました。
原因はビデオボードなのですけど・・・・。
この土日の間にビデオボードを交換するかどうか
考えます。自分が自作で使っているPCは今から
おそらく8年ほど前に購入したものです。
なのでビデオボードも8年前のモノです。
そろそろ、このパソコンもマザーボードから取っ替えないと
いけない時期が来ているのかもしれません。
ちなみに、全て交換するとなると18万円ぐらい必要になる
感じです。この値段はアプライドで
見積もりを出してもらった金額です。
結構高スペックの見積もりなんで高めなんです。
もう少し待ってから交換するつもりではいます。
これぐらい高スペックにしておくと長持ちします。
全然、支障なくいまでも動いていますしゲームもまぁ
サクサク動いてはいます。
※交換しないモノ、記憶媒体、PCケース(見積もり除外)

タグ

PCケース, Windows10, アップデート, アプライド, ゲーム, これぐらい高スペック, スリープ, パソコン, ビデオボード, マザーボード, 値段, 原因, 土日, 支障なくいま, 自作, 見積もり, 見積もり除外, 記憶媒体, 起動, 金額,

さくらVPSでカスタムインストールでWEB(httpd)が表示されない時の対応。

2015.11.03

Logging


さくらVPSでカスタムインストールでWEB(httpd)が表示されない時の対応。
iptablesもポート80番を開けているのに・・・何故かWEB(httpd)が表示されない
プロセスも起動しているしhttpdのプロセスも動作している。
なのに・・・表示されない。
cnetOS7を自分がインストールした時に起きた事象です。
これを解決する方法は、一度、ファイアーウォールのHTTPポートストップさせましょう。
そうするとおそらくiptablesの設定がうまく行っていたら
表示されます。
ちなみに下記のコマンドでファイアーウォールのポートは解除できます。

firewall-cmd --zone=public --add-service=http --permanent
firewall-cmd --reload

自分はこれが分からなくて一時間ばかし悩んでいました。
https://knowledge.sakura.ad.jp/10534/

タグ

--add-service, --permanent, --reload, --zone, 7, 80, cnetOS, firewall-cmd, http, httpd, iptables, public, VPS, web, インストール, カスタム, コマンド, これ, さくら, ストップ, ファイアーウォール, プロセス, ポート, , 一度, 下記, 事象, 動作, 対応, 方法, , 自分, 表示, 解決, 解除, 設定, 起動,

AndroidStudioでアプリ開発を行おうとしている。

2015.10.27

Logging

AndroidStudioでアプリ開発を行おうとしているのだけど
エミュレータの起動が遅くて(#゚Д゚)y-~~イライラしたり
GUIでオブジェクトの配置変更していると思いのほか
処理が落ちまくるという事例が発生する。
かれこれ8年か9年前のPCにWindows10を
インストールして使っているだから
そろそろ処理落ちしても仕方がないといえば
仕方がない。それでもこのPCを使わないといけない
理由は変え買える目処がない事が理由です。
来年には変え買える予定ですが
あくまでも予定なのでどうなるのかは不明。
ちなみに、アプリは前言っていたやつを完成させようと
思っています。思っているだけで
処理落ちにイラッときて頓挫するかもしれませんが・・・・。
いまのところリリースする予定でいます。

タグ

-y, 9年前, AndroidStudio, GUI, PC, Windows10, アプリ開発, エミュレータ, オブジェクト, ところ, やつ, 予定, 事例, 処理落ち, 思いのほか, 来年, 理由, 目処, 起動, 配置,

Notepad++からNetBeansにエディタを変更しました。

2015.06.08

Logging


Notepad++からNetBeansにエディタを変更しました。何故、変更したかというとこちらの方が開発しやすいから痒いところに手が届いている感じがします。ただ、良いところばかりでもないのです、無料ですからあまり言えないですが若干、起動が重たいと感じます。また、プロジェクトを設定するときに既存ファイルやリモート設定でプロジェクトを作ろうとするとファイルが多い場合動作が重いです。あとは、補完機能もありますしいろいろと便利な機能が備わっていますので総合的にはかなり使えるIDEです。今後、notepad++はちょっとした修正の時に使用し、ガリガリとコードを書く場合はNetBeansを使用すると思っています。ちなみに、Macにも同様にインストールしてみた結果、Macのほうが相性が良いように感じました。JavaってMacの方が相性が良いのかぁ?
「いろいろとしたい事があります、Webでちょっとしたものを作りたい。Androidアプリも作りたいとか、Visual Studioでちょっとしたものを作りたいとか・・・やりたい事はいっぱいあるものの。基本、ひとりで動いているので捗らないのです。やはりそう言う仲間がいれるとぜんぜん違うだろうなと感じてしまう。今日このごろですが・・・・。一人でも出来る人はできるから一概には言えないのですけどね。」とこの頃、ボヤいてます。
 

タグ

Androidアプリ, java, Mac, NetBeans, Notepad, Visual Studio, エディタ, かなり使えるIDE, コード, ひとり, プロジェクト, リモート設定, 今日このごろ, 修正, 多い場合動作, 既存ファイル, 痒いところ, 相性, 補完機能, 起動,