エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英数字で入力しているのに。。

わからないのでサポートに聞いてみました。

もっと見る

指定数値までカウントダウンアップアニメーションjQuery countTo

数値をカウントアップやカウントダウンのアニメーションを簡単に行うことができるプラグインのご紹介です。data属性で指定できて簡単そうなものを選びましたがすでに3年前のものですね。同じ名前のプラグインがありますがこちらの方が使いやすかったので選びました。あまり有名ではなさそうです。ですが機能は豊富でいろいろと使えそうです。

• mhuggins/jquery-countTo: A jQuery plugin that will count up (or down) to a target number at a specified speed.

以下は同じようなカウントアニメーションができるタイプのものです。countUp.jsが有名どころでしょうか。

• lessthan3/jquery-countTo
• inorganik/countUp.js: Animates a numerical value by counting to it

もっと見る

javascriptでモバイル判定

ワードプレスにもwp_is_mobile()という関数がありますが「スマートフォン」と「タブレット」が一緒にモバイルと判定されているかなりざっくりな処理なので同じようにjavascriptでもざっくり判定を作成してみました。PCとそれ以外という感じだと思っていただければわかりやすいと思います。

アンドロイドやiOSなどにわかれるようにしてあります。

もっと見る

日本語のwebフォントを作成する方法

Webフォントを使うといえばGoogle Fontsを使って利用している人が多いかもしれません。 そのほか、アドビ社のTypekitやWebフォント TypeSquare タイプスクウェアなど結構Webフォントも多く使えるようになってきました。

ただ指定フォントを使って表示させたいという要望もあります。その場合にWebフォントを表示させる方法をご紹介します。

ただし、いまあるお手持ちのフォントをwebフォントとして使用出来るわけではありませんのでご指定のフォントのライセンスをご確認下さい。今回の作業はMacでの流れをご紹介します。Windowsでも流れは同じですのでわかると思います。

もっと見る

個人情報を一切収集しない検索エンジンDuckDuckGoとは？

ネット検索と言えば、日本ならGoogleやYahoo Japan!（検索エンジンはGoogle）経由が多いですね。Bingは少数派といったところでしょうか。

DuckDuckGoという検索エンジンは最近知りました。検索結果を変えてみてみたい方はGoogle以外の選択肢として使ってみてはいかがでしょうか？

見た目はGoogleっぽいシンプルな感じですがアヒルのアイコンがマークになっています。

• DuckDuckGo

あなたを追跡しない検索エンジンというコンセプトのようです。ただし検索精度はやはり王者Googleにはまだ及ばないといって感じです。ですがあらゆるところで検索エンジンとして設定ができるようになっています。

iPhoneでも設定の検索エンジンからGoogle、Yahoo!、Bing、DuckDuckGoとなっているので設定できるようになっています。アンドロイドはアプリがあります。DuckDuckGoアプリ

もっと見る

ワードプレス管理画面にログインできない対処法

今回はワードプレスについてです。

先日、管理画面には入れなくてかなり焦りました。ページは普通に表示されているのですが、管理画面には一切入れず、ページは機能していませんばかり。。。。

サーバーのセキュリティが引っかかっているんじゃないか？.htaccessか？といろいろ見てみましたが、そうでもありませんでした。

おっかしいなー、なんでだろう？これはやばいなと思いました。いろいろと調べてみました。

もっと見る

Git最初の一歩

今回は分散型バージョン管理システムのgitについてです。ギットと読みます。

公式サイト

ファイルのバージョン管理と思っていただければいいと思います。エクセルでもファイル1、ファイル2、ファイル3、ファイル4とかつけていきますね、これだとどのファイルが新しいのか古いのかがわからなくなりますが同じファイルで管理していけるのは良いですよね。

gitを使うとファイルを作ったり修正したりある程度のまとまりになったら履歴データベースに保存しておくと良いです。

1. 作業ディレクトリ ここで作業する

2. ステージングエリア（インデックス） 作業経過を保存

3. リポジトリ（ローカル、リモート） 保存先、履歴データベースに入る

こちらのサイトがわかりやすいですね。⇒サルでもわかるGit入門 〜バージョン管理を使いこなそう〜

今回の保存先はBitbucketに入れますのであらかじめアカウントを作成する必要があります。

もっと見る

ドメイン移管について

ドメイン移管についての手順です。頻繁にすることでもないので忘れがちなので備忘録をかねて書き記しておきます。

ドメインの移管される側と移管する側の立場になって考えていきます。

