サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
knowledge.cpi.ad.jp
IT / ウェブ業界では、常時 SSL 化が一般的になっており、Web サイトを構築する際は常時 SSL 化がほぼ必須といってもいいでしょう。 当記事では、常時 SSL の必要性や、常時 SSL を導入するための方法をご紹介いたします。 目次 常時SSLとは 常時SSLの必要性 （導入方法）サーバー証明書と価格（ 常時 SSL の費用）についての購入 （導入方法）http から https にリダイレクト （導入方法）内部リンクの変更 （導入方法）Facebook、はてブの引き継ぎ （導入方法）Google Search Console への追加 まとめ 常時 SSL とは 常時 SSL とは、Web サイトの閲覧を常に SSL で通信を行うことです。 SSL 通信とは、インターネット上の通信を暗号化するための仕組みです。通信を暗号化することで端末とサーバー間の盗聴や、改ざんができなくなり
WordPress でサイトにお問い合わせやお申し込みのフォームを設置するときによく使われるプラグインに『 MW WP Form 』があります。 『 MW WP Form 』は送信前確認の画面を表示する機能や管理者にメールを送る機能などが標準で備わっている、とても便利なプラグインです。 リファレンスが日本語で書かれているため利用者が多く、国内では『 Contact Form 7 』の次にメジャーなプラグインです。 非常に便利な『 MW WP Form 』ですが、複数の入力項目を組み合わせて入力チェックを行う機能が備わっていないのが欠点といえます。 複雑なフォームを作る場合に複合条件での入力チェックができないのは困りますよね。 そこで本記事では、テーマの functions.php ファイルにバリデーションルールを書き加えるだけで『 MW WP Form 』で複合条件での入力チェックが実現で
Web サイトを閲覧中に「 Internal Server Error HTTP 500 」の画面が表示されたことはありますでしょうか。 急にこんなエラー画面がでてきたら、何か悪いことをしたかと、ドキドキしてしまいますよね。 今回の記事では「 Internal Server Error HTTP 500 」とは何かを解説。あわせて HTTP 500の解決方法をご紹介いたします。 Internal Server Error HTTP 500 とは Internal Server Error HTTP 500 とは、閲覧している Web サーバー上でエラーが起きており、ウェブサイトが正しく表示できない状態のエラーコードです。 Web サーバーやブラウザによって画面に記される文字が変わりますが、内容に違いはありません。 Internal Server Error 500 Internal Ser
前回の記事では、WordPress に標準搭載されている『 WP REST API 』の使用方法と、『 WP REST API 』の post エンドポイントを使ってブログの内容を取得する方法についてご紹介しました。 ▼WordPress『 WP REST API 』#1 ブログを他のサイトに埋め込む方法 今回は『 WP REST API 』に用意されているカスタムエンドポイント機能を使って、より使いやすいオリジナルのエンドポイントを追加して、思いどおりの情報を取得する方法をご紹介いたします。 エンドポイントの追加を行ってみることで、『 WP REST API 』が WordPress の内部でどのような動きをしているのかより深く理解することができます。 目次 『 WP REST API 』のカスタムエンドポイント機能について WordPress にエンドポイントを追加する 追加したエンド
複数の Web サイトを運用していて、WordPress で投稿したブログの内容（タイトルやアイキャッチ、公開日など）を別の Web サイトにも表示させたいと思ったことはありませんか？ 同じサーバー上でしたら読み込むのは簡単ですが、別のサーバー上にある WordPress の投稿を参照するのはハードルが高めです。 そこで今回は、WordPress に標準搭載されている『 WP REST API 』を使ってブログの内容を他の Web サイトに表示させる方法を紹介します。 PHP を使わず JavaScript と HTML だけで実装できるので、表示させたい側の Web サイトのサーバーが PHP に対応していない場合も安心です。 目次 WordPress の『 WP REST API 』について 『 WP REST API 』で最新のブログ一覧を取得する方法 他のWebサイトに最新のブログ
Laravel にはこれまで紹介した便利なコマンドのほかに、Web アプリケーションを作るのに欠かせない認証・認可に関する機能が最初から用意されています。 その1つが、ユーザー登録を行った利用者だけが Web アプリケーションを閲覧・利用できるようにする「ログイン機能」です。 ログイン機能は、会員制の Web アプリケーションに欠かせません。それ以外にも、管理者ユーザーを作って、一般ユーザーにはできない操作を Web 上でさせたい場合に有用です。 一から作れば1～2日かかってしまうログイン機能ですが、Laravel では初めから用意されているので最短10分で導入できるのが強みです。 カスタマイズも簡単でとても便利ですので、ぜひ活用してください。 前回の内容は、こちらをご覧ください。 ▶︎PHP フレームワーク『 Laravel 』入門 #6 Artisan オリジナルコマンドの作成と定期実
前回の記事で、複数の Web サイトを1つの WordPress で管理するマルチサイト機能でできることと、マルチサイトのメリットについてお伝えいたしました。 「マルチサイトってなんだろう？」という方は、まずこちらの記事からお読みください。 ▼WordPress『マルチサイト』#1 複数サイトを一括管理する便利な機能を紹介 今回は、CPI が提供する共用レンタルサーバー『 ACE01 』で WordPress のマルチサイト機能を有効にする方法と、WordPress に新しい Web サイトを追加する方法についてご説明いたします。 目次 サイトネットワークの有効化 1.1 メニュー「サイトネットワークの設置」の追加 1.2 サイトネットワークの作成 1.3 設定ファイルの変更 新しい Web サイトを追加する テーマのインストール～ Web サイトごとにテーマを変更する 最後に 「Webサ
「 WordPress にテーマやプラグインを追加したい」 「本体のバージョンの更新をしたい」 「ブログの記事を書きたい」 そういった場合には、WordPress の管理画面にログインして操作を行うのが一般的です。 しかし、管理する WordPress の数が多い場合、一つひとつのサイトの管理画面にログインして、本体やテーマ、プラグインを更新して…とやっていると、けっこう時間がかかってしまいます。 あるいは WordPress を新しく設置するたびに、毎回同じテーマやプラグインをインストールして、有効化して…といった手順が面倒くさいと思ったことはありませんでしょうか？ こういったお悩みを解決するために、WordPressの操作をコマンドラインから実行することができる『 WP-CLI 』というライブラリがあります。 WordPress の操作をコマンドラインから実行できれば、スクリプトを組ん
2015年11月14・15にTechCrunch主催のハッカソンが開催されました。そのハッカソンにTwilioのサポーターとして参加しました。 ハッカソンのルールとして、2日間で何かを開発するのですが、APIスポンサーが提供するAPIをどれか１つ以上使うというのがルールです。 今回は36チーム中、なんと12チームでTwilioを利用し開発いただけました。 Twilioのサポーターとして参加していると、皆さんつまずくポイントは同じだなーという印象を受けました。今回はTwilioの利用用途として最も多かったSMS送信で皆さんがつまずいたポイントなどを紹介いたします。 なお、以前にもTwilioの記事を投稿していますので、そちらもよろしければどうぞ。 Twilioを使って電話Webアプリケーションを構築しよう SMSを送信する方法は下記の手順で送ることができます。 Twilioのアカウント登録
Embed 例： <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> 結果： アスペクト比 アスペクト比は「embed-responsive-****」で指定することができます。 .embed-responsive-21by9 .embed-responsive-16by9 .embed-responsive-4by3 .embed-responsive-1by1
Bootstrap 4 の Navbar（ナビゲーションメニュー）は、デフォルトのままだとクリック時にメニューが閉じません。 シングルページなど1つのページ内でリンクする場合は、Navbar クリック時にメニューを閉じたいですよね。 今回の記事では、Dropdown メニュー以外のリンクがクリックされた時に、メニューが閉じるようにする方法を解説します。 「Webサイトからお問い合わせが来ない…」とお悩みの方必見！ 当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供 詳細はこちら Nabvar クリック時にメニューを閉じる 下記の JavaScript を jQuery 読み込みの後ろに追記することで、Nabvar クリック時にメニューを閉じることができます。 <script> $('.navbar-nav>li>a , .dropdown-menu>a').on('click
Grid（グリッド）レイアウトとは、画面幅に合わせて最大12個にレイアウトを分割する機能のことです。 Bootstrap 4 から、Flexbox が使用され、5つのブレイクポイントが設計されています。 本記事では、Grid レイアウトの使い方について解説します。 下記は Grid レイアウトの簡単な使い方です。 「 .container 」の中に、「 .row 」を入れ、その中に分割したいカラムを記述します。 下記の「 .col-sm 」は、sm というサイズ以上の場合に3カラムを維持します。 <div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div clas
TOP > TECH > ナビゲーションメニュー (Navbar) の中央寄せ、右寄せなどの使い方 : Bootstrap 4 Bootstrap とは Bootstrap は、 Web サイトの開発などに使うフレームワークのことです。 Twitter 社が開発し、世界で最も人気なフレームワークとされています。 HTML / CSS 、Javascript で構成されており、開発を効率的に進められます。 Web サイト作成で使われるボタンやフォームなども機能が備わっており、レスポンシブ対応のためあらゆるデバイスからの閲覧にも対応できます。 Bootstrap 4は2018年2月21日にリリースされたバージョンです。本記事ではこの Bootstrap4 での Navbar の使い方をまとめました。 Bootstrap4 についてはこちらの記事でも詳しく解説しています。 ▼Bootstrap4
Web サイトは常時 SSL が当たり前の時代になりました。 今回の記事では、これまで「 http://example.com 」や、「 http://www.example.com」で運用してきた Web サイトを、「 https://example.com 」に転送する方法をご紹介します。 サイトを SSL 化した場合に対策をしておかないと、ブックマークや、Google の検索エンジンからの流入などから古い URL にアクセスされる可能性があります。 古い URL にアクセスが残ったままだと様々なデメリットがあるため、常時 SSL 化後には設定しておきたい項目です。 HTTP とは HTTP とは「 Hypertext Transfer Protocol 」の略称です。 Web サイトを閲覧する時、ユーザー側はサーバーにリクエストを送り、サーバーはレスポンスを送り返します。このやりとり
世界で使われているフロントエンドフレームワークのBootstrap4の使い方特設サイトを公開しました。 目次 bootstrapとは Bootstrap 4の利用準備（クイック） Bootstrap 4の利用準備（ソースコード） コンテナ Gridレイアウト タイポグラフィー 画像 Flexboxユーティリティ Iframeなどの埋め込み ナビゲーションメニュー アイコン スクロールスパイ コンポーネント サンプルサイト
昨今この業界（ IT / Web 系）では、常時 SSL 化が当たり前となっています。しかし、常時 SSL とは何？、SSL 証明書とは何？と聞かれたときに上手く説明できますでしょうか。 当記事では、なぜ常時 SSL が求められているのか、証明書の DV、OV、EV とは何か、暗号化強度に違いはあるのかなど、説明いたします。 目次 SSL (Secure Sockets Layer) とは 常時 SSL が求められる理由 SSL 証明書とは DV、OV、EV の違い DV、OV、EV の暗号化強度の違い さいごに SSL (Secure Sockets Layer) とは SSL (Secure Sockets Layer) とは、インターネット上の通信を暗号化する仕組みです。 「 SSL/TLS (Transport Layer Security) 」などと表記されることもありますが、一
2018年2月21日にローンチされたBootstrapとはTwitter社が開発している世界で最もポピュラーなフロントエンドフレームワークです。 Bootstrapを使うとレスポンシブサイトを簡単に構築することができます。 なぜBootstrapを紹介するのか Bootstrapは世界で最も使われれいるフロントエンドフレームワークです。 下記はW3Techs（ https://w3techs.com/）が調査したJavaScriptライブラリーの利用率です。 1位はjQueryですが、BootstrapはjQueryを利用していることや、ライブラリと考えると、フロントエンドフレームワークの中ではBootstrapが実質1位です。 利用率が多いと何が良いかと言いますと、技術情報や、無料・有料のテンプレートが豊富に存在する、バグやセキュリティホールなどの不具合も速やかに取り除かれる、などの利点
Webサイトの表示速度高速化が昨今注目を浴びています。 今回の記事では、Webサイトの表示速度をなぜ改善した方が良いのか。表示速度改善の方法などについて、レッドボックス CEOの小川 勝久氏にお伺いしました。 Webサイトの表示速度を高速化したいと考えている方は、ぜひご参考ください。 動画内で使用したスライド Web体験を“向上“させるCDNと 表示速度の重要性 Part.1 本日の動画の趣旨 ・自己紹介 ・なぜ速度改善が必要か ・今回の動画の趣旨 Part.2 Webサイト表示速度の計測方法 ・高速化に必要な対策について（バックエンドとフロント） ・速度を計測するためのサイト（特徴紹介） Gtmetrix Test My Site WebPagetest Part.3 表示速度最適化（フロントエンド） ・画像の最適化（WordPressの場合） ・画像最適化（Client Hints）
JavaScript の基礎セミナーの講師を度々やらせていただくことがあります。 セミナーを何度かやっていると、みなさんつまずく理由は同じだなという印象です。 つまずく理由は、デバッグができていないことと、オブジェクト（ DOM 含む）を理解していないことです。 デバッグに関しては先日書いた記事「JavaScript のデバッグに役立つ Console API メソッドについて」を参照ください。 今回は、2つ目のつまずくポイント、オブジェクト（ DOM 含む ）について紹介します。 オブジェクトとは オブジェクトとは、変数と、関数の集合体です。 簡単にいうと、文字列や関数などの情報をなんでも沢山入れられる箱と考えてください。その箱を会社に例えると、財務情報が入っていたり、社員情報が入っていたり、社員の給料を計算する式が入っていたりします。 プログラム界の「四次○ポケット」的な役割です。 変
「Webサイトからお問い合わせが来ない…」とお悩みの方必見！ 当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供 詳細はこちら ここは東京、かつて日本の首都だった街だ。 今では、ほとんどの店舗やビルがシャッターを閉めたまま、まれに訪れる暇人を迎え入れている。 今からさかのぼること30年前の2017年では、日本の人口1億3千万人に対して、東京の人口が1360万人と、約10％の人々が東京に住んでいた。街では人々が着飾り、おしゃれなカフェでブランチする、それが東京の印象だった。 東京から人が離れていった2020年以降に生まれた若い世代は、華やかな東京を知らないのであろう。 そんなことを考えながら、酸味が特徴的なコーヒーを飲むのが翔太郎（しょうたろう）の日課であった。 「ねえ、翔太郎、私たちもそろそろ東京を離れて暮らしませんか？」 と、40年間連れ添った妻の明恵（あきえ）が言った。
お客様からの問い合わせで共用型サーバーのACE01にCakePHPをインストールすることはできますか？と、質問されることがあります。 答えはできますが、プログラムの設置などサポート対象外ですので、CPIスタッフブログで紹介させていただきます。 使用する環境 共用型レンタルサーバー ACE01 PHP 7.1.1 CakePHP3.4 CakePHPの公式ドキュメントにて、システム要件の確認ができます。 https://book.cakephp.org/3.0/ja/installation.html CakePHPのインストール 「.htaccess」の設置 CakePHPをインストールするディレクトリに「.htaccess」を設置し、下記行を追記します。 今回は「/cakephp」に設置を行いますので「/cakephp/.htaccess」とします。 AddHandler x-httpd
みなさんこんにちは、JavaScriptを使い動的なWebサイトを構築していますでしょうか。 本日はJavaScriptの開発時に役立つ、Console API メソッドを紹介します。 こちらの記事はMdNデザインと共同で進めている記事です。 MdNデザインのサイトも合わせまして、よろしくお願いいたします。 Console API デモページ Console API とは JavaScriptを開発したことがある方は、一度は「console.log( );」メソッドを見たことがあるのではないでしょうか。 <script> console.log('コンソール画面に文字を表示'); </script> 結果： console.log()は、コンソール画面にメッセージを表示するためのメソッドです。 コンソール画面の出し方 Chromeブラウザで、画面上を右クリックし「検証」をクリックします。
Flexboxを使い、レスポンシブWeb対応のページネーション（Pagination）を作成します。 << デモを表示 >> ※ PCで閲覧している方はデモを開き、画面幅を変えてみてください。 ソースコード index.html <!DOCTYPE html> <html lang="ja"> <head> <title>Flexboxテスト</title> <meta charset="UTF-8"> </head> <body> <h1>Flexbox レスポンシブPagination</h1> <ul class="pager"> <li><a href=""><<</a></li> <li><a href=""><</a></li> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></
オープンソースCMSのWordPressを利用するときに一番気になるのが、セキュリティ対策についてではないでしょうか。 近年WordPressを狙ったハッキングが増えてきていますので、しっかりとセキュリティ対策を実施し、皆様のウェブサイトを守ってください。 2016年Q3のハッキング状況 「Hacked Website Report – 2016/Q3」の調査によると、2016年Q3にハッキングされたCMS8,000サイトのうち、WordPressが74%、Joomla!が17%、Magentoが6%でした。 （調査結果及び、画像引用：Hacked Website Report – 2016/Q3） 2017年のハッキング状況 「Hacked Website Report 2017」の調査によると、2017年に34,371件の感染したウェブサイトを調査した結果、WordPressが83%、
昨今のWebサイトには、CMSが導入されていることがほとんどではないでしょうか。 私の経験上、CMSを導入したがCMSのアップデートをしていないユーザーが多く存在しているように感じます。 Webサイトは、作るのが目的ではなく、Webサイトを運用し何らかの情報を発信することが目的です。 長くWebサイトを運用するためには、必ずCMSのアップデートをしてください。 CMSをアップデートする理由 まずこちらの「Webサイトハッキングレポート 2016年 Q3」資料を参照ください。 Hacked Website Report – 2016/Q3 (引用) こちらの資料は実際に攻撃を受けた8,000サイトを分析し、どのようなサイトがハッキングされているかを調査した資料です。 実際にアタックを受けたCMSはWordPressが74%、Joomla!が17%、Magentoが6%でした。 Hacked
Flexbox で中央寄せにする方法 flex-container に「 justyify-content 」プロパティを使用します。 各プロパティの値は下記の通りで、例えば中央寄せにしたい場合は、center を指定します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <title>Flexboxテスト</title> <meta charset="UTF-8"> </head> <style> .container{ display: flex; width: 100%; background-color: #aaa; /*並び順*/ /* flex-start：左寄せ（デフォルト） flex-end：右寄せ center： 中央寄せ space-between：残り余白の均等割り space-around：左右余白 ＋ 均等割り *
「 Bootstrap を使ってヘッダー・フッターを作りたいけど、どうすればいいのだろう…」 このようにお悩みの方へ、本記事では Bootstrap でのヘッダー・フッターの作り方について解説します。 ここで紹介する内容を参考に、作成してみてください。 「Webサイトからお問い合わせが来ない…」とお悩みの方必見！ 当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供 詳細はこちら Bootstrap でのヘッダー・フッター (header・footer) の作り方 Bootstrap ではあらかじめ、様々なサンプルコードが用意されています。まずは、Bootstrap ページの 「 Getting started 」よりサンプルコードを確認してください。 今回使うサンプルコードは「 Sticky footer with navbar 」です。 ページを表示し、ページのソースコード
未来の webに欠かせない『 RESTful webサービス』について、「PHPカンファレンス2016 東京」に登壇し話をさせていただきました。 今回の記事は PHP カンファレンスで紹介した内容の『 RESTful web サービス 』についてと、構築方法、利用法の具体的な紹介です。 当日使用したスライドは下記を参照ください。 RESTful webサービスとは RESTful web サービスとは、REST (Representational State Transfer) によって定義されたアーキテクチャーの原則に従ってリソース情報を取得、作成、修正、削除が行える API インターフェースです。 リソースへのアクセスはリソース固有の URI に HTTP メソッドを明示的にアクセスします。 簡単にいうと、リソースを必要する web サイトや、デバイスなどが、RESTful web サ
WordPressをインストールしたデータベースへの接続は、「$wpdb」というあらかじめ用意された変数を利用して接続を行います。 通常WordPressを使用するにはこの変数で十分だが、WordPressと他のシステムを連携させたりするには、「$wpdb」以外にも接続用の変数を用意する必要があります。 今回の記事はWordPressからWordPressをインストールした以外のデータベースへの接続用変数の作成方法を紹介します。 方法 下記のコードにより、データベースへの接続変数を作成できます。 $another_wpdb = new wpdb(DB_USER, DB_PASSWORD, DB_NAME, DB_HOST); 現在のデータベース情報を取得し、実用的にコードを書き直すと、以下のようなコードになると思います。 global $wpdb; $db_user = $wpdb->db
次のページ
このページを最初にブックマークしてみませんか？
『レンタルサーバーナレッジ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
