MarkDown 差分,表の表示

+ と - をソースの中で表示したい

f:id:happy_teeth_ago:20200828152624p:plain

解答 言語の箇所に diffを指定

f:id:happy_teeth_ago:20200828152814p:plain

const createText = () => {
    const p = document.getElementById('text');
    const rnd = Math.floor(Math.random() * textLists.length);
    
-   p.textContent = textLists[rnd];
    

+   textLists[rnd].split('').map(value => {
+       p.appendChild(value);
+   })

};

表を表示する

f:id:happy_teeth_ago:20200828172320p:plain

|  TH  |  TH  |
| ---- | ---- |
|  TD  |  TD  |
|  TD  |  TD  |

VSCode Markdown 画像表示されない

画像が表示されなかった

環境

MAC OSX 10.15.6

VSCode 1.48.2

plugin markdown-preview-enhanced

f:id:happy_teeth_ago:20200826072227p:plain

shd101wyy.github.io

原因 ファイルpathをコピーして、途中だけ変更するとリンクが切れるようだ

![PHP 公式サイト](/image/chapter_01/section_01/1_03.jpg)

表示されるようになりました。

f:id:happy_teeth_ago:20200826071849p:plain

heroku error W: Not using locking for read only lock file /var/lib/dpkg/lock-frontend

目的: Heroku環境で Laravel でimagemagickを利用したいと思った

原因: herokuはsudoの制限が数多くかけられている

多くのパケージがインストールできない。

参考資料

unix.stackexchange.com

エラーの例

imagemagick is already the newest version (8:6.9.7.4+dfsg-16ubuntu6.8).
W: Not using locking for read only lock file /var/lib/dpkg/lock-frontend
W: Not using locking for read only lock file /var/lib/dpkg/lock
E: Archives directory /var/cache/apt/archives/partial is missing.

buidl packという方法が備えられている

公式サイト

devcenter.heroku.com

1.ターミナルからherokuのコマンドを叩く

imagemagickのビルドパックを作っている人がいた

urlをheroku buildpacks:add すれば良い

f:id:happy_teeth_ago:20200824100408j:plain

$ heroku buildpacks:add  https://github.com/heroku/heroku-buildpack-apt

2.Aptfileをプロジェクトフォルダに追加

rootに追加する

imagemagickとだけ記載する

imagemagick

3.デプロイする

git push heroku master

参考にさせていただきました。 https://qiita.com/haru1843/items/210cb08024195b9d1bc8

WordPress アナリティクスID設定

アナリティクスIDが無いと思ったらこんなところに移動していた

f:id:happy_teeth_ago:20200820195406j:plain

iOSやAndroid WEBどこでも設定できるようになった。

f:id:happy_teeth_ago:20200820195525j:plain

All in one SEOのプラグインを入れてIDを設定

f:id:happy_teeth_ago:20200820195710j:plain めでたしめでたし

PHP/Laravel 環境構築初期やgit clone直後でエラーが出たときに読むべし

Laravel環境構築から

.envファイルが必要

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:r2........CcyhuNN/ipAFwze6bfnjfyQjz8Iv8=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=sqlite

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

コマンド

composer install

cp .env.example .env

php artisan key:generate

php artisan key:generateは何をしているのか?

暗号化の際に利用している

アプリケーションキーにランダムな文字列を設定することです
キーは.env環境ファイルに設定されます。
アプリケーションキーが設定されていなければ、
ユーザーセッションや他の暗号化済みデーターは安全ではありません!

DBをsqliteにする

まずdatabase.sqliteファイルを作成

touch database/database.sqlite

.envのDBをsqliteに変更

DB_CONNECTION=sqlite
//user, password等は削除かコメントアウト

マイグレーション

php artisan migrate

sudo apt install php-pdo

php-pdoとは

PHPで、DBとの間を取り持つもの

ざっくりいうとこんなイメージです。 RailsもActiveRecordというものを使ってDBを操作します。 Swiftも標準ではcoredataを利用して sqliteを利用します。 DBは文字コードやSQL文も微妙に違います。 それらの差分を吸収するためのものです。 DBが変更になっても、プログラマはコードを変更することがありません。

参考

$dbh = new PDO(
    'DSN',
    'ユーザー名',
    'パスワード',
    array(
        変更したい属性 => 値,
        変更したい属性 => 値,
    )
);

could not find driverとエラー

原因 config がキャッシュを持っている

php artisan tinkerが便利

//現在を確認 shellにログインする
php artisan tinker

