先日の3連休に鳥取砂丘近くにある砂の美術館に行ってきました。この日はたまたまイベント期間中で3Dプロジェクションマッピングも見ることが出来、30分おきに上映していたので実際は10分弱ぐらいの映像だったので2回も鑑賞。
子供も結構喜んで見ていたようです、良かったです。
イベント期間中は営業時間も21:00まで延長されていました。この期間は鳥取砂丘でもイルミネーションも行われてたので見に行きましたがこの日はあいにくの雨。屋台も出ていたけど寒かったですね。
さて、今回は簡単に地図を設置できるプラグインのご紹介です。あまりにも有名なので説明が不要かと思いますが、簡単に説明しますと要は地図表示です。私はグーグルマップをプラグインでの表示はしたことなかったので今回初めて使ってみました。
基本的に使い方は簡単でしたがすべて英語というところがネックかもしれません。あとは表示させるだけならばAPIは必要ないのですがグーグルの機能を入れる場合はMaps JavaScript API取得は必須です。
普段はgmaps.jsというライブラリを使って表示させています。簡単に表示させるだけならプラグイン使った方が楽かもしれませんね。
さて今回はワードプレスのプラグインの自動化ができるプラグインのご紹介です。自動で常に最新の状態に保つことが出来るのでとても便利です。
しかし、いろいろサーバーに入れたのですがどうもサーバーによってはこのプラグインの意味をなさないというか自動更新をしてくれません。
おそらくセキュリティー上の問題だと思われます。使えるサーバーだと恩恵を受けると思いますので一応使い方などをご紹介いたします。
簡単にプロ並みのデザインという感じで作成できてしまうデザインツールのご紹介です。 デザインのスキルはなくてもテンプレートから選ぶだけで、必要な素材をドラッグアンドドロップで簡単に出来てしまうツールです。
そしてチームでそのデザインを共有して使うことが出来ます。テンプレートを利用してあとはちょこちょこしてしまえば簡単にできあがりますのでポスター、フライヤー、パンフレット、プレゼンなど一般的なものからソーシャルカバーのようなfacebookカバー、インスタ画像、Pinterest、tumblrなどにも利用できます。スマホからの編集も出来るアプリもあるようです。
今回はワードプレスプラグインFile Managerのご紹介です。これはどんなプラグインかと申しますと、ダッシュボードにFTPソフトが入ったようなプラグインです。FTPソフトがなくてもワードプレスのファイルが扱えるということがメリットです。各ファイルの編集、削除、アップロード、ダウンロード、コピーなどが簡単にできます。
今回はワードプレスの値をJavaScriptに渡す方法です。ワードプレスからじゃなくてPHPからJavaScriptへ値を渡す方法もご紹介します。
PHPの値をJavaScriptで処理を行う場合などに有効ですね。最近はJavaScript処理多くなったのでこのようなパターンもあるかと思います。
単純にPHPの値をJavaScriptに渡すだけなのですがワードプレスの場合だと関数を使わないとうまく処理できない場合がありますので一応区別しておきます。
今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。
記事内はじめの画像を取得する方法は結構ありますが、よくよく探したらあったかもしれませんがリンク先の画像を取ってくる方法がなかったので自作しました。とはいっても単純に条件をつけただけなのです。
一応1番目じゃなくて2番目の画像を表示させたい場合などにも設定できるようにしてあります。
画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします。以前はフォトリアを利用していましたが似たような感じを思わせます。クオリティーも高いですが日本語対応はまだされていないようで、そこが難点ですが利用者が多ければ対応されるかと思われます。ただし日本語検索は可能です。2018年9月からのサービス開始なのでまだまだ新しい後発の画像素材サイトになります。
似たような画像を探してくれる写真検索もできていい感じです。サブの素材サービスとして使えるかと思います。ご自身でとった写真の販売することも可能です。50%が収益になるようです。
強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているようです。
ようするに薬で覚醒せる(スリープさせない)という意味合いなのでしょう。さて、Caffeineは単純な仕組みでしたがAmphetamineはいろいろと設定ができるようになっておりますが、結局シンプル設定にしました。日本語対応はしていないのですが設定自体は割と簡単です。
使い方などを見ていきましょう。
さて、いつもなら安定してきたぐらいにアップデートを行うのですが今回は時間もあったのでmacOS Mojaveにアップデートをしてみました。
入れてみてすぐに感じた感想は重い。。。もっさり感が半端ない。。。ここまで遅くなるかなという感じになりました。因みに使っているMacは MacBook Pro 2800/13.3 MGX92J/Aで2014年中頃のモデルをカスタムしておりCPUは3 GHz Intel Core i7でメモリは16 GB 1600 MHz DDR3となっております。そこそこハイスペックモデルにしてありますが重く感じます。アップデートも今回までかなと思う今日この頃です。
最近では大分なれてきたせいかそこまで遅いとも感じなくなりました。当初は固まることが多かった気がします。あとバッテリーの減りも早くなった気がします。。。マイナスばかりですがこのあたりはアップデートで改善されると思います。
今回はムーバブルタイプからワードプレスのインポートについてです。デフォルトで使っている場合の記事は多くありますのでそちらをご参考になさってください。今回はアーカイブテンプレートでアーカイブパスを変更されている場合にインポートするアドレスと異なっているときの対処方法をご紹介します。
ムーバブルタイプでエクスポートしたときにBASENAMEという項目がありますがここがファイル名になります。post_1234という風に出ているかアルファベットで記載されているはずです。
今回は意図的にアーカイブパスを変更していて例えばpostがentryとか時間の数値をアドレスにしている場合はBASENAMEと相違ができますのでそこのところを対処してインポートする方法をご紹介したいと思います。
今回は正規表現です。たまにしか使わないのですぐに忘れてしまいますのでまとめておきます。 文字列の検索時にある条件にマッチしたものを表示させるものです。
エディターにも検索条件に正規表現という検索方法もあるかと思います。単純な条件ではなく複雑な条件で表示させることが出来てとても便利です。データ検索と置換は重要ですね。
簡単にまとめておきました。覚える項目は4項目だけです。
ワードプレスで記事を一括削除する方法が意外と簡単なことに気がつきました。記事を大量に削除する場合はあまりなかったのですが、調べてみたら簡単なことでした。
大量のデータをインポートする時に失敗したときなどに削除して再度インポートする場合にこの方法は有効ですね。 だいたいはデータインポートで失敗したときや入れ忘れたデータなどに利用したら良いかと思います。
その他プラグインもあります、こちらも簡単です。
大分間が空きました。。。さて今回はGmailをご紹介します。最近ではチャット系アプリが主流ですが、それでもやはりメールはなんだかんだで使います。いつも悩まされるのはスパムメールですが、Gmailを使えばほとんどそのスパムに悩まされることはなくなります。
最近のクラウド系のメールはほとんどフィルタリングされているので安心して使えますね。マイクロソフトのoutlookだったりアップルのicloudもそうですが、このあたりは無料で便利に使えますね。
独自ドメインで使う場合はGmail一択ではないでしょうか。ビジネス用のGsuiteがオススメです。以前にGoogle apps for workを紹介したのですが、アップデートされ名前も変更されました。中身はほとんど同じです。
大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。
大山寺山門から大神山神社方面に神社参道をあるいて途中から大山寺本堂へ続く道にいって本堂にメイン傘がありそこから下って有料写真撮影ポイントをとおって大山寺山門に戻ってくるコースです。
夏にぴったりで和風の幻想的な味わいがとても良く感じました。
お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来場しているようです。
最寄り駅は一畑電車北松江線「大津町駅」から徒歩で15分ほど歩いた場所にあります大津神立河川敷公園で20時00分~20時50分の間花火大会が行われます。
米子からのルートとおすすめ場所をご紹介します。
さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。
割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるという点では簡単に使えて違う環境の方にも勧めやすいです。デベロッパーツールを立ち上げることから始まります。
ブラウザの縦3つの点アイコン(設定)からその他ツール-デベロッパーツールを開きます。(Option + Command + I [Ctrl + Shift + I ])
今回はエディターのご紹介になります。かなり特殊なVimエディターをご紹介したいと思います。便利なエディターAtom、SublimeText、VisualStudioCodeとは訳が違います。
ちょっと扱いにくいエディターVimなんですがローカル開発設定などをしているとちょくちょく出くわしてしまいます。このエディターは普通のエディターではなくいろいろとモードがあり普通に入力するのも大変です。まずはvimtutorから練習することをおすすめします。
ターミナルを立ち上げてvimtutorと入力すればできます。ターミナル内にてvimの練習ができますが以下のようなアプリの形式もあります。
さて、先日14日にリニューアルした境港の通称鬼太郎ロードに行って参りました。鬼太郎に会える町として新たに妖怪を追加して約800mの通りに177体の妖怪ブロンズ像がお出迎え、ゾーン分けをして再配置してあるようです。お昼はオープニングセレモニーやら暑い中着ぐるみの鬼太郎のキャラクターたちが練り歩くといった光景が予想されます。水木しげる記念館が無料開放もされ、初日のイベントは盛り上がった模様です。
メイン通りを歩行者天国にしたのは正解だったです。縦の通りは一部車も通行できるようになっているようですが、道の幅は広くなり安全性はアップしたので子供も気軽に楽しめます。今回は夜行ってみたのでその様子をご紹介します。
Flexbox(Flexible Box Layout Module)とは今時のレスポンシブに対応したレイアウトスタイルです。上下中央の配置や等間隔の配置、固定幅と可変幅の配置など使い方は様々、3カラムレイアウトも組めます。IE11以降のモダンブラウザは対応しておりますので問題ないかと思います。
しかし、そろそろGrid Layoutも使われつつあります。格子状のレイアウト、ページ全体のレイアウトはGrid Layoutが有効で、横並びのレイアウトはflexboxが向いているので状況に応じて使ってみましょう。
今回はウェブサイトの監視アプリのご紹介です。以下からダウンロードできます。
たまにサーバーがダウンしている場合があり表示できないことがありますがこのアプリがあれば落ちているかどうかが確認できます。
よくあるパターンが自分のパソコンで見られないということがありますがこの場合はウィルス対策ソフトで見られなくなっている場合などもありますので一概に落ちているという判断はできません。サイトツールなどでも確認することができますが今回はアプリをご紹介します。
上記アプリ作成しているサイトですがいろいろ作成しているようです。
ここ最近は天気も良いので出雲日御碕(いずもひのみさき)神社に行ってみました。
出雲大社から約10kmぐらい先にあります。海沿いを車で15分ぐらい山道を進むと神社につきます。ほぼ一本道なので迷うことはなさそうです。灯台の手前の信号を右に曲がるぐらいです。まっすぐ行くと灯台の駐車場に着きます。思ったほど大きくはないですが、鮮やかな朱色の社殿が印象的でした。人が多く参拝している感じです。
全国的にきている感じがします。広島ナンバーや熊本ナンバーなどがありました。そして近くの灯台が景色が絶景でおすすめポイントなのでご紹介します。あまり絶景に疎い私ですが灯台の上からの景色は絶景です、、絶景なんですが怖さもあります。
最近はCSSフレームワークはBootstrap3からBootstrap4をメインにして作業しております。かなり使いやすいです。ほぼこのフレームワークだけで完結できる仕様になってきました。
さてBootstrap4でtable-responsiveがうまく機能しないということに気がつき試したところ英字の場合だと機能しているなと気がつきました。日本語表示だと7、8列以上なら横スクロールが出てくるのですが5列ぐらいなら無理矢理縦表示になってしまうのでその対処方法をご紹介します。
今回は純粋なCSS画像ホバー効果ライブラリをご紹介します。画像をマウスオーバーするとテキストが表示されるCSSライブラリになります。実装も簡単でクラス指定をすることで40種類以上の効果を体験できます。以下のアドレスから確認できます。
ワードプレスに特定のページにmeta name="robots" content="noindex,nofollow"
をつける場合はプラグインを利用するかヘッダーに条件分岐でいれるかだと思いますがその方法をご紹介いたします。
SEOプラグインでは有名なAll in one seoとYoastを使った場合とプラグインなしの場合の方法をご紹介いたします。
さて今回は簡単にご紹介、そもそもそんなにvagrantをアンインストールしないのですがそういう機会があったので覚書で記載しておきます。
Mac版のvagrantってアンインストールってなぜか手動しかフォルダ削除する方法しかないようでしたがuninstall.toolというものを見つけたのでその方法をご紹介します。
全部を削除できるわけではないですがある程度削除してくれます。あらかじめboxは削除します。agrant box remove ubuntu/trusty64などそしてvagrant destroyで削除しておきます。
さて今回はsassを取り上げてみます。sassといったらcompassが出てくるほど有名ですが、すでに開発終了してから4年以上たっているわけでしてしかもコンパイラとしての機能しか使っておらず、他にいろいろ調べたらlibsassというライブラリがありsassをC・C++で実装したものということです。
Node、Ruby、Go、Python等の言語からも使えるようでしてnodeなら必ず入れるのでnodeで提供しているnode-sassを入れることにしました。nodeとnpmはセットなのでpackage.jsonのscriptsに記載して運営する方法をご紹介いたします。
gulpとかもありますがいろいろ入れたりするのが面倒なのでpackage.jsonだけで使う方法です。とてもシンプルで使いやすいですのでおすすめな方法です。
ワードプレスの引っ越しツールは以前紹介した「WordPressのお引っ越しプラグインはAll-in-One WP Migrationが最強」のやり方が一番簡単で良いのですが、データベースだけ変えてファイルはそのままアップロードして使いたい場合や引っ越しツールを使う際にワードプレスの初期画面を表示させたくない場合にWP Migrate DBプラグインが有効です。
同じサーバー内ならこちらの方法が手っ取り早く簡単かもしれません。こちらでテストしたサーバーはよく使われているエックスサーバーで検証してみました。ちなみにこのプラグインはプロ版(有料)があります。プロ版には、無料版では利用できない多くの時間節約機能が付属しているようですが使ったことがないのでわかりません。
数値をカウントアップやカウントダウンのアニメーションを簡単に行うことができるプラグインのご紹介です。data属性で指定できて簡単そうなものを選びましたがすでに3年前のものですね。同じ名前のプラグインがありますがこちらの方が使いやすかったので選びました。あまり有名ではなさそうです。ですが機能は豊富でいろいろと使えそうです。
以下は同じようなカウントアニメーションができるタイプのものです。countUp.jsが有名どころでしょうか。
ワードプレスにもwp_is_mobile()という関数がありますが「スマートフォン」と「タブレット」が一緒にモバイルと判定されているかなりざっくりな処理なので同じようにjavascriptでもざっくり判定を作成してみました。PCとそれ以外という感じだと思っていただければわかりやすいと思います。
アンドロイドやiOSなどにわかれるようにしてあります。
その前のスマホはgoogleのNexus5Xを使っておりました。これはこれで満足しておりましたが、あるつてでXperiaが安く購入できたので変更しました。iPhone3G、iPhone4S、iPhone5、Nexus5Xという流れで使ってきました。割合家電でもソニー製品が多いのでテレビ、レコーダー、ビデオカメラ、ボイスレコーダー、スピーカー、nasneなども使っていたりするので連携する点では良かったかもしれないです。
ウォーキング中などでラジオを聴くようにしているのですが、以前はFMラジオ機能付きのボイスレコーダーで録音して聴いていたのです。あまり音質は良くないです。
しかも今のタイプは予約録音が出来るようですね、、、ちょっと昔のタイプなので録音は手動でした。結構忘れてしまったり、音声もクリアではなかったのですが聴ければ良いと思っていたのでそれで使っておりました。
ただスマホとボイスレコーダーを一緒に持って出ていたのでスマホ一台で聞ければ楽だよなという考えはありましたが1年間はこの形で使っておりました。
今年スマホを変えたのでそのときにラジオもスマホに入れて聴いた方が楽!ということでラジオ録音方法を検討し始めました。 ドコデモFM、LISMO WAVEなども検討したのですが録音が出来る点を考えると別の選択肢になりました。
主にサイドメニューで固定ページを表示させようと考えておりました。それで子階層があれば子階層を表示させて一番下の階層になれば同一階層を表示する方法をご紹介致します。
サイドメニューに表示する際に便利かと思い調べてみました。
今回はワードプレスのカスタムメニューをトグルダウンで表示させる方法をご紹介します。 クリックしてサブメニューが表示させる方法になります。スマホメニューなどにはよく使われているかと思います。
ワードプレスでローカル環境で見てもらう必要があり、静的ファイルの出力を希望されていたのでそれが出来るプラグインを探しました。静的サイトの生成プラグインは主に3つだけですね。
希望としてはダウンロードしてファイルを渡すという形が理想なのですが一番理想に合うプラグインはSimply Staticでした。3点の違いと方法を簡単に説明します。
あってて良かったバックアップデータということが多々ある今日この頃でございます。
多くの利用者がいるワードプレスなんですが、実は多いが故に狙われてしまうことも多いのです。壊れてしまったり、ウィルスに感染する前にバックアップがあれば元に戻すことも可能です。
さて、バックアッププラグインと言えばBackWPupという方も多いのではないでしょうか。以前は使っていましたが、今のところよほどの理由がない限り使っていません。
これを元々使っていたのは復元機能があったからなんですが、今はないですしデータ保存するだけなら他のが簡単で良いです。自力で復元するのは結構大変です。
アイコンフォントで最も有名なfontawesomeですが5になってますます使い勝手が向上しました。推奨はJSを使ったSVGと表示となっております。Webで最も人気のあるアイコンセットをFontAwesomeを使って、ベクターアイコンとソーシャルロゴを表示させてみましょう。
fontawesome5はFree版とPro版があります。Pro版は有償となっておりますが違いとして929のフリーアイコンが使えますがProは1,387個のアイコンが使えます。そして各アイコンのクラスにはRegular,Solid,Light,Brandsという項目に分かれています。
Regular,Solid,Lightは同じアイコンでも太さや形が違っていたりしますがFree版は主にSolidでRegular,LightがPro版というくくりになっています。Brandsはその名の通りブランドやロゴなどがその項目になっております。公式サイトは以下になります。
そもそもSVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)で、拡大縮小、変形してもキレイなままでぼやけず荒れないXMLベースの画像のことです。Web上でSVGを使って表現することが出来ます。イラストレータのデータも同じベクターデータです。
最近はアイコンフォントよりもSVG化が主流になりつつあります。アイコンフォントは、元々はテキスト表示を改造してアイコンを表現していた物でしたが最近は直接アイコンを描画するSVG化に流れが向いています。
有名なアイコンフォントFont Awesomeもバージョンが5になってJSを使って描画していますがSVG推奨となっています。もちろん以前のアイコンフォントとしても使えます。
さて今回はオリジナルのアイコンを作ってSVGで表示させてみたいと思います。HTML版とWordPress版の2つのバージョンでお届け致します。
DMARC(ディーマーク)とは迷惑メールの送信者から偽装を防ぐ仕組みになります。まだ対応サーバーは少ない気がします。
その仕組みに当たってSPFとDKIM(ディーキム)も知る必要があります。この2つの認証に失敗したときにどのように動作するのがDMARCになります。
Dashとは、ドキュメントマニュアルとコードスニペットマネージャになります。
サポートされているマニュアルは150の以上あり、オフライン環境でのドキュメントを検索することができます。そしてエディターとの連携も出来てAlred、Atom、Sublimetext、CotEditor、VimやCodaなどから呼び出すことも可能です。
それからサードパーティー製のドキュメントからも検索することも出来ます。例えばStackOverflow、Github、PHPのパッケージライブラリPackagist、Rubygemsやチートシートなども利用できます。ドキュメント検索ならこれひとつで間に合いますね。
今回はマニュアルではなくスニペットの使い方をご紹介します。よく使う文言とかキーワード、変数などは登録して使うと効率的ですね。因みに有料になりますが私は割とAlfredのスニペットを使うことが多いです。
アマゾンエコーを購入したので使ってみた感想などを述べたいと思います。1週間ほど使ってみましたがこんなことが出来るとかこんな感じで使うと良いのかなという参考になれば思います。
第一印象は結構音が良いですね。BGMを聴くスピーカーとしては良いのでしょうか。あとバッテリー駆動ではないので電源アダプターが必要というのが残念です。
設定はスマートフォンかパソコンから出来る模様、私はアンドロイドのスマートフォンなのでそちらから設定を行いました。
正月明けの3連休に大江ノ郷ヴィレッジに行ってきましたのでその感想を述べたいと思います。
場所は八頭町なので鳥取市の下あたり、鳥取市にはちょくちょく行くのですが、鳥取市から約20分ぐらい南下したところにあります。無料区間のバイパスで鳥取自動車道の鳥取ICから鳥取南で降りましたが、用瀬PAから降りた方が近かった気がしますね。
ヴィレッジはまだ出来てから1年たっていないので建物自体はキレイですね。現在でグーグルマップを見てもまだ建物自体ありませんね。ココガーデンは2008年からあるようです。パンケーキで有名。ココガーデンはカフェスタイル、新しく出来たヴィレッジを見てみたかったのでそちらに行きました。
明けましておめでとうございます。
本年もよろしくお願いします。
今年の初詣は比較的天候も良く人も多かった気がしますね。
昨年に引き続き勝田神社の夜中に行って参りました。大晦日深夜の初詣は昨年に引き続き2回目。
昨年より30分早く出たのが吉でした。今年はかなり寒かったです。
あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...
19 Feb 2022
今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...
12 Feb 2022
Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass(いまここ) Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...
22 Jan 2022
明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 熊野大社 昨年同様に大晦日の夜に出発しました。子供が大...
10 Jan 2022
最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...
02 May 2021
ウェブエンジニアの須山のブログです。
WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。