仮定として居菅元（いかんもと）さんがexample.comというドメインをもっていて伊神崎（いかんさき）さんに移管するということにします。流れとしましては居菅元さんから伊神崎さんに移すというイメージですね。

設定として居菅元さんのドメイン管理会社はスタードメインとします、伊神崎さんのドメイン管理会社はムームードメインとします。

ドメインの種類によっても手順が変わるので一般的なcom/net/org/info/bizなどのドメインの場合で考えていきます。

もっと見る

リンクタグの_blankについて

今回はちょいメモです。最近はあまりリンクにtarget=”_blank”をつけることはなくなったのですが、これをする場合はrel=”noopener noreferrer”をつけた方が良いということが言われています。

開かれたページの方では開いた元のページにアクセスできる仕組みになっているのでこれを悪用するサイバー攻撃を受けることがあると言うことのようです。

それでrel=”noopener noreferrer”をつけることで防ぐことが出来ると言うことです。

以下が例です。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">example.com</a>

もっと見る

親要素をクリックしたら子要素のリンクを発動させる方法

システム上の設定で自動的にはき出すhtmlの場合とかに有効な手段かもしれません。 a要素が複数でてきてその上の要素をクリックしたら下の要素が発動するような仕組みです。

例えばli要素の中にdiv要素とdl要素がありそこのdt要素内にa要素が入っているけどli要素全体をリンクにしたい場合の対処方法です。

cssでやる方法は一つ上の要素を全体リンクにする方法はありましたが子要素のリンクはなかったのでjQueryを使ってご紹介します。

もっと見る

ワードプレスでデバッグログをダッシュボードに表示させる方法

ワードプレス運用中のサイトのエラーログを出力させてそれをダッシュボードで見る方法をご紹介します。

ログ出力方法は結構いろいろなサイトに書かれているのですがそれをダッシュボードに表示させる方法がなかったので作ってみました。WP_DEBUGを使ってデバッグモードをtrueにすれば表示させられるのですが、運用中のサイトにログが出力されてもいけないのでログファイルに保存するようにします。

まずはログファイルに出力させる方法は簡単です。

もっと見る

簡単！グーグル翻訳で自社サイトを多言語化

今回は簡単にサイトを多言語化する方法をご紹介します。 当サイトにも実装しておりますが、5分で出来ます。翻訳ツールにはグーグル翻訳を使います。翻訳精度はご存じだと想いますがたまに変な翻訳しますのでご理解の上ご使用ください。最近はだいぶ翻訳精度も上がっております。当然ですがグーグルアカウントが必要になります。

ビジネス向けツールのグーグル翻訳を使います。下記公式サイトです。 ⇒ウェブサイト翻訳ツール

もっと見る

簡単ファビコン作成！ファビコンジェネレーターのご紹介

サイトを作成する上で必須になってきていますファビコンについてご紹介します。 サイト表示にはわかりやすいfaviconを入れることがもはや当たり前になってきていますが、最近は対応ブラウザや機種によっても変わってきますので一括で出力できるFavicon Generatorをご紹介します。

⇒公式サイトはこちら

もっと見る

簡単に画像をリサイズする方法

最近画像のリサイズが簡単にできないかなと調べておりました。ソフトやアプリは多くありますよね。

iPhoneならImageResize、Simple Resize、バッチリサイズなどなど、Androidなら画像縮小 Image Shrink Lite、写真リサイズなどなど、最近はインスタ用に編集できるアプリ、InstaSize-フォトスタジオ画像加工＆コラージュ編集などがありますよね。

WindowsならirfanviewとかMacならiMage Toolsとかまあ、簡単に画像がリサイズできるアプリって多いですね。

さてアプリを使っても良いのですが、ウェブ上でさくっとリサイズ出来るサイトはないものかと調べたらありましたのでご紹介します。

もっと見る

CSSだけでInstagram風のフィルターが使えるcssgramが便利

インスタグラムはやってますね、私も1年ほど前に登録したもののあまり使っておりません。。。さてそんなインスタグラムの写真フィルターのようなライブラリがありましたのでご紹介します。

簡単に言えば、CSSgramはCSSで画像をInstagramのようなフィルターっぽく編集できるライブラリです。

ここでやっているのは、基本的に画像にグラデーションオーバーレイ、フィルタやブレンド機能を使って似せているような機能です。

簡単にInstagram風のフィルターが使うことができます。

対応ブラウザはIE（インターネットエクスプローラー）は対象外となっております。Google Chrome、Firefox、Opera、Safariが対応しているようです、edgeは対応しているのかな、cssの問題なのでおそらく対応していると思われますが。。

