2019-07-15

Angular デプロイの流れ　忘備録

Angular デプロイの流れ

herokuでは package.jsonをインストールするだけ
post install ->ビルドが通る -npm start が実行される
expressのサーバーが起動される Railsのpumaのようなイメージ -ルーティングはexpressがしている
表示したあとのruotingはAngularがしている

npm start はrails sのイメージ

nodeのバージョンが違うのにexpressをinstall したのが原因?

かなり環境が汚れてしまった。

//cacheをクリヤしなさいというので
  npm cache clean
  404  npm cache verify
//angularのバージョンが違うのでglobalにインストール
  405  npm install -g @angular/cli
  406  npm install
  407  git status
  408  git add .
  409  git commit -m "fix dependency"
  410  ng -v
  411  npm update --help
//updateしたけどうまくいかない
  412  npm update --save ng
  413  ng -v
//ローカルのangularをuninstall
  414  npm uninstall @angular/cli --save
//ローカルに再度install
  415  npm install --save @angular/cli
  416  ng -v
  417  npm install
  418  git add .
  419  git commit -m "reinstall angular"
//依存関係がおかしくてcodelyzerがインストールされていないので、ローカルにinstall
  422  npm install --save codelyzer
//lint コンパイル出来るようになった
  423  ng lint
  424  git status
  425  git add .
  426  git commit -m "npm install codelyzer"
//herokuへデプロイ
  427  git push heroku heroku-deploy:master
  428  heroku -v
  429  history

2019-07-13

Xcode異なるバージョンを利用 swift3->4へ変更

目的久しぶりにXcode開いたらバージョンが古かった。 swift3->4へバージョンを変更したい。

xcode10.2 はswift4->5しか変更できない。

よってxcode10.1をダウンロードする。
developerへログインして
https://developer.apple.com/download/more/

まずダウンロードする。最新版のxcodeの名前を変更するとややこしいので、デスクトップへDLしたファイルを解凍する。この時にxcodeは閉じておくこと。

そして、そのアプリ名名前を変更して、APPフォルダへ移動しておく。

このようにして、異なるxcodeを管理できる。

f:id:happy_teeth_ago:20190713153433p:plain

仲良く共存できました。

2019-07-12

heroku 独自ドメイン設定

公式サイト devcenter.heroku.com

//herokuへログインする
heroku login

//独自ドメイン設定
$ heroku domains:add thxxxixxxx.com


 ›   Warning: heroku update available from 7.22.9 to 7.26.2.
Adding thainosuke.com to ⬢ intense-crag-88861... done
 ▸    Configure your app's DNS provider to point to the DNS Target
//これをエイリアスに追加する　ムームードメインにて 
▸    solid-xxxxx-io05skaehxxxxmxzn6syvrcm7kf.herokudns.com.
 ▸    For help, see https://devcenter.heroku.com/articles/custom-domains

The domain thainosuke.com has been enqueued for addition
 ▸    Run heroku domains:wait 'thainosuke.com' to wait for
 ▸    completion

サブドメイン設定

これはムームードメインで設定

#### サブドメインに　www と入力して、同上のドメインをCNAMEで指定する

PointDNS | Heroku Dev Center

ここを見るとwwwをCNAMEで追加している。これでリダイレクトされる。これはDNS側の設定となる。以上

2019-07-10

wordpress query表示忘備録

wordpressのgitはwp-contentで行うこと理由:uploadやpluginsなども管理できるので。

投稿記事を表示

<?php query_posts('post_type=menu'); ?>
<?php get_template_part('top_loop'); ?>

<?php wp_reset_query(); ?>

query_postsは使うべきではない。メインクエリーを書き換えるので、、

wpdocs.osdn.jp

get_posts を使う sample

<?php $args = array(
    'posts_per_page'   => 5,
    'offset'           => 0,

//categoryはidを指定
    'category'         => '',
//category_nameは文字列指定
    'category_name'    => '',
    'orderby'          => 'date',
    'order'            => 'DESC',
    'include'          => '',
    'exclude'          => '',
    'meta_key'         => '',
    'meta_value'       => '',
    'post_type'        => 'post',
    'post_mime_type'   => '',
    'post_parent'      => '',
    'author'       => '',
    'post_status'      => 'publish',
    'suppress_filters' => true 
);
$posts_array = get_posts( $args ); ?>

リストの作成

<ul>
<?php


$args = array( 'posts_per_page' => 5, 'offset'=> 1, 'category' => 1 );

$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
    <li>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
<?php endforeach; 
wp_reset_postdata();?>

</ul>

2019-07-08

wordpress theme rosa 設定

この動画がわかりやすい

親に対して子供のpageがあるのがポイント

www.youtube.com

ドキュメント

https://pixelgrade.com/docs/rosa/header-and-footer/managing-the-footer-area-widgets/