>>> config('database')
=> [
     "default" => "sqlite",
     "connections" => [
       "sqlite" => [
         "driver" => "sqlite",
         "url" => null,
         "database" => "/home/ubuntu/environment/N-RET/database/database.sqlite",
         "prefix" => "",
         "foreign_key_constraints" => true,
       ],
       "mysql" => [
         "driver" => "mysql",
         "url" => null,
         "host" => "127.0.0.1",
         "port" => "3306",

ctr + C で抜ける

tinkerの使い方はこちら

www.larajapan.com

php artisan config:clear

//php-pdoをインストール
sudo apt install php-pdo

//エラー
php package 'php-sqlite' has no installation candidate

//sqlite3もインストール
sudo apt install php-sqlite3

//マイグレーション
php artisan migrate

//サーバー起動
php artisan serve --port=8080

//seedを実行
php artisan db:seed

seedファイルの場所

f:id:happy_teeth_ago:20200819145404j:plain

php artisan storage:link でLaravelでimgを管理

sudo apt-get install php-imagick

//pathがおかしかったので
<img src="/img//strage.....>
php artisan storage:link

インストールされているかどうかは、phpのinfoを見れるようにする

これを表示するようにする

  <?php
          echo  phpinfo() ;
   ?>

Laravel 画像ファイル upload, updateするときの処理

まずuploadする

パッケージが必要

//パッケージのインストール
sudo apt-get install php-imagick

//laravelで保存領域を確保
php artisan storage:link

画像ファイルの保存処理

store アクション

public function store(Request $request,Material $material)
    {
        $material = new Material();
        if ($request->hasFile('photo')) {
            //  Let's do everything here
            if ($request->file('photo')->isValid()) {
                //
                $validated = $request->validate([
                    'image' => 'mimes:jpeg,png',
                ]);//拡張子extension
                $extension = $request->photo->extension();
                $name = "group-image-".time().".".$extension;
                
                $request->photo->storeAs('/public', $name);
                
                $url = Storage::url($name);
                // $file = File::create([
                //   'name' => $name,
                //     'url' => $url,
                // ]);
                $material->photo =  $url;
              
               
            }
        }
        
        $material->group_id = $request->input('group_id');
        
        $material->main_word = $request->input('main_word');
        
        $material->english = $request->input('english');
        
        $material->japanese = $request->input('japanese');
        
        // $material->photo = $request->input('photo');
        
        $material->save();
        
        $group = Group::find($material -> group_id);
        
        return redirect()->route('material.show',$group);
    }

stackoverflow.com

Controller indexアクション

   public function index(Material $material)
    {
        // $groups = $group->get();
       
       $materials = Material::orderBy('created_at','DESC')->get();
        return view('materials.index',compact('materials'));
    }

UPDATEは、inputタグに enctypeを指定する

//enctypeがないと、コントローラーに送信されない
  <form enctype="multipart/form-data" action="{{ route('material.update',$material) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="card">

multipart/form-dataとは

データをマルチパートデータとして送信します。
フォーム内にファイルの送信欄を配置する場合は、この形式を指定しておく必要があります。

画像データをformで送付するときには必要ということ

WordPress 多言語サイト作成手順

wp-config.phpをバクアップ

wp-config.php に追記
/ 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 / よりも上に次の行を追加します。

define ('WP_ALLOW_MULTISITE', true);

この後マルチサイトを作るためにサイトネットワークの作成をしていくのですが、プラグインが有効になっていると失敗する可能性があるので、 プラグインは全て無効化 させておきます。

サイトurlの変更 https://にしておく

f:id:happy_teeth_ago:20200815203713j:plain

「ツール」のメニューの中に「サイトネットワークの設定」という項目を選択します

f:id:happy_teeth_ago:20200815133744j:plain:w300

注意 サブドメイン型とサブディレクトリ型を調査しておくこと!

x-serverはサブディレクトリ型 ロリポップはサブドメイン型 これ間違うと、はじめからやり直しになる。 f:id:happy_teeth_ago:20200815142747j:plain

パーマリンクをカスタム設定にしておく

f:id:happy_teeth_ago:20200816173238j:plain

wp-configに追加 管理画面に出てくるものをコピペする

f:id:happy_teeth_ago:20200815135415j:plain

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', true);
define('DOMAIN_CURRENT_SITE', 'happynote.biz');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

生成された mod_rewrite ルールを .htaccess ファイルに追加します。

WordPressの既存のmod_rewriteルールがある場合は置き換えます。

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

ちなみにXserverではこうなります

SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>



SetEnvIf Request_URI ".*" AllowCountry
SetEnvIf Request_URI ".*" AllowRestApi

# BEGIN WordPress
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]
</IfModule>
# END WordPress

ログアウトして、再度ログインします

f:id:happy_teeth_ago:20200815140008j:plain

キャッシュが残っていると、リダイレクト地獄に入るので、シークレットモードでログインします。

f:id:happy_teeth_ago:20200815204402j:plain:w300

サイトを追加します

f:id:happy_teeth_ago:20200815205049j:plain

あとは言語ごとに、テーマ等を設定します。テーマ、プラグインはサイトネットワーク管理者のみがインストールできます。

サイトネットワーク管理者がadmin権限になります。