こちらは公式サイトです。⇒CSSgram test sheet

もっと見る

特定のサイトにアクセスできなくなった対処法

なぜか特定のサイトだけにアクセスができないということがありませんか？

私はありました。すごく重用なサイトでもなかったので特に気にしていなかったのですが、どうもこのパソコンだけがアクセスできないということがわかったとき、原因を調べてみました。

原因はいろいろあると思いますが今回はウィルスソフトでした。ESET NOD32というソフトを長年使ってきたのですが今までこんなことなかったのですが、Macだとうまくいかないようですのでその対処法をご紹介します。

今回の設定はMac版に限ります。

もっと見る

CSShakeの使い方と紹介

今回はブルブル震えて注目してしまう動きCSShakeをご紹介します。

jQueryのプラグイン jRumble とかでもありますが今回は簡単に導入できて実装できるCSSでのご紹介です。

CSSShake公式サイトからダウンロードして使います。こちらの公式サイトにも使い方は載っておりますが、簡単に説明します。

インストールはnpmかbowerよりできます。公式サイトからダウンロードしても良いです。

もっと見る

HOVER.CSSの使い方

今回は手軽にhoverアニメーションできるhover.cssのご紹介です。hoverしたら動きが実装できます。

以前 CSS3でのアニメーションライブラリanimate.cssの使い方のご紹介しましたが、今回はhoverに特化していますのでcssを読み込んでクラスを付加するだけでhoverするときに限りますが簡単にアニメーション実装できます。

Hover.css公式サイトにもサンプルがあります。デモページの内容はこちらの公式サイトと同じです。

もっと見る

ワードプレスをバージョンアップしてCSSが崩れる現象について

今回はワードプレスについてです。

ワードプレスでアップデートしたらなぜかスタイルが崩れたということはありませんでしたでしょうか？

いろいろと原因があると思いますが今回はfunctions.phpにwp_enqueue_styleで読み込ませている場合に限りますがその対象法をご案内します。

もっと見る

Bootstrap3のアコーディオンメニューを縦から横列に表示

CSSのフレームワークを使って制作されている方、特に手っ取り早く良い感じのデザインが出来るBootstrapを使っている方は多いと思います。私もその一人です。

Bootstrap1.4の段階から便利に使わせてもらっております。使いやすくてカスタマイズしやすいです。当初はLESSだったのですが最近になってSASSになりとても便利になりましたね。

さて本題です。Bootstrap3のCollapse collapse.jsの項目にアコーディオンメニューのサンプルがあります。このサンプルはひとまとまりにしてありますが、どうにかカラムにいれて列にしたいと思って調べました。中々無いんですね。

海外のFAQで同じような質問をしている方がいらしたので同じようにしたらうまくいきましたのでその設定を載せておきます。

もっと見る

CSS3でのアニメーションライブラリanimate.cssの使い方

ウェブ上でも最近は動きのある要素を取り入れているサイトも多くなってきました。アニメーション動作を取り入れる場合はJavaScript（主にjQuery）が多いのですが、実はCSSだけでも動きのある要素を出すことも出来るんです。まずは公式サイトで動きを確認します。いろいろ出来ますね。

CSS3になって出来る要素がだいぶ増えてきました。JavaScriptでしか出来なかったこともCSSだけで出来る要素も増えてきたので下記のようなブログなどをチェックしてみると良いでしょう。

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

CSS3は要素によってはまだ対応していないブラウザもありますので HTML5/CSS3ブラウザ対応状況確認のサイトなどでどのブラウザ対応状況を確認してみると良いです。

もっと見る

Unicodeのコードから文字列変換そしてデコード

文字コードをユニコードの値から文字列を出力するプログラム関数 String.fromCharCode()というのを使ってプログラムを作ってみます。

これを使うことでちょっとした暗号文が出来ます。暗号って言うほどでもないですが文字を数値に変換してくれるので数値ばかりなので普通に人には分からないと思います。

ただこの数値は分かる人には分かります。しかも文字コード表もありますから見ていけば分かります。簡易の暗号文といったところでしょうか。

もっと見る

BMI値計算プログラム

健康志向のブームはいつもありますね。健康に気を使う人多いと思います。

運動してダイエットとかもそうですよね。テレビでもよくやっています。健康な身体作り。

身体が資本というのは病気になって初めて分かるものです。私もあまり運動していないので身体もたるみっぱなしで最近は完全に引きこもり生活です。パソコンでの作業が多いのであまり運動することがないのです。

