はてなブックマーク

はじめに こんにちは。 この記事は「Stripe Advent Calendar 2018」14日目に参加させて頂きました。 Stripe + WooCommerce Subscriptionsで、サブスクリプションサービスをはじめましたので、やったことを振り返りしてみました。 企画 ビジネスモデル 弊社では、「LIQUID PRESS」というサービスで、 WordPressテーマ＆プラグインとカスタマーサポートを提供し、 WordPress公式テーマやWordPress公式有料サポートテーマにも登録されています。 これまで無料版も含めて累計20,000ダウンロードを突破していますが、売り切り商品では継続したサポートが難しい、という課題がありました。 そこで、継続サポートや様々な付加価値を提供する、サブスクリプションサービスを新たにはじめました。 決済システムの選定 弊社ではこれまで、クレ

はじめに この記事は「WordPress Advent Calendar 2017」20日目の記事です。 Google Home Mini が届いたので、WordPressにブログを投稿できるようにしてみました。 完成動画 #GoogleHome で #WordPress に投稿してみました pic.twitter.com/aE8C7IhWy3 — LIQUID DESIGN (@lqd_jp) 2017年12月20日 構成 IFTTT で Google Home Mini をトリガーにして WordPress に投げています。 Google Home Mini に「ブログ投稿 ◯◯◯◯」と言うと、「◯◯◯◯」という本文の投稿記事が公開されます。 IFTTT は、様々なサービスを連携するサービスです。プログラミング不要で、トリガーやアクションの設定を行うことができます。 手順 1. Goo

スマホ対応WordPressテーマ WordPress公式テーマや機能豊富なプレミアムテーマを提供する「LIQUID PRESS」では、 1周年を記念してプレミアムテーマ向け新機能の提供を開始しました。 モバイルファースト時代に対応可能な機能がさらに充実しましたので、関連機能について紹介したいと思います。 » WordPressテーマ LIQUID PRESS モバイルファーストについて モバイルファーストとは PC（パソコン）より先行してモバイル（スマートフォン）向けサイトやサービスを開発する手法のことです。 モバイル環境への対応を優先して設計することで、余分な要素のないユーザー本位のコンテンツやサービスの実現が期待できます。 また、モバイル市場の拡大も背景にあります。 下記表は2015年のデータですが、既にパソコンよりスマートフォンからの利用者が多くなっていることが分かります。 日本に

こんにちは。 この記事は「WordPress Advent Calendar 2016」3日目の記事です。 昨年は間に合わなかったので、最後に滑り込めてうれしいです:) 今年は、WordPress公式テーマを公開しましたので、その際にテーマレビューで指摘された点について、復習も兼ねてまとめたいと思います。 また、これから申請される方のご参考になれば幸いです。 はじめに 公開したWordPress公式テーマ 特長：ひとつのテーマでスマホ/PC表示切替できるテーマです。 ディレクトリ: https://wordpress.org/themes/liquid/ Trac: https://themes.trac.wordpress.org/ticket/29442 WordPress公式テーマ登録の流れ ご存知の方も多いかと思いますが、下記のような流れになります。 アップロードページからテーマを

AMP（Accelerated Mobile Pages）について、 対応方法などを下記に書かせて頂きましたが、AMP対応したサイトが実際にGoogle検索結果に表示されましたので、分かったことをまとめてみました。 Google AMP HTML に対応してみた件 ついに始まった、Google AMP（Accelerated Mobile Pages）を試してみよう！ – CodeZine（寄稿） ※追記あり Google検索でAMPが表示されるまで 検証サイト 今回、3つのサイトでAMP対応し、検証してみました。 A：独自ドメイン、CMS：WordPress、マークアップ：BlogPosting B：独自ドメイン、CMS：Movable Type、マークアップ：NewsArticle C：レンタルサーバ提供ドメイン、CMS：WordPress、マークアップ：BlogPosting A,B

