はてなブックマーク

先日、ブログのアイキャッチ画像や SNS のカバー画像などを、ブラウザ上で簡単に作れる「GPIG」という Web サービスを作ったのでご紹介します！ こんな感じの幾何学模様な画像をブラウザ上で簡単に作れるWebサービスを作ってみました。https://t.co/6onCWsTckA ブログ、SNSのアイキャッチやカバー画像などをさくっと作るのに便利かもしれないので、よろしければ使ってみてください！ pic.twitter.com/kwRj30n2Cd — Ko Takagi (@ko31) June 27, 2018 GPIG について こちらがその Web サービス「GPIG」（GPIG は GeoPattern Image Generator の頭文字です）のページになります。 このサービスの一番の特徴は、ちょっと小洒落た幾何学模様の背景を自動的に生成してくれること。 例えば、こんな雰

WordPress で投稿のスラッグを英語に自動変換してくれるプラグイン「Simple Slug Translate」を作りました。 Simple Slug Translate — WordPress Plugins Simple Slug Translate について 使用方法 パーマリンク設定に投稿名（%postname%）を使用している場合、例えば新しい投稿を作成してタイトルに日本語を入れると「%E6%B2%88%E9%BB%99%E3%81%AF%E9%87%91」みたいなパーマリンクができあがって、ちょっと残念な感じになりますよね。 そこで「Simple Slug Translate」を入れると、タイトルの文字を翻訳して自動的に英語のパーマリンクを作ってくれるようになります。 パーマリンクを手動で変更した時はちゃんとそちらが反映されますので、自動変換された文字列をそのまま使うのも

Alexa や Google Home といったスマートスピーカーの話題を目にする度にいつか試したいと気にはなってたんですが、最近 AVS（Alexa Voice Service）というサービスを利用すれば Raspberry Pi をスマートスピーカーにできるということを知りまして、ちょうど近頃めっきり存在感が薄れ気味だった我が家の Raspberry Pi でも試してみました。 Alexa Voice Service なお、うちのラズパイは Raspberry Pi 3 model B です。環境についての詳細は、導入した時の過去記事をご覧ください。

WordPressのバックアップや引っ越しにすごい便利だよ！と噂を聞いていたプラグイン「All-in-One WP Migration」を使ってみたんですが、確かに良くできていて感心するほどだったので紹介してみたいと思います。 「All-in-One WP Migration」のインストール All-in-One WP Migration — WordPress プラグイン WordPress の管理画面メニューから [プラグイン] → [新規追加] の画面へ移動し、キーワードに「All-in-One WP Migration」と入力します。 All-in-One WP Migration が表示されたら「今すぐインストール」ボタンをクリック、インストールが完了したら「有効化」もクリックします。 特別な設定も無いので、このようにインストールができればもう準備は完了です。 バックアップを取る

初めてのラズパイを買いました！ 最近、うちの娘が YouTuber の影響もあって Minecraft に興味を持ち始めたんですよね。 Minecraft はニンテンドー3DS とか PC 版とか色々なハードでも遊べるわけですが、Raspberry Pi で遊べる「Minecraft Pi Edition」だとプログラミング学習もできるって話を聞いたことがあったので、もし今後はまった時にどうせならそこまで使える環境を用意しておこうと思って、今回初めての Raspberry Pi を買ってみました。 Raspberry Pi で流行りの IoT に乗っかってみたいなあというのは自分も前から思ってたし、ちょうどいい一石二鳥のお買い物です。 というわけで、初めて買った Raspberry Pi について入門者の目線で覚えたことをまとめておこうと思います。 Raspberry Pi 3 model

前回のエントリで、Raspberry pi 3 model B に必要な周辺機器の準備とそれらを接続するところまでできました。 今回はその続きとして、Raspberry Pi を起動して OS をインストールする手順をまとめてみたいと思います。 OSのデータをダウンロード まず始めに、Raspberry Pi 用の OS データをこちらの URL からダウンロードしておきます。 https://www.raspberrypi.org/downloads/noobs/ Raspberry pi 3 model B のモデルは無線 LAN に対応しているので、今回はネットワークインストールが可能な軽量インストーラの「NOOBS LITE」をダウンロードしました。 ネットワークに接続せずにインストールするという場合は、普通の「NOOBS」をダウンロードすると良いかと思います。 microSDカー

