こんにちは、東北投信を運営しているみらいです。 今回はWordpressの無料テーマ「cocoon」でカスタムタクソノミーを追加する方法を自分用にまとめます。「カスタムタクソノミーとはなんぞや」みたいなところは省きますので、そこはググってください。 cocoonはビジュアル的には優れたWordpressのテーマなので、phpのカスタマイズの話題が少なく、カスタムタクソノミーの実装に少し時間がかかってしまいました。 時間が経つと忘れてしまいそうなので、今回は自分用にまとめようという話です。 なお、プラグインは使わず、必要なファイルや関数をチャイルドテーマにコピーして作ります。 未解決の問題などもあるので、よりよい改善方法などあれば教えてほしいです。 環境 Wordpress 5.4.0 cocoon 2.1.3.9 cocoon-child 1.1.0 カスタムタクソノミーの追加方法 カスタ
最近ではウェブサイトに地図を入れるなんてことは当たり前の流れになってきました。 しかし、その需要の流れとのバランスからか、Google MapもAPI Keyが必要になってきたりするケースが多くなって、受託案件だとそのAPI Keyを誰が取得して管理するのかという部分の議論がなかなか進まなかったり、あらかじめ結論が出ていない場合も少なくなりません。 そう言った場合に簡単に利用できるのが、Google Mapの共有です。HTML(<iframe>)で提供されるコードをポチッとコピーしてぺっ!とすれば、それだけでウェブサイトに地図を掲載できる便利なサービスです。 しかし、最近ではレスポンシブに設計したウェブサイトが基本的な制作の流れになってきています。その流れにしっかり乗せて利用するには、少しコツが必要だったりします。 この記事では、その部分のコツをコードも添えてメモしておこうと思います。 G
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか? 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome(デスクトッ
いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。 とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。 モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。 今回は、お問い合わせフォームの作り方やデザインのパターンをいくつか記載します。 demo Contents 縦に積むレスポンシブフォーム縦に積むレスポンシブフォーム(余白なし)背景色を交互に変えるレスポンシブフォーム まずは基本のフォームの作り方です。テーブルタグを使っています。 form-tableというクラスを大枠につけました。 HTML <table class="form-table"> <tbody> <tr> <th>氏名</th> <td><input type="text" name="name" s
今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。 レスポンシブ対応 以下で紹介する吹き出しデザインは(円形のものを除き)、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。 使い方(初心者向け) CSSが反映されないときはこちら シンプルな四角い吹き出し4つ 最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e9edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。 ちなみに下から伸びる三角形は疑似要素(before)で表現しています。興味のある方は下の記事に目を通してみてくださ
エラーがでなければ、左側に緑色のブラウザアイコンが新しく点滅し始めます。 このアイコンをクリックするとアプリが起動します。 適当に入力すると、数秒後にEchoさんが応答を返してくれます。 コード解説 server.js サーバー側のメイン処理となります。 現状ではログイン処理がありませんので、友達を選択後という体で実装しています。 今回の友達はEchoさんです。Echoさんはこちらからのメッセージに「<相手のメッセージ>ですね」と回答するシンプルボットです。 会話の内容はMongDBに格納しています。MongoDBはNonSQLでこのようなSQLサーバーを立てるほどではないが、色々なデータをストアしておきたい時にいいかなと思ってます。 最初にEchoさんからのご挨拶を登録したあとは、クライアントからのアクセス待ちとなります。 Echoさんの会話は、MongoDBを一秒ごとにクエリして新しい
更新日: 2022年9月13日公開日: 2018年2月1日JavaScriptを使ったポップアップウィンドウの表示方法 自分でWebサイトを作ったり、ブログを運営していると「ポップアップ」を追加したくなる時もありますよね。 今回はポップアップ機能の概要からユースケース、実装方法をご紹介します。 Web開発初心者の方、プログラミング初心者の方、ご参考下さい。 JavaScriptを使ったポップアップウィンドウの表示方法ポップアップウィンドウとは? ポップアップウィンドウは、主にパソコン用のWebページで利用される「表示方法」の一種で、広告や内容確認などでよく使われます。 クリックすると既存ページの上に新たな情報が表示されたり、入力欄やボタンが登場。 Webページを移動することなく作業を進められる操作感は快適で、ユーザーの満足度向上や商機を捉とらえるテクニックとしてWebページの随所に使われて
プロジェクトNo.19:チャットアプリ JQueryで結構簡単にAjaxが使えるということで、 せっかくなら非同期通信のメリットを活かせるリアルタイムな簡易チャットを作ってみた。 Ajaxとは Asynchronous JavaScript + XMLの略で非同期通信をするための技術です。 簡単に言うと、 ページの遷移なしでページ内の要素を変更できる サーバーにデータを送受信できる 前者だけだとjavascriptだけでもできますが、サーバー処理をかまして最新のデータを表示できるというところに大きなメリットがあります。 例えば、Twitterなんかのプラグインを見ると、リアルタイムにタイムラインが画面遷移せずに表示されるのがわかるかと思います。 GoogleMapでは画面をドラッグしたりズームする度に画像データ(?)を読み込むことで、必要なデータのみをユーザに表示しています。 これらはAj
ソース mysql table 作成 CREATE TABLE `chat` ( `chid` int(10) unsigned auto_increment, `name` varchar(255), `text` text, `date` datetime, PRIMARY KEY (`chid`) ) AUTO_INCREMENT=1000000001 chat.php <? if(!isset($_SESSION)) session_start(); $msg = "<p>名前と文章を入力して送信ボタンを押してください。</p>"; // チャット内容の取得 $_chat = array(); $rst = mysql_query("select * from chat order by date desc limit 30"); while($col=mysql_fetch_as
jQueryでスマフォアプリっぽいチャットを作ってみました[更新] 2015年01月24日 jQuery チャットに関して jQueryチャットはパソコン・スマートフォン・タブレットなどの各種ブラウザで動作するチャットシステムです。LINEなどのコミュニケーションアプリに出来るだけ近づけるよう、スタンプ機能や画像アップロード機能などを備えています。 2015年1月24日おえかき機能付きを作っています サンプル 通常版 SQlite版 ROOM 1 SQlite版 ROOM 2 通常版とSQLite版の違いに関して 通常版 ログをテキストファイルに保存し、一定数になると古いログから削除されていきます。 SQLite版 名前の通り、ログをSQLiteデータベースに保存します。1つのjQueryチャットで複数のチャットルームを作成する事が出来ます。また、通常版に比べて機能が増えています。SQLi
この記事は31億市場!? チャットの作り方[1日コース]の2コマ目の記事です。 今回やること まずはUIをhtmlとcssだけで作っていきます。 内容は初歩的な内容なので、初心者の方以外は読み飛ばてください。 これができると何が良い? チャットUIを作ることで、チャットに必要なHTMLとCSSの構造がだいたい理解できます。 大枠のhtmlを作る 今回は、まずHTMLとCSSだけでチャットUIを作ってみます。 エディタはVS Code使ってます。 新規ファイルを作成してindex.htmlとします。 コードを入れていきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
// ファイルロックをかける fileLocking: true // 読み込み中に競合がないか検出する readControl: true // 書き込み中に競合がないか検出する writeControl: true // ファイル名を暗号化する fileNameProtection: true room.php send-chat-data.php chat-data-stream.php functions.php Data_Stream.php online-chat.js room.php <?php date_default_timezone_set('UTC'); /* スクリプトの実行時間 */ set_time_limit(60); /* セッション・クッキーはブラウザ終了で破棄。HTTPSであれば第4引数はtrueを指定する */ session_set_cookie_
JSON文字列とJavaScriptオブジェクトの相互変換 JSONオブジェクトがサポートされるならば、そのメソッドによりJSON文字列とJavaScriptオブジェクトを簡単に変換できます。それがサポートされるかどうかは、簡単にはWindowオブジェクトにJSONプロパティが存在するかどうかで判別できます。 if( window.JSON ) { // JSONがサポートされる } ちなみにPrototype.jsでは、 var NATIVE_JSON_PARSE_SUPPORT = window.JSON && typeof JSON.parse === 'function' && JSON.parse('{"test": true}').test; のように判別しています。 JSON文字列 → JavaScriptオブジェクト JSON.parseがサポートされるならば、それでJSO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く