masomi79の日記 – Just another Front-end Engineer

19/10/2019

CentOSにnode.jsをインストールする

$ node --version

-bash: node: コマンドが見つかりません

$ curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
[sudo] パスワード:

## Installing the NodeSource Node.js 8.x LTS Carbon repo…

## Inspecting system…

+ rpm -q –whatprovides redhat-release || rpm -q –whatprovides centos-release || rpm -q –whatprovides cloudlinux-release || rpm -q –whatprovides sl-release
+ uname -m

## Confirming “el7-x86_64” is supported…

+ curl -sLf -o /dev/null ‘https://rpm.nodesource.com/pub_8.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm’

## Downloading release setup RPM…

+ mktemp
+ curl -sL -o ‘/tmp/tmp.XOyX3qzAtS’ ‘https://rpm.nodesource.com/pub_8.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm’

## Installing release setup RPM…

+ rpm -i –nosignature –force ‘/tmp/tmp.XOyX3qzAtS’

## Cleaning up…

+ rm -f ‘/tmp/tmp.XOyX3qzAtS’

## Checking for existing installations…

+ rpm -qa ‘node|npm’ | grep -v nodesource

## Run `sudo yum install -y nodejs` to install Node.js 8.x LTS Carbon and npm.
## You may also need development tools to build native addons:
sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn

[upla@os3-364-15302 ~]$ sudo yum install nodejs
読み込んだプラグイン:fastestmirror, langpacks
Determining fastest mirrors
epel/x86_64/metalink | 4.9 kB 00:00
* base: mirrors.cat.net
* epel: ftp.jaist.ac.jp
* extras: ty1.mirror.newmediaexpress.com
* remi-safe: ftp.riken.jp
* updates: ty1.mirror.newmediaexpress.com
base | 3.6 kB 00:00
epel | 5.4 kB 00:00
extras | 2.9 kB 00:00
nodesource | 2.5 kB 00:00
remi-safe | 3.0 kB 00:00
updates | 2.9 kB 00:00
(1/8): extras/7/x86_64/primary_db | 152 kB 00:00
(2/8): base/7/x86_64/group_gz | 165 kB 00:00
(3/8): nodesource/x86_64/primary_db | 48 kB 00:00
(4/8): remi-safe/primary_db | 1.6 MB 00:00
(5/8): epel/x86_64/updateinfo | 1.0 MB 00:01
(6/8): base/7/x86_64/primary_db | 6.0 MB 00:01
(7/8): updates/7/x86_64/primary_db | 1.9 MB 00:01
(8/8): epel/x86_64/primary_db | 6.8 MB 00:02
依存性の解決をしています
–> トランザクションの確認を実行しています。
—> パッケージ nodejs.x86_64 2:8.16.2-1nodesource をインストール
–> 依存性解決を終了しました。

依存性を解決しました

================================================================================
Package アーキテクチャー
バージョンリポジトリー容量
================================================================================
インストール中:
nodejs x86_64 2:8.16.2-1nodesource nodesource 16 M

トランザクションの要約
================================================================================
インストール 1 パッケージ

総ダウンロード容量: 16 M
インストール容量: 49 M
Is this ok [y/d/N]: y
Downloading packages:
警告: /var/cache/yum/x86_64/7/nodesource/packages/nodejs-8.16.2-1nodesource.x86_64.rpm: ヘッダー V4 RSA/SHA512 Signature、鍵 ID 34fa74dd: NOKEY
nodejs-8.16.2-1nodesource.x86_64.rpm の公開鍵がインストールされていません
nodejs-8.16.2-1nodesource.x86_64.rpm | 16 MB 00:02
file:///etc/pki/rpm-gpg/NODESOURCE-GPG-SIGNING-KEY-EL から鍵を取得中です。
Importing GPG key 0x34FA74DD:
Userid : “NodeSource ”
Fingerprint: 2e55 207a 95d9 944b 0cc9 3261 5ddb e8d4 34fa 74dd
Package : nodesource-release-el7-1.noarch (installed)
From : /etc/pki/rpm-gpg/NODESOURCE-GPG-SIGNING-KEY-EL
上記の処理を行います。よろしいでしょうか？ [y/N]y
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
警告: RPMDB は yum 以外で変更されました。
インストール中 : 2:nodejs-8.16.2-1nodesource.x86_64 1/1
検証中 : 2:nodejs-8.16.2-1nodesource.x86_64 1/1

インストール:
nodejs.x86_64 2:8.16.2-1nodesource

完了しました!

$ node -v
v8.16.2

node.jsのこと

PHPと同じところ
・サーバーサイド言語
違うところ
・非同期処理を行う
・単純な処理を同時に高速に行える

テストアプリ(my-app)を作ってみます

$ npx create-react-app my-app
npx: 91個のパッケージを7.62秒でインストールしました。

Creating a new React app in /[directory]/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts…

> core-js@2.6.10 postinstall /[directory]/my-app/node_modules/babel-runtime/node_modules/core-js
> node postinstall || echo “ignore”

> core-js@3.2.1 postinstall /[directory]/my-app/node_modules/core-js
> node scripts/postinstall || echo “ignore”

+ react@16.10.2
+ react-dom@16.10.2
+ react-scripts@3.2.0
added 1496 packages from 687 contributors and audited 904959 packages in 72.04s
found 0 vulnerabilities

Success! Created my-app at /[directory]/my-app
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd my-app
npm start

Happy hacking!

14/08/2019

Laravel でタグをそのまま出力してしまう時は

タグをエスケープさせずに出力する際は
bladeのなかで
{{ }} で囲む代わりに {{!! !!}}で囲う

29/06/201929/06/2019

コメントデータの取得を操作する　comments_template_query_args

wp-inclludes/comment-template.phpのなかにコメントの取得とソートに関する変数 &comment_argsがあります。