2019-07-08

ポートフォリオ一覧修正 wordpress 忘備録

カスタム投稿タイプを作成したので

archive-portfoloio.phpを見に行っている

<?php get_header(); ?>
<?php get_template_part( 'title' ); ?>
<?php $result = startit_qode_blog_archive_pages_classes(startit_qode_get_default_blog_list()); ?>
<div class="<?php startit_qode_module_part($result['holder']); ?>">
<?php do_action('qode_startit_after_container_open'); ?>

    
    <div class="<?php startit_qode_module_part($result['inner']); ?>"> 
        <?php startit_qode_get_blog(startit_qode_get_default_blog_list()); ?>
    </div>
    
<?php do_action('qode_startit_before_container_close'); ?>
</div>

<?php get_footer(); ?>

startit_qode_get_default_blog_list 関数定義

//ファイル場所 framework/modules/blog/blog-functions.php

//blog_listを返却しているだけ
    function startit_qode_get_default_blog_list() {

        $blog_list = startit_qode_options()->getOptionValue('blog_list_type');
        return $blog_list;

    }

探す $ grep getOptionsByType -rl

framework/lib/qode.framework.php

    public function getOptionValue($key) {
        global $qode_startit_options;

        if(array_key_exists($key, $qode_startit_options)) {
            return $qode_startit_options[$key];
        } elseif(array_key_exists($key, $this->options)) {
            return $this->getOption($key);
        }

        return false;
    }


   public function getOption($key) {
            if(isset($this->options[$key]))
        return $this->options[$key];
      return;
    }

array_key_exists は第二引数の配列の中に、第一引数があるか bool型

startit_qode_get_blog 関数定義

PATH framework/modules/blog/blog-functions.php

 function startit_qode_get_blog($type) {

        $sidebar = startit_qode_sidebar_layout();

        $params = array(
            "blog_type" => $type,
            "sidebar" => $sidebar
        );
        startit_qode_get_module_template_part('templates/lists/holder', 'blog', '', $params);
    }

}

startit_qode_get_module_template_part 関数定義

    function startit_qode_get_module_template_part($template, $module, $slug = '', $params = array()) {
        $template_path = 'framework/modules/'.$module;

        startit_qode_get_template_part( $template_path . '/' . $template, $slug, $params);

ファイルはここ f:id:happy_teeth_ago:20190709130717p:plain

ここにhtmlが記載 framework/modules/blog/blog-functions.php

     startit_qode_get_module_template_part( 'templates/lists/post-formats/' . $group . '/' . $post_format, 'blog', $slug, $params);

ようやく見つける
standard.phpがあたっている

cssはこれ f:id:happy_teeth_ago:20190713003727p:plain

2019-07-04

Angular デプロイ忘備録

大変参考になりました。ありがとうございます。

Angular CLI で作ったアプリを Heroku にデプロイして動くようにした - Corredor

express を利用する

expressとは、jsのフレームワーク。ルーティングHTTPヘルパー（リダイレクト、キャッシュ）、14以上のテンプレートエンジンをサポートする。(画面の描画ということ。)

# Express をインストールして dependencies に追加する
$ npm install --save express

--save は何をしているかと言うと、ローカルにインストールするということ。グローバルにインストールすると、コマンドとして利用できる。そのかわりに、グローバルのバージョンが固定されてしまい、別のバージョンの利用のとき、切り替えが発生して面倒です。開発の時に複数で開発する時は、package.jsonに記載されないので、不便ですね。

ローカルインストールの時は、アプリケーションフォルダの中に、node_modules ディレクトリが作成され、そこにパッケージがインストールされる。

--save-dev というのもあり、それは　package.json の devDependencies に追記されます。

dependencies には5種類あります。

dependencies
devDependencies
peerDependencies
optionalDependencies
bundledDependencies

dependencies にあるものは npm install --save でインストールできます。別の環境でも同じ環境を構築できるので便利です。

devDependenciesには　開発時のみ利用できるものを入れておくようです。具体的には、テストツールや、ビルドツール、タスクラナーなどです。

しかし、Herokuへデプロイする時は、devDependenciesに記載されているものは、インストールされない。ビルドがうまくいかないようです。それで、ng build コマンドに必要なものをすべて dependencies へ移動しておきます。

package.jsonに engins の記載を追加

  "engines": {
    "node": "12.x",
    "npm": "6.9.x"
  }

Herokuが npm install する時にここを見るので記載します。

package.json 書き方について

  "scripts": {
    "ng": "ng",
    "start": "ng serve",

この場合 shell script とエイリアスコマンドを指定できます。
エイリアスコマンドが : の左側、shell script が : の右側この場合 ng start とコマンドを入力すると ng serve が実行されます。

参考にさせていただきました。ちゃんと使い分けてる? dependenciesいろいろ。 - Qiita