オウンドメディアが簡単に運営できるWordPressテーマ「LIQUID MAGAZINE」を紹介します！ テーマ：オウンドメディア構築用WordPressテーマ MAGAZINE メディアに特化したUX ヘッダ画像は最新記事のアイキャッチ画像から自動生成。スライドショーも可能。 各ページに人気記事や関連記事を自動的に配置し、サイト内回遊を促進できます。 また、スマホに最適な無限スクロールでユーザー滞在時間を長く保つことができます。 ※無限スクロール、人気記事は推奨プラグイン（無料）の有効化が必要です。 記事ページの下部にはコンバージョンにつなげる「お問い合せ」リンクを表示。 「SNSでフォローする」エリアはアイキャッチ画像から色を抽出して自動デザイン。 他にも、テーマカラー設定、レイアウト（1カラム/2カラム）設定、SNSアカウント設定、 SEO対策/ソーシャル連携、Facebook O

Sublime Text から Adobe Brackets に浮気してみた という記事を書いて以降、完全に Adobe Brackets に乗り換えてしまいました。 PSDを簡単スライス Adobe Brackets の好きなところは、Extract for Brackets（Preview） という機能で、 PSDを開いてCSS抽出やスライス画像書き出しができる点です。 今回は、Extractの便利な使い方をご紹介します。 公式ヘルプ https://helpx.adobe.com/jp/creative-cloud/help/extract-for-brackets.html via http://qiita.com/assialiholic/items/d52c10605d821f597036 Extract for Brackets の使い方 起動方法 Adobe Bracket

style styleについては、下記opacityを含める必要があったり、!important 禁止などのルールがあります。 </p> <p> AMP タグ amp-img amp-audio amp-anim amp-ad amp-pixel amp-video amp-brightcove amp-carousel amp-font amp-lightbox amp-iframe amp-instagram amp-twitter amp-vine amp-youtube https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md Movable Type 対応方法 AMP テンプレート このブログは Movable Type なので、ブログ記事のAMPテンプレートを作ってみます。 テンプレートの

レスポンシブWebデザインのメリットとデメリットをまとめてみました。 私はレスポンシブ信者ですので、あえてデメリットの方を詳しく書いています。 また、デメリットをどうすれば解消できるかも考えてみました。 1. リキッドレイアウト！ 最も大きな特徴は可変幅レイアウトであるということでしょう。 現在無数にある端末画面サイズにおいて柔軟に表示することができます。 反対に、固定幅レイアウトで、全ての端末画面サイズのページを作成することは現実的ではありません。 例えば、iPhone6（1,334 x 750px）と、iPhone6 Plus（1,920 x 1,080px）で横幅が330pxも違います。 Androidはもっとすごいことになっています。 Android画面サイズの可視化 via Android Fragmentation Visualized 2. URLが同じ！ HTMLはワンソー

こんにちは。 この記事は Sublime Text Advent Calendar 2014 20日目の記事です。 しばらくブログを放置していて、ずっと何か書きたいなと思っていたところ、楽しそうなイベントがあったので参加させていただきました。 かこつけた他エディターの紹介もOKそうでしたので、他のエディタに浮気してみた件について書いてしまおうと思います。 浮気したワケ Sublime Text との出会いから2年くらい経っていまして、今でも特に不満はないのですが、自宅のMacを買い換えて環境を作り直しているうちに、なんとなく他のエディタにも目が行ってしまった次第です。 Sublime Text の良いところ 軽いコーディングをするだけなので、個人的には下記が気に入っている点です。 見た目 軽さ Emmet CMD+D 複数カーソル 自動閉じカッコ では、他のエディタを見てみましょう。 At

Googleの広告管理ツール（アドサーバー）、DFP スタンダードの使い方を紹介します。 公式サイト：DFP スタンダード ヘルプ：DFP スタンダード ヘルプ DFP スタンダードとは DoubleClick for Publishers（DFP）スタンダードは、Googleが提供する広告管理ツール（アドサーバー）です。 ネット広告配信大手、DoubleClick 買収による事業統合の一環で、 かつてあった「DoubleClick DART」と「Google Ad Manager」に代わるサービスとしてリリースされました。 月間の広告表示回数が 9,000 万回未満（AdSense の表示回数は含まない）は無料で利用できます。 また、DFP スタンダードでは、クリック率の高い広告を優先して表示するなど、広告の最適化が可能です。 公式ブログ：DFP スタンダード成功事例 2010年リリース