座りっぱなしもよくないということなのでスタンディングワークしております。何年か前にもやりましたが1ヶ月ほどで1kgはやせました。最近はずっと立ちっぱなしで大変なのでスタンディングワークを多めで座って作業もしています。

病気をしない身体作りというのはとても良いことですね。背筋ともも肉を鍛えるとダイエットには効果的と効いたことがあります。

もっと見る

クラウド時代にオススメしたいメモアプリ

最近メモしていますか？私はメモしまくっています。ウェブの業界は流れが速いので情報をつかむのが大変です。

そこでオススメしたいメモアプリをご紹介します。使う用途としては覚え書きや物の価格とかライブラリ、プラグインなどの使い方などもちろんクラウド同期でスマートフォンに同期します。

因みにEvernoteは定番ですが資料や気になる情報のウェブページ、日記などに使っています。これも便利ですが結構な情報量がある場合に使います。

オススメのメモ帳は・・・

もっと見る

https化はもう必須！？SSL/TLSの基礎知識

ここ最近はGoogle様の推奨でHTTPS化が進んでいます。ただしこの暗号化には料金がかかります。コストがかかるのでなかなか手が出なかったのですが、最近は無料のSSLやSNIなどの格安の証明書がでてきています。各種サーバー会社も提供しております。IPベースよりもネームベース（SNI）のSSL証明書がとてもお得です。

SSL証明書を一つとるのに年間3万ぐらいかかっていました。ちょっと昔は7万円ぐらいとか。。。IPベースの場合は未だ高いですがそれでも2万円ぐらいから提供されています。ネームベース（SNI）のだと5000円切る価格で提供しています。

SSL（Secure Socket Layer）とは、インターネット上でデータを暗号化して送受信する方法のひとつです。TLS（Transport Layer Security）は、SSLをもとに標準化させたものです。現在はTLSがの暗号化が一般的ですね。

SSLにはセキュリティ問題があり、サポート終了に向けた対策が進んでいます。それにともないSSLは今後利用されなくなりTLSがメインになってきていますが、暗号化のことをSSLと呼んでいることが多いようです。一般的な表記はSSL/TLSとします。

もっと見る

もうアマゾンプライムに加入されましたか？

アマゾンのサービスは最近はとどまることを知らないですね。

私もアマゾンのサービスを利用していますが満足度は高いです。

アマゾンプライムサービスのご紹介

• お急ぎ便、お届け日時指定便が使い放題（ 無料のお急ぎ便で、自宅でもコンビニなどの店頭でも受け取れる）
• 会員限定先行タイムセール（タイムセールに30分早く参加できる）
• Kindleオーナーライブラリー( 対象のKindle本から好きなタイトルを毎月1冊無料で楽しめる)
• プライム・ナウ（2時間の配送、対象エリアは東京都、神奈川県、大阪府、兵庫県の一部地域です。1時間以内配送は890円1回当たり2500円以上、商品は1個から購入）
• プライム・ビデオ(映画もTV番組も見放題)
• プライム・ミュージック（100万曲以上が聴き放題）
• プライム・フォト（好きなだけ写真を保存可能）

もっと見る

CSS管理にSassという手はいかがでしょうか？

今回はCSS拡張メタ言語をご紹介します。

なにそれ？って言う方も多いと思います。大まかに分けるとLESSとSassに分かれます。LESSの方が学習コストは低いですがSassはLESSを含んでさらに出来ることが多いです。

Sass公式サイト

LESS公式サイト

でSassとかLESSとかってなんなんだっていうことですが、簡単に言うとCSSをより簡単に記述しようってことです。

もっと見る

ウェブディレクターが覚えておきたいマークダウン記法

さてマークダウンとは何でしょうか？

HTMLに変換できる軽量なマークアップ言語なんです。 実はこのブログもマークダウンで書いています。

HTMLでタグを書くのはちょっと面倒なのでこの記法を覚えると割とらくにHTMLがかけます。といってもすべてのタグを網羅しているわけではないのでちょっとしたメモ書きやブログなどでよく利用されています。マークダウン対応エディタなどで確認が出来ます。

以下エディタAtom、MarkDown#Editor、MarkdownPad、MacDown、sublimetext、etc…私はSublimetextです。その他簡単に確認できるブラウザ上で編集できたりするブラウザエディタなどもあります。Stackedit、Dillinger、Marxico、Wri.peなど結構探せばあります。chromeのブラウザならMarkdown Preview Plusというエクステンションもあります。

覚えるルールはだいたい10個ぐらいなので比較的に覚えやすいですね。

もっと見る