$comment_args = array(
　'orderby'                   => 'comment_date_gmt',
　'order'                     => 'DSC',
　'status'                    => 'approve',
　'post_id'                   => $post->ID,
　'no_found_rows'             => false,
　'update_comment_meta_cache' => false, // We lazy-load comment meta for performance.
);

このあといろいろごにょごにょして。
コメントのデータを取得しているようです。

フックの一覧を見るとcomments_template_query_argsというのがあるので（version4.5~）ここにフックしてorderbyやorderを変更できそうです。
あと未承認のコメントの表示とかもできそうです。

wp-inclludes/comment-template.phpの該当箇所が（↓）
現在のバージョンは5.1なので1444行目にありますね。

　$comment_args  = apply_filters( 'comments_template_query_args', $comment_args );
　$comment_query = new WP_Comment_Query( $comment_args );
　$_comments     = $comment_query->comments;

コメントを表示する場所で↑を変更します。

//コメント取得のための変数を納めた配列
function edit_comment_query( $comment_args ) {
　$comment_args['order'] = 'ASC';
  return $comment_args;
}
//comments_template_query_argsへフックする
add_filter( 'comments_template_query_args', 'edit_comment_query' );

とりあえず今日はここまで。。。

27/06/201901/07/2019

PHP(PDO)でMySQL(MariaDB)に接続してDBからデータを取得する

今さらながらPHP7対応。
なぜか５００エラーを連発してハマってしまったのでうまくいった書き方をメモしときます。


    function DBconnect()
    {
        $DBlink = mysqli_connect('yourdbhost.work', 'username', 'password');

        if (!$DBlink) {
            die('MYSQL接続エラー' . mysqli_error($DBlink));
        }

        mysqli_set_charset($DBlink, 'utf8');

        return $DBlink;
    }

    function DBselect($selectDB, $DBlink)
    {
        $db_selected = mysqli_select_db($DBlink, $selectDB);

        if (!$db_selected) {
            die($selectDB . 'データベース選択エラー' . mysqli_error($DBlink));
        }
    }

    function RunSQL($DBlink, $sql)
    {
        $result = mysqli_query($DBlink, $sql);

        if (!$result) {
            die('クエリーのエラー' . mysqli_error($DBlink));
        }

        return $result;
    }


    function h(string $string): string
    {
        return $string;
    }


    function myfunction()
    {

            $DBlink = DBconnect();
            DBselect('database', $DBlink);
            $records = RunSQL(
                $DBlink,
                "SELECT " .
                "*" .
                "FROM `table`" .
                "ORDER BY `key`;"
            );

            $result = [];

            while ($row = mysqli_fetch_array($records)) {
                //ここに処理を
            }
            return $result;

            mysqli_close($RDBlink);
    };

懐かしい感じですね。
これを↓のように変えさせてもらいました。


define('DSN', 'mysql:host=yourdbhost.work;dbname=dbname;charset=utf8');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');

try{
    $dbh = new PDO(DSN, DB_USERNAME, DB_PASSWORD,
     array(
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_EMULATE_PREPARES => false,
        )
    );

    $prepare = $dbh->prepare('SELECT * FROM table ORDER BY key');
    $prepare->execute();

    $result = $prepare->fetchAll(PDO::FETCH_ASSOC);

    foreach($result as $r){

      //ここで処理を

    }


} catch (PDOException $e){
    $error = $e->getMessage();
}

30/01/201819/10/2019

macへnodeをインストール

brew install node

ところが

node already installed, it's just not linked

インストールはできたけどリンクされてないから使えないよ！と。。
なおかつリンクを上書きするといいよ！

と言われるので

brew link --overwrite node

とするも、弾かれてしまう。。

下記で解決！

brew uninstall node
　いったんアンインストール
brew update
brew upgrade
　Homebrewを最新に
brew cleanup
　いらないものを消す
brew install node
　もっかいインストール
sudo chown -R $(whoami) /usr/local/
　リンクが書いてあるファイルを上書きできるように権限を変更
　
brew link --overwrite node
　リンクを上書き
brew postinstall node
　これは何かよくわからない

02/11/2017

OSアップデートしてsassが使えなくなったら

masomi792017-11-02

症状::

新規案件に着手する前にOSXをHigh Sierraにアップデートしたらsass が使えない！急いでるのに！

sass -v

バージョン確認しようとしただけで。。。

-bash: /usr/local/bin/sass: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory

とおこられる。

対策::

1.Xcodeをアップデート
App Storeから行います。

2.ターミナルからRubyを再インストール

brew install rbenv ruby-build

3.sass とcompassを /usr/local/binへインストール

sudo gem install -n /usr/local/bin sass
sudo gem install -n /usr/local/bin compass

というわけでアップデートは慎重に。。。

21/06/201629/06/2019

記事の抜粋を表示する

<?php echo mb_substr(strip_tags($post-> post_content), 0, 75); ?>

04/03/2016

/wp 以下に作成したWPサイトのトップページだけは独立したページを使用します。

↑のindex.htmlをトップに表示させます。

1) テンプレートファイル template_toppage.phpを作成します。
内容は以下の通り

<?php
/*
Template Name: Top Page
*/
readfile(ABSPATH . '/index.html');
?>

ABSPATHはwordpressがインストールされたフォルダのパスを示します。
ですのでindex.htmlがwp/フォルダ以下にあっても上記の指定でOKです。

2) WP管理画面から固定ページを新規に作成します。
タイトルは「トップページ」などてきとうでかまいません。

テンプレートに先ほど作成したTop Pageが表示されますのでこれを選択します。

3) 「設定」=> 「表示設定」=>「フロントページの表示」で「固定ページ」にチェックをし、先ほど作成したページを選択します。