Web Design Articles

  • 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を利用するとほぼ発生するように思います その場合、v-ifの前後や、場合によってはコード全てを <client-only></client-only>で囲えば発生しなくなります ご察しの通り、これで囲った部分は、クライアントサイドレンダリングになりますのでその辺りはご注意ください 参考：【Vuetify】NuxtのSSRでVuetifyのDatePickerを使用したら「The client-side rendered virtual DOM tree is not matching server-rendered content. 」というエラー発生 [...]

  • 1917

実は簡単だった。nodeを使ってみる

こんにちは、のすけです。 JavaScriptでサーバサイドとか面倒そう！ということで今まで敬遠していたのですが 実は手軽に利用出来るようです。 面倒そうと考えた理由としては、JavaScriptはクライアントサイドが普通ですので、何でわざわざJavascriptでサーバサイドまで作らにゃいけないのさ！ もっとWebで使いやすい専用言語とかFrameworkとかあるじゃん！ と思っていたのですが、、、書籍をサラッと見た感じだと、どうやらシンプルなHTTP通信ならnodeいいんじゃね？ という認識に変わりました。 僕はサーバサイドは今までサーブレッット(Java)や.NetFramework(C#)、Rails(Ruby)を使ってきました。 最近はWebでのライブラリの豊富さからRailsばかり触っていましたが、ついにNodeを使ってみることにしました。 なお下記の書籍を購入してしまったので、これを参考に実装しながら学習していこうかと思います。 Nodeクックブック作者: David Mark Clements,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2013/02/23メディア: 大型本購入: 2人 クリック: 4回この商品を含むブログ [...]

  • 1918

クリスマスソングにあわせてLEDを光らせる話 | さいぞうのArduino初心者日記6

こんばんは。 さいぞうです。 この記事は、Arduino入門連載の6回目。 前回は、LEDを使ってモールス信号練習機を作った。 本来のチュートリアルからはかなり脱線してきたが、まあ面白かった。 hollywis.hatenablog.com 今回も脱線して、クリスマスなので、Soundcloudからクリスマスソングを取得し再生してそれに合わせてLEDをチカらせてみようと思う。 要はArduinoで簡単なオーディオビジュアライザを作る。 　 　 […]

  • 1921

SORACOM Air の契約の仕方

こんにちは、のすけです。 IoTの通信として最適なSIMであるSORACOM Air と契約しました。 手順などをご紹介。 SORACOM Air とは 小容量通信の常時接続に最適な契約ができるのがSORACOM Airです。 通常のサービスが100Mbpsで月額1GBの通信っで1000円のような感じですが SORACOM Airは, 基本料金は1日 10 円、データ通信量は 1MB あたり 0.2 円からの従量課金になります。 [...]

高速で動く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() ) { [...]

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.