Google Chart API を利用して、レーダーチャートを作成する方法を紹介します。 公式サイト：https://developers.google.com/chart/ Google Chart API は、簡単にグラフ画像を描画できるAPIです。 棒グラフや円グラフなど様々なチャートを、imgタグを書くだけで描画できます。 今回は、レーダーチャートを作成する方法を紹介します。 レーダーチャートは、下記のようなコードになります。 ポイントは、chdの最初の値を最後にも書くことで、これにより線がつながります。 サンプルコード <img decoding="async" src="http://chart.apis.google.com/chart?cht=r &amp;chxt=y,x &amp;chls=4|4 &amp;chco=00AEEF &amp;chxp=0,0,20,4

CSSシグネチャとは、ページのbodyなどにidやclassを設定し、 CSSでページごとのスタイルの切り替えを行う手法です。 シグネチャ（signature）は直訳すると署名、サインの意味です。 最近あまりこの言葉を目にすることがなくなりました（Twitterでは1件もヒットしませんでした・・）が、 便利な手法なので紹介します。 なお、ユーザーがブラウザの「ユーザースタイルシート」を 設定できるようにする手法という意味もあるようですが、 今回は前者について紹介します。 CSSシグネチャの解説 CSSシグネチャを利用すると、トップページとカテゴリページで 一部デザインを変える、ナビゲーションデザインで閲覧中ページが分かるようする、 といったことが、ひとつのCSSで簡単にできます。 ページごとのデザインをひとつのCSSで指定できる ページごとにデザインが変わる要素が、ページ内に複数あっても、

簡単にTwitterのOAuth認証ができる、phpライブラリ、twitteroauthの使い方を紹介します。 Twitterにログインして利用するWebアプリケーションを簡単に開発することができます。 配布サイト：twitteroauth 上記サイトからダウンロードします。 サンプルファイルが含まれているので参考になります。 アプリケーション登録・設定 Twitterでアプリケーション登録をする必要があります。 アプリケーション登録 Application Name : アプリケーションの名前（twitterという単語は含めません） Description : アプリケーションの説明 Application Type : Browser（ブラウザアプリケーションの場合） Application Website : アプリケーションのURL Callback URL : アプリケーションの

スマートフォン対応サイトで、ユーザーによる表示モード（PC用表示・スマートフォン用表示）の切り替えを実装するPHPを紹介します。 レスポンシブWebデザインで、スマートフォンもPCも同一URLになるサイトに対応しています。 jQueryを利用した方法は、前回のスマートフォン対応のためのレスポンシブWebデザイン実用TIPSをご覧ください。 PHPサンプル ユーザーが選んだ表示方法をCookieに記録することで、サイト内の表示方法を統一することができます。 下記は、ユーザーエージェント判定＆スマートフォン用はCSSを「追加」＆スマートフォン用表示をデフォルトとする場合のサンプルです。 <?php // 初期化 $sp = ""; $sp_head = ""; $sp_foot = ""; $mode = $_GET['mode']; // ユーザーエージェント取得 $ua = $_SERVE

サイトなどに設置した、Google カスタム検索の検索窓について、 CSSだけでデザインをカスタマイズする方法を紹介します。 公式サイト：Google カスタム検索 カスタマイズについて デザインはCSSだけで行うため、Google カスタム検索のHTMLタグやJavaScriptを改変することはありません。 Google カスタム検索の設定は、レイアウトの選択は「Google がホスト」、 スタイルの選択/カスタマイズは「デフォルト」を選択した場合のコードをベースにしています。 検索ボックスを囲むdivのidは#cse-search-formとなっていますが、 これはレイアウトやGoogle Adsenseの有無によって変ります。 ちなみに、利用規約では下記のように明記されているため、 テキストボックスの「Google カスタム検索」という背景は削除できません。 検索ボックスには、本件サ

公式のTwitter ウィジェットを、CSSだけでデザインカスタマイズする方法を紹介します。 Twitter ウィジェット：http://twitter.com/about/resources/widgets 上記のような公式プロフィールウィジェットについて、 CSSを追加するだけでいろいろなデザインカスタマイズをすることができます。 HTMLの解説 作成したウィジェットのコードをそのまま使用します。コードの改変は一切行いません。 管理しやすいように、idをtwitter_tickerとしたdivで囲みます。 </p> <p> CSSの解説 ストライプ背景を使用したデザインにしてみます。 デフォルトCSSが優先されないよう!importantを指定します。 border-radiusを0にして、丸角をなくします。 そして全体を囲むdiv、twtr-docに対して、ストライプの背景画像を指定

