ロゴ
  • about
  • Contact
    カテゴリ

    Hasura

    時間undefined/undefined/undefined

    Hasura Cloudで、HTTPヘッダーを付与するメモ

    <h2 id="h8909e47bed">Hasura Cloudのprojectsから、該当projectの右上歯車マーククリック</h2><p><br><img src="https://images.microcms-assets.io/assets/f48da51fb8474861bea5ca6dade0c13c/e9e562e1c08c4bd399323e655759cc8a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-28%2017.28.45.png" alt=""><br></p><h2 id="h846fd4aff6">Env varsからNew Env Varクリック</h2><p><br><img src="https://images.microcms-assets.io/assets/f48da51fb8474861bea5ca6dade0c13c/173d7838b20b4b3eb263273971ebe379/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-28%2017.31.45.png" alt=""><br></p><h2 id="h4b6a1322a8">HASURA<em>GRAPHQL</em>ADMIN_SECRETのValueを登録</h2><p><br><img src="https://images.microcms-assets.io/assets/f48da51fb8474861bea5ca6dade0c13c/a5eaaf8b727242f0bd6e103dcbcc8300/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-28%2017.35.29.png" alt=""><br><br>これだけで、x-hasura-admin-secretが追加されるので、次回のリクエストから、<br>このheader情報を付与する必要があります。<br><img src="https://images.microcms-assets.io/assets/f48da51fb8474861bea5ca6dade0c13c/1783e05cb7a14204b3db277b47ad4285/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-28%2017.36.28.png" alt=""><br></p><h2 id="h1b3377c92c">.env作成</h2><p>HASURAGRAPHQLADMIN_SECRETと同じものを入力<br>.env.local</p><pre><code>NEXT_PUBLIC_HASURA_ADMIN=*****</code></pre><p><br></p><h2 id="h7ac1f7b5ea">ApolloClientにheaders追加</h2><pre><code>const createApolloClient = () =&gt; { &nbsp; return new ApolloClient({ &nbsp; &nbsp; ssrMode: typeof window === 'undefined', &nbsp; &nbsp; link: new HttpLink({ &nbsp; &nbsp; &nbsp; uri: 'https://basic-hasura-lesson00.hasura.app/v1/graphql', &nbsp; &nbsp; &nbsp; headers: { &nbsp; &nbsp; &nbsp; &nbsp; 'x-hasura-admin-secret': process.env.NEXT_PUBLIC_HASURA_ADMIN &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; }), &nbsp; &nbsp; cache: new InMemoryCache(), &nbsp; }) }</code></pre><p><br>こんな感じでOKでした。</p>

    カテゴリ

    WordPress

    時間undefined/undefined/undefined

    フォームからお問い合わせがあった際に、自動投稿する方法

    <p>wordpressのサイトで、お見積りのお問い合わせがあった場合、その内容を自動投稿する方法を調べました。<br><br>参考はこちら<br><a href="https://www.will3in.co.jp/frontend-blog/article/create-post-and-reflect-acf-group-field-from-contactform7/" target="_blank" rel="noopener noreferrer">https://www.will3in.co.jp/frontend-blog/article/create-post-and-reflect-acf-group-field-from-contactform7/</a><br></p><h2 id="h00b8af9eb7">仕様</h2><ul><li>wordpress</li><li>contactform7(フォーム2種類設置)</li><li>acfでカスタムフィールド設定</li><li>カスタム投稿タイプ</li><li>カスタムタクソノミ</li></ul><p><br></p><pre><code>// フォーム送信完了後実行 add_action('wpcf7_mail_sent', 'wpcf7_insert_post');</code></pre><p>cf7にwpcf7<em>mail</em>sentというアクションフックがあるのでこれを利用します。<br>これで、フォームの送信が完了した後に、wpcf7_insert_post関数を実行できます。<br><br>wpcf7<em>insert</em>post関数を作成します。</p><pre><code>function wpcf7_insert_post($contact_form){ &nbsp;&nbsp; &nbsp; // 送信元のform id取得 &nbsp; $form_id = $contact_form-&gt;id(); // 特定のフォームからのみ実行 &nbsp; if($form_id == "2189"){ &nbsp; &nbsp; // おまじない &nbsp; &nbsp; $submission = WPCF7_Submission::get_instance(); &nbsp; &nbsp; if($submission){ &nbsp; &nbsp; &nbsp; // フォーム内容取得 &nbsp; &nbsp; &nbsp; $form_data = $submission-&gt;get_posted_data(); &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // 投稿内容セット &nbsp; &nbsp; &nbsp; $new_post = array( &nbsp; &nbsp; &nbsp; &nbsp; "post_type"=&gt;'item', //カスタム投稿タイプ指定 &nbsp; &nbsp; &nbsp; &nbsp; 'post_title' =&gt; $form_data['your-type'], //記事タイトル設定 &nbsp; &nbsp; &nbsp; &nbsp; 'post_content' =&gt; $form_data['your-textarea'], //記事内容設定 &nbsp; &nbsp; &nbsp; &nbsp; 'post_status' =&gt; 'publish', //記事を公開状態に &nbsp; &nbsp; &nbsp; ); &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // 新規投稿、投稿ID取得 &nbsp; &nbsp; &nbsp; $post_id = wp_insert_post($new_post); &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // タームにチェック &nbsp; &nbsp; &nbsp; wp_set_object_terms($post_id, $form_data['your-type'], 'genre'); &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // カスタムフィールド追加 &nbsp; &nbsp; &nbsp; if(!is_wp_error($post_id)){ &nbsp; &nbsp; &nbsp; &nbsp; add_post_meta($post_id, 'price', $form_data['your-textarea']); &nbsp; &nbsp; &nbsp; &nbsp; add_post_meta($post_id, 'publish', $form_id); &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; } &nbsp; } }</code></pre><p><br>これでお問い合わせがあった際、必要な項目を抜き出して、自動投稿することができます。<br></p>

    カテゴリ

    コーディング

    時間undefined/undefined/undefined

    next.js .env.localについて

    <p>Next.jsバージョン9.4以降から、環境変数の取り扱いが変更になっているようです。<br>サーバー側でに渡す環境変数は、.env.localで設定すれば良くて、<br>クライアント側からアクセスしたい環境変数は、.env.localに記載後、<br>next.config.jsで再度、設定するといい<br><br>.env.local</p><pre><code>API_KEY=XXXXXXXX END_POINT=XXXXXXX SLACK_WEBHOOK_URL=XXXXXXXXX</code></pre><p><br>next.config.js</p><pre><code>module.exports = {&nbsp; &nbsp; env:{&nbsp; &nbsp; &nbsp; SLACK_WEBHOOK_URL:process.env.SLACK_WEBHOOK_URL &nbsp; } };</code></pre><p><br><br>あれ、これでもconsoleから見えちゃう。。。</p>

    カテゴリ

    コーディング

    時間undefined/undefined/undefined

    firebase cloud functions 無料プランについて

    <p>firebaseの無料プランで学習用にcloud functionの設定をしている際、</p><pre><code>firebase deploy</code></pre><p>すると、</p><pre><code>Error: Cloud Functions deployment requires the pay-as-you-go (Blaze) billing plan. To upgrade your project, visit the following URL:</code></pre><p><br>と有料プランにしないと、使えないよと言われます。<br>対策としては、<br>functionsフォルダのpackage.jsonの下記部分を</p><pre><code>&nbsp;"engines": { &nbsp;&nbsp;"node": "10" &nbsp;},</code></pre><p><br></p><pre><code>&nbsp;"engines": { &nbsp;"node": "8" &nbsp;},</code></pre><p><br>に変更することで、2021-03-15までは使えるようです。</p>

    カテゴリ

    コーディング

    時間undefined/undefined/undefined

    クロージャについて

    <h1 id="h5c469d82e8">・クロージャー</h1><p>定義・・・レキシカルスコープの変数を関数が使用している状態<br><br><br></p><h3 id="h20feb2cff2">ケース01・・・プライベート変数の定義</h3><p>グローバルに定義するとどこからでも参照できるため、関数スコープ内に変数を定義<br><br>・グローバルに定義</p><pre><code>let num = 0 console.log("Global", num); increment() increment() increment() function increment() { &nbsp; &nbsp; num = num + 1 &nbsp; &nbsp; console.log(num); }</code></pre><p><br>・クロージャー使用</p><pre><code>function incrementFactory() { &nbsp; &nbsp; let num = 0 &nbsp; &nbsp; function increment() { &nbsp; &nbsp; &nbsp; &nbsp; num = num + 1 &nbsp; &nbsp; &nbsp; &nbsp; console.log(num); &nbsp; &nbsp; } &nbsp; &nbsp; return increment } const increment = incrementFactory() increment() increment() increment()</code></pre><p><br></p><h3 id="hab1d653a0d">ケース02・・・動的関数</h3><pre><code>function addNumberFactory(num) { &nbsp; &nbsp; function addNumber(value) { &nbsp; &nbsp; &nbsp; &nbsp; return num + value; &nbsp; &nbsp; } &nbsp; &nbsp; return addNumber; } const add5 = addNumberFactory(5); const result = add5(5); const result = add5(10);</code></pre><p><br>変数numを固定した関数を生成できます<br><br><br></p>

    screew

    カテゴリ

    • Hasura
    • WordPress
    • デザイン
    • コーディング
    • About
    • Contact
    • カテゴリ

    © All rights reserved