※この記事は「家庭を支える技術 Advent Calendar 2016」の9日目です。 我が家は共働きのため仕事の都合で帰りが遅くなってしまったり、学校が臨時でいつもより早く終わるといった時に、子どもが親より先に帰宅して留守番をするケースがたまにあります。 そんな場合、親の立場からするとひとまず子どもが無事家に入ったかどうかが気になるものですが、うちでは WordPres の自作テーマを使って子どもからの帰宅確認メールを受け取れるようにしています。 その自作テーマというのがこちらの「pigeon」です。（「pigeon」という名前は伝書鳩のイメージ） pigeon | みまもりメールWebアプリを構築できるWordpressテーマ このテーマを使うと、WordPress 上で簡単な初期設定をするだけでワンクリックでメール通知される Web サイトを作ることができます。 利用イメージ 実際

先日の「LINE DEVELOPER DAY 2016」で発表された LINE の新しい通知サービス「LNE Notify」をさっそく試してみたので、その使い方や操作方法をご紹介します。 LINE Notify とは？ LINE Notify は、LINE の新しいメッセージ通知サービスです。 LINE Notify LINE Notify では、外部の Webサービスやアプリケーションとの連携を設定しておくことで、それらの通知を LINE のメッセージ機能でユーザーやトークルームに送信することができます。 現時点で連携できるサービスとしては「IFTTT」「GitHub」「Mackerel」が公開されていますが、API を利用することで独自アプリケーションとも容易に連携させることができるようになっています。 つまり、自分で書いたプログラムから LINE にメッセージ送信することが簡単にでき

WordPress 上で見守りメール Web アプリが簡単に作れるテーマ「pigeon」を公開しました。 pigeon | みまもりメールWebアプリを構築できるWordpressテーマ 離れて住んでいる一人暮らしの親から朝晩メールを送ってもらい安否確認をしたり、留守番を頼んだ子どもが無事に家に着いたか連絡を受け取ったり・・・。WordPress にインストールするだけで、そんなシンプルなみまもりメールシステムを手軽に構築することができます。 詳しい説明は、上記のテーマサイトをご覧ください。 一般的なホームページやブログを作る機能さえも付いていないちょっと変わったテーマですが、興味のある方はぜひ試してみてください！

※この記事は CodeIgniter Advent Calendar 2015 の9日目です。 Web アプリケーション用のフレームワークという印象の CodeIgniter ですが、CLI（コマンドラインインターフェース）でバッチ処理を実行したいといった場合にもちゃんと対応しています。 Running via the CLI — CodeIgniter 3.0.3 documentation 以下、簡単なバッチ処理のサンプルを作って試してみましょう。 ちなみに確認環境は最新バージョン 3.0.3 です。 サンプルプログラム まず、このようなシンプルなコントローラを作ってみます。 application/controllers/Batch.php このコントローラをコマンドラインから実行してみましょう。 まず CodeIgniter がインストールされたディレクトリ（index.php が

みなさんの WordPress はセキュリティ対策できてますか？ 世界中の Web サイトの約25%が WordPress で作られているという調査があるほど今や絶大なシェアを誇る WordPress ですが、それに比例して WordPress をターゲットにした悪質な攻撃も近頃増えているようです。（W3Techs、最新Web脆弱性トレンドレポート より） 「じゃ、WordPress のセキュリティ対策って具体的に何をすればいいの？」 そんな方にとても参考になりそうな「WordPress Security Checklist」というサイトがありましたので、その内容を紹介してみたいと思います。 WordPress Security Checklist 全部で32項目もあるリストですが、頑張って見てみましょう！ ログイン画面 まずは、ログイン画面に対しての対策です。 繰り返しログインに失敗した

サイト公開までは開発用サーバで EC-CUBE を作成しておき、完成したらごっそり本番サイトに移行する。また、今使っているサーバーをやめて新しいサーバーに乗り換えたいので、それに合わせて EC-CUBE も移行したい。 そういう引っ越しをしたいケースってよくありますよね。 そんな場合の、EC-CUBE サイト移行手順をまとめてみたいと思います。 前提条件として、EC-CUBE はバージョン2.13.2、移行元・移行先のサーバは同じディレクトリ構成にするものとします。 また、何はともあれ作業をする前には必ず現行サイトのバックアップを取っておきましょう。 リソースファイルの移行 まず、移行前サーバの EC-CUBE 本体のファイルをコピーして、移行後のサーバに設置します。 /data/html 対象は上記のディレクトリになりますので、ごっそり移してください。もちろん、パーミッションも移行元と同