スマートフォン対応サイト制作の手法として注目されている、 レスポンシブWebデザイン（Responsive Web Design）の実用TIPSを紹介します。 PC用表示・スマートフォン用表示の切り替え方法、お役立ちアプリなども紹介します。 関連記事 レスポンシブWebデザインで、PCとスマホ表示を切り替える方法 レスポンシブWebデザインのメリット、デメリットとその解消方法 レスポンシブWebデザインのメディアクエリサイズサンプル レスポンシブWebデザインとは レスポンシブWebデザインでは、CSSを利用し、ウインドウサイズに応じてデザインを変更します。 そのため、PC用とスマートフォン用に複数のHTMLを作成する必要がないなど様々なメリットがあります。 レスポンシブWebデザインについては下記サイトが非常に詳しく、参考にさせていただいています。 ASCII.jp：スマホ対応の新潮流「

公式のTwitter ウィジェットを、CSSだけでティッカー風1行表示にカスタマイズする方法を紹介します。 Twitter ウィジェット：http://twitter.com/about/resources/widgets CSSだけで、超シンプルな1行表示にカスタマイズすることができます。 今回はプロフィールウィジェットを例に紹介します。 ウィジェット作成画面で、「一定間隔で更新」にチェック、エンドレス表示にしますか「はい」に設定することで、 指定した件数でくるくると更新表示されるようにします。 横幅は自動（auto）、高さは1行分くらいの25に設定します。 HTMLの解説 作成したウィジェットのコードをそのまま使用します。コードの改変は一切行いません。 管理しやすいように、idをtwitter_tickerとしたdivで囲みます。 </p> <p> CSSの解説 非表示にしたい部分は、

phpで簡単にePUBを作成するソースが配布されているサイトを紹介します。 phpソース：phpclasses.org 様々なphpソース（クラス）が公開されているphpclasses.orgで配布されています。 ※ソースのダウンロードには無料登録が必要です（海外サイトなのでいろいろと注意してご利用ください）。 利用方法は簡単です。ダウンロードしたファイルをアップすればすぐに動作します。 Example.phpにアクセスすると、ePUBファイルが生成されダウンロードできます。 Example.phpの中身を見ると生成方法が分かります。chapterごとに異なる生成方法が記述されています。 コンテンツ内の画像ファイルを自動でアーカイブすることもできます。ePUBバージョンは2.0（記事紹介時）。 phpバージョン：5.2 ライセンス：LGPL もちろん、生成されたePUBファイルは、iPho

Google AdWords 認定資格プログラム、個人の認定資格を取得する方法と勉強方法を紹介します。 Google AdWords 認定資格プログラムには、企業の認定資格と個人の認定資格があります。 企業の認定資格は、個人の認定資格取得者がいて、管理費用などの条件を満たしていると、認定パートナーとしてパートナー検索に登録されるなどの営業活動支援を受けられます。 個人の認定資格は、個人レベルで取得できるもので、知識と経験をアピールできるようになったり、認定証が発行されます。また、アカウントを企業と関連付けることもできます。 アカウントの作成 まず、通常のGoogleアカウントとは別に、Google 認定資格のアカウントを作成します。受験者IDが作成されます。 Google AdWords 認定資格プログラム Google 認定資格 試験の種類 Google AdWords 試験には下記のよ

Twitter 公式APIで、プロフィール写真を簡単に取得する方法を紹介します。 Twitterのプロフィール写真、サムネイル画像は、規則性がなく、取得するためには別途、取得用のコードを書いたり、専用の非公式APIを使っていました。 しかし、APIサイトが落ちることもしばしばありました。 APIサイト：tweetimag.es 公式APIは、リクエスト数によりAPI制限がかかりますが、 スクリーンネームからGETで簡単にプロフィール写真が取得できます。 ドキュメント：GET users/profile_image/:screen_name <img decoding="async" src="http://api.twitter.com/1/users/profile_image?screen_name={screen_name}&#038;size=bigger" /> サイズは3種類あ