Web Design Articles

  • 1808

Nuxt.js asyncDataを使ってAPIアクセスしたらconnect ETIMEDOUTになった

Nuxt.js asyncDataを使ってAPIアクセスしたらconnect ETIMEDOUTになった 結論 DNSの名前解決に失敗している 理由 asyncDataはリクエスト元がサーバーサイドなので、自分自身のサーバーに対してリクエストしているのだけれど、そのリクエスト指定がフルのURL(https://domain-name.com/api/xxxxx)のような形だったのですがそのサーバーの前段にconohaのロードバランサーを入れていました。 その結果、DNSの名前解決先としてはロードバランサーのIPを示しているため結果、ロードバランサーの後ろにあるNuxt.jsサーバーからロードバランサーにapiリクエストが 飛ぶという問題でした 解決策 APIサーバーを別に立てて、別ドメインにしました。 Firebaseのfunctionsが便利でしたので、functionsにnodeサーバーでAPIを構築し解決です。

  • 1835

Nuxt.js のエラー 「Failed to execute 'appendChild' on 'Node': This node type does not support this method」

nuxt-linkで遷移した場合には問題ないのですが リロードやURLを直接叩いた場合に以下のようなエラーが発生します DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.appendChild原因としては、クライアントサイドとサーバーサイドのDOMに差異が発生しているためのようです。 特にv-ifを利用するとほぼ発生するように思います [...]

  • 1837

ティラノスクリプトにfirebaseを連携させて自在に操る

前回、シナリオゲームが手軽に作れるティラノスクリプトに強引にVue.jsを入れることをやりましたが。 次は、、、Firebaseを入れたい！！ やはり本格的なWebアプリケーションを作るためにはデータベースとの連携は必須。そしてFirebaseのFirestoreならとても扱いやすい。 もし、Firebaseとティラノスクリプトが掛け算できるならどんなものでも作れそうですよね。 それではいきましょう！！ Firebaseを初期化する 呼び出す！ まとめ Firebaseを初期化する 例によって強引にindex.htmlにscriptタグを埋め込みます。 firestoreとauthを使いたかったのでそれも入れています。 first.ksなどで初期化します。 ;Firebase [iscript] console.log("Init firebase"); // Initialize Cloud Firestore [...]

  • 1838

ティラノスクリプトに強引にVueを入れてみる

こんにちは、ノベルゲームをHTML5を用いて気軽に作成できるティラノスクリプトをご存知でしょうか？tyrano.jp 最近、ノベルゲーム的な表現がしたくて触っているのですが。 使われているJsライブラリがjQueryになっていて、やはりVueの中で実行したい！ という思いが強くなって来たので、強引にVueを入れてみました。 強引にVueを入れる方法 結果 Vueを操ってみる まとめ 強引にVueを入れる方法 やり方はとてもシンプルです。 index.htmlにVueのタグを入れるだけです cliを入れたり、Nuxt.js上で実行したかったのですが、ティラノスクリプトはかなり複数のファイルとリンクしておりVue化するには色々と問題が多かったため、シンプルにタグを入れる方法でいきます。こんな感じで、index.htmlの上の方でcdn版のvueを読み込みます。 そして、bodyタグの下の方でvue用のdivを定義して。あとはcssでposition:absoluteとかでレイヤー化しておきます。 次に、Vueをインスタンス化する必要がありますが。やり方としては、ティラノスクリプトはJSを実行できる[iscript]タグを利用します。 例えば,最初に実行されるfirst.ksや、シナリオ読み込み時に必ず実行されるmake.ksに次のように書きます 結果 こんな感じで、Hello Vue!!が出てくる Vueを操ってみる Vueを操るには[iscript]タグを利用していきます。先ほどの部分を少し改変します。first.ksでnew [...]

高速で動くWordPress環境を探して辿り着いた「KUSANAGI」に変えたら超速いし・安いし・データの転送容量制限ないしでかなり良かった

こんにちは、のすけです。WordPress構築用のサーバーは各社から色々なものが出ていて「WordPress　おすすめ　サーバー」なんて検索すると色々出てきます。 例えば有名どころだと、エックスサーバーやwpx なんかは昔か速いと評判だったりします。実際速いです。そのほか、速そうなのか「高速を追求したレンタルサーバー」と謳うヘテムルやLite Speed(なにそれ？)を使っているmixhostは速そうな感じです。それでも、配信データ量の制限があったり、値段がちょっと高いという点があって躊躇します。 あとNodeサーバーも立てたいなとか。。 そんな時出会ったのが、こちら【Conoha】です。クラウド型ホスティングサービス Conoha VPS。レンタルサーバーも一応提供されていて Conoha WINGは国内最速を謳っていたりします。が今回はVPSの方です。公式キャラクターは「このはちゃん」どうでもいいですねw。で、このConohaですがなんと転送量に課金がありません。基本的にはいくらでも使えます。さらに！！高速にWordPressが動作するサーバーイメージ「KUSANAGI for ConoHa」を提供しています。このKUSANAGIは WordPressの実行時間3ミリ秒台、秒間1000リクエストをページキャッシュ非使用で実現する世界最高速クラスのWordPress実行環境です とのことで、かなり速そうな感じ。早速使ってみました。結果から言うと、Conohaの月900円の1Gプラン(推奨は4Gプランにもかかわらず)でかなり高速でした。3秒と言うのはスマホで表示されるまでの時間なので、サーバ応答時間はもっと速くて0.029秒とかなり高速な結果が出ています。 Conohaでサーバを立てる KUSANAGIの初期設定をする URLの設定をする WordPressのインストール KUSANAGIの設定 表示してみる おまけ Conohaでサーバを立てる 基本的にはKUSANAGIの使い方｜VPSならConoHaのKUSANAGIの使い方を参考にすれば問題ないはずです。Conohaのサイトに行ってアカウントを作成し、KUSANAGIのサーバイメージでサーバを１台立てます。こちらConohaから「お申し込み」に進めばOKです。KUSANAGI for ConoHaはメモリ4GB以上が推奨らしいのですが、それは高いし、あとあと変更できるので、まずはメモリ１Gでコア数２の月900円のプランでサーバーを構築しました。あとでスペックを変更できるのもConohaの良いところです。サイトが重くなったらスケールアップできるので安心です。そしたら、あとはrootパスワードを入れて「追加」したら数分でサーバーが出来上がりました。 ネームタグは適当に変更しています。クラウドなので、ここにWordPress以外にも色々なサーバを追加することができます。 KUSANAGIの初期設定をする このサーバーイメージは、KUSANAGIはちょっと自分で初期設定をする必要があります。この状態だとまだWordPressは入っていません。管理画面のコンソールからrootでログインして「KUSANAGI」の文字が出ればログインできています。KUSANAGIの初期設定方法にしたがって初期設定をしていけばOKです。最初にOSのアップデートで数分掛かります。そのあと 次のコマンドを打つと初期設定が始まります。 # kusanagi initWebサーバはApacheではなく高速な「nginx」を利用し、php実行環境は高速な「HHVM」を使いました。 URLの設定をする 下記リンクの手順通りに設定を進めます。KUSANAGIのプロビジョニング – KUSANAGIURL設定の方法にはKUSANAGIでは専用のやり方があって、その方法でプロビジョニングというものを行います。次のように例えばkusanagi_testという名前で登録すると、そのディレクトリが作れられてWordPressがインストールされます。 # kusanagi provision kusanagi_test注意することは、ホスト名(FQDN) を指定する場面で、とりあえずVPSに割り振られたグローバルIPを入れた方が良いです。 このホスト名で接続しにいく必要があるので、ここで適当なホスト名を入れると先に進めなくなってしまいます。 (そん場合はプロビジョニングをやり直す)またLet’s EncryptでSSL証明書を発行するフェーズがありますがグローバルIPを設定している場合には、できませんので、Enterを2回押してスキップします。あとで、グローバルIPをやめてドメイン設定をやり直したい場合には、またこのプロビジョニングをすれば良いのではないかと思います(※未確認) WordPressのインストール 下記リンクの手順通りに設定を進めます。KUSANAGIのWordPressのインストール方法普通のWordPressのインストール手順ですね。 KUSANAGIの設定 WordPressをインストールし終わり、管理画面にログインすると、自動的にKUSANAGIのプラグインが入っているのがわかるかと思います。KUSANAGI専用プラグイン – KUSANAGIキャッシュを有効にするには次のコマンドを実行します。 [...]

WordPressのテーマにサムネイルをサポートさせる

こんにちは、のすけです。自分でWordPressテーマを作ると必要な機能のみ入れることができ本当に便利なのですが。デフォルトの状態では投稿のサムネイルがサポートされていません。そこでサムネイルをサポートする方法を記載します。 投稿のサムネイルサポートする 一部の投稿タイプのみサムネイルをサポートする方法 テーマのテンプレートへの反映方法 表示サイズを変える方法 CSSクラスを設定する方法 投稿のサムネイルサポートする サムネイルをサポーとさせるには、functions.phpに設定を書き込みます。 add_theme_support( 'post-thumbnails' ); 投稿サムネイル - WordPress Codex 日本語版そうすると、投稿の編集画面で「アイキャッチ画像」メタボックスが投稿・固定ページ編集画面に表示されます。もし表示されなければ、画面右上の表示オプションの中で「アイキャッチ画像」を有効にします。 一部の投稿タイプのみサムネイルをサポートする方法 例えばカスタム投稿タイプ「blog」と「kouza」にのみにサムネイルをサポートさせるためには、 add_theme_support( 'post-thumbnails', array( 'blog' ) ); // blogのみ add_theme_support( 'post-thumbnails', array( 'kouza' ) ); // kouzaのみ 関数リファレンス/add theme support - WordPress Codex 日本語版 テーマのテンプレートへの反映方法 サムネイルをサポートすると、次の関数を使うことで、投稿中にサムネイルが表示することができます。 // 投稿に投稿サムネイルが割り当てられているかチェックします。 if ( has_post_thumbnail() ) { [...]

WordPressテーマをCSSテンプレートでカスタムメニューをいい感じにデザインする

こんにちは、のすけです。はい。今まで様々な投稿関係のテクニカルなことを紹介してきましたが、今回は一番わかりやすいデザインを触っていきたいと思います。デザインはCSSを弄って色々とやっていくわけですが、如何せん設定項目が多く、CSSも膨大な数を書かなくてはいけないためとても大変です。 そこで巷ではCSSフレームワークというものが用意されています。有名な例では「Bootstrap」「Foundation」などがあります。今回は「Bootstrap」を導入する例を紹介したいと思います。なお、バージョンは最新のBootstrap4を扱います。 Bootstrap4はいわゆるよく利用されているBootstrap3の後継バージョンで、ついにフラットデザインになったものです。 利用されすぎて「Bootstrap臭さ」と呼ばれるものがあったBootstrap3ですが、４になっていくらか軽減されていると思います。 Bootstrapを読み込む ヘッダーを作る ナビゲーションメニューをつける li要素とaタグにクラスを付けるためにfunctions.phpに追記 まとめ Bootstrapを読み込む 今回はheader.phpに書き込む手法でいきたいと思います。また読み込み方法もCDNからデフォルトのBootstrapを読み込むもっとも簡単な方法を選びました。CSS <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> JS <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> そのほか、独自のCSSの読み込み方法を利用して、functions.phpで読み込む方法は、こちらの記事で紹介しています。hollywis.hatenablog.comテーマフォルダ内にCSSやJSを置く方法もありますが、ルートフォルダ直下にassetsフォルダを作ってそこに配置していきます。 ヘッダーを作る header.phpを編集していきます。 オリジナルで作った最小テーマである「anothersky」の分割バージョンを使っていきます。hollywis.hatenablog.comhollywis.hatenablog.com 元のheader.php <!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title> [...]

カスタムフィールドを使いこなしてWordPressを「単なるブログ」から「使えるシステム」に進化させる

こんにちは、のすけです。「WordPressって言うてもブログでしょ。」いや、違います！！カスタムフィールドがあります！！ということで今回は、あなたのWordPressを単なるブログからシステムに進化させる方法をこっそり教えたいと思います。 本文じゃ色々と足りない カスタムフィールドとは 頼れる相棒「Advanced Custom Fields」さん 使ってみる フィールドを入力 ルールを登録 位置を追加 カスタムフィールドを表示させるテンプレートを作る コンテンツをフィールドごとに適切に表示 まとめ 本文じゃ色々と足りない WordPressにある「投稿」では次のような項目があると思います。 タイトル 本文 カテゴリ タグ でもこれだけだと正直、記事の投稿くらいにしか使えません。もっと、例えば音楽アーティストのページだったら イベント情報を出したくて 「ライブハウスの名前」 「住所」 「時間」 「曲目」 なんて情報の入力項目が欲しいかもしれません。もっと、例えば、不動産会社のページなら 「部屋の名前」 「所在地」 「最寄駅」 「築年月」 「間取り」 「価格」 なんて情報の入力項目が欲しいかもしれません。でも、通常のままだと全部「本文」に入れるしかありません。もっと項目を増やせたらいいのに。。。=> 増やせます。カスタムフィールドで！しかも、住所に情報を入れたら自動的にGoogleMapで表示させるとか、いちいちテーブルタグを書かないで表を作るなども自由自在です。 カスタムフィールドとは 実はWordPress標準の機能に「カスタムフィールド」と言う設定欄があります。投稿や固定ページの新規作成画面で、表示オプションのカスタムフィールドにチェックを入れると利用できるようになります。投稿や固定ページの編集画面で上の方の「表示オプション」を開くとカスタムフィールドを出せるカスタムフィールドの情報には「名前」と「値」の組み合わせがあり、自由な情報を登録できます！！ 例えば「住所」の情報を増やしたければ、「名前」に"住所"と入れて、「値」に実際の住所情報を入れます。 すると、データベースのwp_postmetaテーブルに「meta_key：名前、meta_value：値」としてデータが保存されます。このカスタムフィールドのデータを利用することで、記事情報から取得したいデータだけを取得して任意の処理ができるようになります。 まるで業務システムのように。ただし、実はこのカスタムフィールド標準だと、いちいち投稿や固定ページを投稿するたびに項目を追加しなくてはならないため システムがわからない人が投稿時に使うには現実的ではありません。そこで次の便利なプラグインを使います。 頼れる相棒「Advanced Custom Fields」さん 標準のままだと、いちいち項目を追加の必要がありましたが、この「Advanced Custom Fields」を利用するともう全て解決です。最初から必要な項目は全てセッティングできます。また、テキストデータだけでなく、画像やファイルをアップロードする項目すら作れます。もう便利すぎます。 実際に使ってみましょう 使ってみる では実際にサンプルとして、オンライン教育サイトの講座のページを作ってみたいと思います。管理画面の「プラグイン」ー「新規追加」から「Advanced Custom [...]

WordPress任意のCSSやJavascriptを読み込む方法 (Bootstrapなど)

こんにちは、のすけです。WordPressを弄っていると、独自のCSSやJavascriptを使って整えたくなってきますよね。そんなCSSやJSを作成して変更する方法を紹介します。(デザインについては特に触れません) 簡単だけど諸刃の剣な方法 概要 書き方 CSSやJavascriptの置き場所 置いたスクリプトをWordPressで読み込むように登録する 簡単だけど諸刃の剣な方法 一番簡単な手法としては、管理画面の[外観] - [CSS編集]からCSSについては編集できます。テーマのCSS編集この画面では、CSSの変更結果を微調整しながらカキカキできるのが利点で、とても便利なのです。プレビューを確認しながら変更できるので便利ではありますその他の手法として、[外観]-[テーマ編集]からテーマの「style.css」に追記数する手法もあります。style.cssはテーマ用なので別ファイルで管理したいしかし、問題もあります。 このCSSはテーマの設定値として紐づいているので、テーマを変えると消えてしまいますし テーマのアップデートで消えてしまったこともあります。 また、テーマ編集については、そもそもこの画面から編集するのは危険です。間違ってからのテキストデータがPOSTされた場合全て消えてしまう可能性もあります。(一度ありました。) 膨大な時間を掛けて構築したCSSが消えてしまうと、もう呆然となってしまいます。。 そのため、Web一般で用いられているように、外部ファイルとして保存されたCSSやJavascriptを利用して編集する手法を取りたいと思います。ローカルにソースファイルを保持できるので、万が一サーバー上のファイルが消えても復旧可能なので、やはりこっちの方がしっくりきます。 またbootstrapなどの任意のCSSフレームワークを入れたいなんて要望もあるかと思います。 概要 やり方の概要としては「wp enqueue script」関数を利用して、登録を行います。 header.phpに直接書くやり方ももちろんありますが、WordPressの機能を利用して登録していくのが一般的なようです。 関数リファレンス/wp enqueue script - WordPress Codex 日本語版 書き方 以下のように、functions.phpの最後の行に追記します。なお、編集する際にはコピーを取って戻せるようにしてください。 間違って記述するとサイトが動かなくなります。書き方例： /** * スクリプトとスタイルを正しくエンキューする方法 */ function load_my_scripts1() { wp_enqueue_style( 'mystyle1', 'url' ); wp_enqueue_script( 'mystyle2', 'url', array(), '1.0.0', true ); } [...]

WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。

こんにちは、今回はWordPressのアーカイブ機能カスタマイズしていきます。 アーカイブ表示とは？ アーカイブページは「archive.php」を作れば良い アーカイブページのタイトル 個別投稿ページへのリンク 記事の抜粋 ページング カスタム投稿タイプにも一覧機能をつけたい WP_Queryでカスタム投稿を取り出す！ アーカイブ表示とは？ そもそも、アーカイブ機能とは何でしょうか？投稿や固定ページとは違ってあまり馴染みのない機能なのではないでしょうか。 でも、実は重要です。 アーカイブとは記事を一覧表示する機能なので、投稿一覧をいい感じに作ることができるものです。 例えば通常、カテゴリーをクリックした際に、そのカテゴリーに属する記事が一覧で表示されると思いますが、そのページがアーカイブページになります。 カテゴリーの他にも、タグや、日付(日別・月別・年別)での結果もアーカイブページになります。 カスタム投稿タイプで新しく別の投稿タイプを作成した時に、それぞれ別のレイアウトの一覧ページを作りたい！なんて要望もあると思います。 例えば通常はリスト表示が多いのですが、これをグリッド形式にしてアルファブログにあるような形に整形することも可能です。 アーカイブページは「archive.php」を作れば良い それではアーカイブページを作っていきます。 と言っても、アーカイブページの作り方は、固定ページや投稿ページと同じです。 WordPressループを利用し、テンプレートタグを使って必要な情報を揃えていけば良いだけです。 まずは、いつもの基本的な記述で作ってみましょう。 archive.php <?php get_header(); ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h1 class="entry-title"><?php the_title() ?></h1> <div> <?php the_content(); ?> [...]

shopifyという凄いECプラットフォーム

こんにちは、のすけです。ただの雑記なのですが、shopifyというECプラットフォームご存知でしょうか。最近は、簡単に個人のショップを作れるサービスがいっぱいあって例えば ・BASE ・STORES とか便利で利用していました。数クリックでWEBのECショップが簡単に作れて便利ですよね。ただ、セール中のモーダルを出してみたりなど、ちょっとした複雑な機能を 追加したりなんかは難しくてそうなってくると、他のECプラットフォームになってくるわけですがたとえば ・WordPressにECプラグイン(WooCommerceとか)入れる ・ECcubeを使う 何かの選択肢が出てきたりします。そんな中で、最近？2018年らしいけれど日本語にも対応したshopifyが中々凄いそう利用間隔はBASEやSTORESのような感じでありながら カスタマイズ性がWordPressやECcubeのような感じ。つまり サーバー不要で数クリックでショップを開けるけて かつ細かいカスタマイズも色々できる！APIもあって中々いじりがいがあるようです。 フロント部分はスクラッチで自前で作って、管理画面だけ利用するなんてこともできそうなので 期待が持てます。海外性ということもあり、海外向けのEC作りたい場合にはかなり重宝しそうです。ちょっと色々いじっていこうかなと では！

【Unity道場5】衝突判定をせよ

問題1：衝突判定をせよ キューブオブジェクトを上から落として、地面にぶつかった時にオブジェクトを削除してください。 回答例 using System.Collections; using System.Collections.Generic; using UnityEngine; public class CollisionTest : MonoBehaviour { void OnCollisionEnter(Collision collision) { Destroy(gameObject); Debug.Log("当たったよ！"); } } 解説 OnCollisionEnterでイベントを検出して、オブジェクトを削除しています 実行結果 問題2：衝突先のオブジェクトを削除せよ 問題１を改良します。キューブオブジェクトを上から落として、地面にぶつかった時に地面オブジェクトの方を削除してください。 回答例 using System.Collections; using System.Collections.Generic; using UnityEngine; public class CollisionTest : MonoBehaviour { void OnCollisionEnter(Collision collision) { Debug.Log("当たったよ！" + collision.gameObject.name); Destroy(collision.gameObject); } [...]

Let’s Work Together

Tell me more about your project

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.