最近、WordPressをいじってると管理画面左メニューのレイアウトが崩れて表示されるようになったのが気になっていました。 調べてみたところ、Chrome バージョン45 と WordPress のバージョン 4.1 ～ 4.4 の組み合わせで利用している環境で発生する現象とのこと。 次期の WordPress 4.3.1 ではこの問題に対応されるとのことですが、とりあえず現状でも行える解決策が2つあるようなのでご紹介します。 【解決策1】Chromeのスリミングペイント設定を変更する 一つ目の解決策は、Chrome のスリミングペイントという機能の不具合がそもそもこの問題の原因であるため、その設定を変更して対応する方法です。 まず、Chromeのアドレスバーから「chrome://flags/#disable-slimming-paint」を開きます。 表示された画面から「スリミング ペ

EC-CUBE で商品を大量に注文した時に、お届け先情報が空っぽになるという問題が起きたので調べてみました。 なお、動作環境は EC-CUBE 2.13.2 です。 原因 色々と調べてみるとどうやら EC-CUBE の潜在的な不具合があり、他にも同様な現象が起こっている問題のようです。 2.11 お届け先情報が空になっている – EC-CUBE 開発コミュニティ – フォーラム #1341 (MySQLでSESSIONをDB保存する際の型がTEXT型なのでデータ量によってはあふれる) – EC-CUBE Trac カートに入れた商品情報はテーブル dtb_session のカラム sess_data に格納されるようになっていますが、DB に MySQL を使っている場合、sess_data のデータ型が text 型のため、沢山の商品を一度に購入しようとすると text 型のサイズ制限を

EC-CUBEには標準でスマートフォンや携帯用のテンプレートが用意されていて、それぞれの端末でアクセスすると自動でテンプレートが切り替わる仕組みが用意されています。 例えば、こちらの EC-CUBE 公式デモサイトも、スマートフォンで表示させるとこのような表示に切り替わります。 これはこれで便利な機能なんですが、レスポンシブデザインなどでテンプレートを一つに統一するなど、この機能が必要ないケースもあります。 そんな時、携帯・スマートフォンテンプレートを無効化して、常にPC用のテンプレートで表示されるようにする方法です。 EC-CUBEは Ver 2.13.2の環境です。 カスタマイズ方法 ネット上でもいくつかやり方が見つかりますが、EC-CUBE 本体のクラス data/class/SC_Display.php を直接書き換えてる方法が比較的多いようです。 EC-CUBE：サイトデザインを

Web サイトやブログでメタタグに指定した OGP 設定を Facebook がちゃんと反映してくれないことがありますが、そんなときは Facebook 側で持っている OGP キャッシュをクリアすることで解決することがあります。 というわけで、Facebook の OGP キャッシュを手動、自動でクリアする方法をまとめてみました。 例えばこんなとき・・・ 例えば、あるブログ記事にこんなアイキャッチ画像が設定されていて、メタタグの og:image プロパティにも画像 URL が指定済みだとします。 これを Facebook でブログ記事をシェアしようとしたときに違う画像が出てしまう・・・。 他にも、メタタグの OGP 設定を変えたけどその変更が反映されないとか、似たような場面はあると思いますが、そんなときにはキャッシュのクリアを試してみましょう。（ OGP 設定に誤りがないことが前提です

Google Analytics の eコマーストラッキング機能を使用すると、サイトのアクセス数だけではなく、ユーザーいつ、何を、いくら購入したかといった売上情報も管理できるようになります。 さて、そんな便利な eコマーストラッキングですが、 EC-CUBE に設定する機会があったのでその手順をまとめてみたいと思います。 設定環境は下記の通りです。 ユニバーサルアナリティクス EC-CUBE 2.13.2 Google Analyticsの設定 eコマーストラッキングを有効にする [アナリティクス設定] → ビュータブの [eコマースの設定] を開き、「e コマースを有効にします」を “ON” に変更 通貨単位を日本円にする [アナリティクス設定] → ビュータブの [ビュー設定] を開き、「通貨の表示」を “日本円 (JPY ¥)” に変更します。 EC-CUBE の設定 EC-CUBE

先日、SUPOCON という初めて作ったバイラルメディアのサイトを公開したのですが、WordPress のテーマやプラグインを存分に活用することで、とても手早く簡単に作れてしまうことが実感できました。 こんなサイトを自分でも作ってみたい！という方も中にはいるかもしれませんので、参考までに SUPOCON の作り方をざっくり紹介してみようと思います。 WordPress の基本準備や最低限のカスタマイズを行い、一時間程度でサイト公開できる状態まで仕上げることを目標にします。 WordPressインストール（10分） WordPressの詳しいインストール方法については省略します。 昨今のレンタルサーバだと標準で WordPress インストール機能が付いているものも多いので、そういうのが使えると一番手っ取り早いですね。 分からない方は「WordPress インストール」で検索するとドッと参考

2018/02/13追記：「サンプル用のドメインを使おう」の説明に “.example” と “.test” の使い分けについて追記しました。 Web システム開発時のテストデータを作成する時、また各種ドキュメントを書いている時など、サンプルの URL を使う場面は多いと思いますが、その時に適当なドメイン名を使うのはやめましょう、という話です。 知っている方には当たり前レベルの話ですが、意外と IT 企業のシステム開発現場等でも普通に見かけることがまだまだありますので・・・。 よく見かける例 例えば、こんなドメインの URL で開発中システムのテストデータを作っていたり、仕様書に説明が書かれていたりする場面をよく見かけませんか？ test.com aaa.com abc.com sample.com dummy.com hoge.com でも、これらのドメインって存在していて、また実際に利

仕事の都合で久しぶりにWindows XP（！）のインストールなどしております。レガシーシステムをいじる作業は、精神衛生上良くないですね。。 さて、その作業に関連してiso形式のディスクイメージを作る必要があったので、そのリッピング作業手順のメモ代わりにまとめておきます。今さらながらOSXでisoを作るのって初めてやりました。 作業手順 CD/DVDをセットする。 アプリケーション ＞ ユーティリティ ＞ ディスクユーティリティを起動する。 セットしたCD/DVDを選択して、ファイル ＞ 新規 ＞ XXXからのディスクイメージ を選択する。 保存ダイアログで、イメージフォーマットに「DVD/CDマスター」、暗号化に「なし」を選択して保存。 作成されたファイルの拡張子を「.cdr」から「.iso」に変更する。 以上、うまくできました。 それにしても、最近はCDやDVDを使う機会がめっきり減っ

Subversionを使っていてバージョン間の差分ファイルをエクスポートする機会は多いと思いいます。 TortoiseSVNならGUI上で簡単にできますが、Linux環境等になるとsvnコマンドで単純にはできないんですよね。 そこでコマンドを使って差分エクスポートしてくれる便利なツールがあるのでご紹介します。 こちらのサイトで紹介されているスクリプトを使わせて頂きます。 GitやSvnなどの差分ファイル抽出決定版 – なんたらノート第三期ベータ まずスクリプトをダウンロードして、実行できるようにセットアップします。 cd /usr/local/bin/ wget https://gist.github.com/raw/1258524/bef227c642d2e94cc0395a0d68505c6abba8e091/export-diff.py chmod +x export-diff.py

WordPressもくもく勉強会@群馬 #1 : ATND 去る7月25日に開催した「WordPressもくもく勉強会@群馬 #1」。当初の想定を超える定員以上の申込みもあって、おかげ様で無事終えることができました。 たかがもくもく勉強会ではあるのですが、とにかく勉強会イベント自体の立ち上げ経験が無かったので、初めは何をしたらいいやらとにかく分からないことだらけ。 そんな一つ一つをネットで調べながら、手探りしながら、どうにかこうにか開催に漕ぎ着けた状況でした。 いろいろと苦労しましたが、とても良い経験ができたと思っています。 せっかくの貴重な経験でしたので、今回のイベント準備として色々と自分がやったことを振り返ってみたいと思います。 企画 大まかにこのような方向性でイベントを企画しました。 題材 Web関係の何か。自分が好きなツール、利用者層・用途が幅広いところでWordPressを選択。

photo credit: nyuhuhuu via photopin cc プログラミング言語の使い手のことを、PHPならPHPer（ペチパー）、RubyならRubyist（ルビイスト）とかよく言いますね。 他にもどんな呼び名があるのか気になったので調べてみました。 話は変わるけど各プログラム言語の呼び名のまとめてみた | 着ぐるみ追い剥ぎペンギン ■JavaScript JavaScripter（ジャバスクリプター） JSer（ジェイサー） ■Flash Flasher（フラッシャー） ■PHP PHPer（ペチパー） ■Perl Perler（パーラー） Perl Monger（パール・モンガー） ■Python Pythonista（パイソニスタ） Pythonian（パイソニアン） Pythonist（パイソニスト） Pythoner（パイソナー） ■Ruby Rubyist（ル