Tips

Web サイト制作に役立つ情報や小技などをまとめています。

全カテゴリ

記事一覧

カレンダー共有アプリ「TimeTree」のAPIを使おう！～カレンダー情報取得編～

概要

1500万人のユーザが利用するカレンダー共有アプリの「TimeTree」が外部サービスとの連携の為にAPIをリリースしました。(2019年5月30日)そこで、そんなできたてのAPIを使ってみましたので使い方をPHPやJavascriptによるサンプルを使って解説します。TimeTreeAPIは、2023年12月22日をもって終了しました。本記事の内容はすでに利用できません。https://timetreeapp.com/intl/ja/newsroom/2023-12-14/connect-app-api-202312TimeTree-https://timetreeapp.com/TimeTree-サービス概要TimeTree|Dev-開発者向け情報TimeTree|Dev-APIドキュメント今回は第2弾ということでアクセス可能なカレンダー情報の一覧を取得する方法をまとめます。予定の登録や編集は次回まとめます。TimeTreeの概要については前回記事をご参照下さい。1.TimeTreeとは？2.TimeTreeAPIで何ができるのか？

カレンダー共有アプリ「TimeTree」のAPIを使おう！～アクセストークン取得編～

概要

1500万人のユーザが利用するカレンダー共有アプリの「TimeTree」が外部サービスとの連携の為にAPIをリリースしました。(2019年5月30日)そこで、そんなできたてのAPIを使ってみましたので使い方をPHPやJavascriptによるサンプルを使って解説します。TimeTreeAPIは、2023年12月22日をもって終了しました。本記事の内容はすでに利用できません。https://timetreeapp.com/intl/ja/newsroom/2023-12-14/connect-app-api-202312TimeTree-https://timetreeapp.com/TimeTree-サービス概要TimeTree|Dev-開発者向け情報TimeTree|Dev-APIドキュメント今回はAPIへのアクセスに必須なアクセストークン取得についてまとめます。カレンダー情報の取得や予定の追加・更新・削除は別途まとめます。トークン取得だけ読みたい方は「3.アクセストークンを取得しよう！」まで飛ばして下さい。

Wordpressの投稿画面でカテゴリ選択を一つだけに変更する方法【ラジオボタン化】

概要

WordPressに関する小技も紹介していこうと思います。まずは、Wordpressの記事投稿画面でカテゴリを選ぶ際にセレクトボックスではなくラジオボタンに変更する方法です。WordPressでは複数のカテゴリを選択できるようになっているのですが、どれか一つだけにした方が良いことが多いと思います。そこで、セレクトボックスからラジオボタンに変更する簡単な方法を紹介します。

無料で使えるWordpressでブログをはじめよう！副業にも趣味にも最適です。

概要

終身雇用が実質的に破綻した日本ですが、それに伴い副業が活気付いています。副業は職業選択の自由から制限されるものではありませんので、本来は就業規則で禁止できるものではないです。悪く言えば会社が「違憲」です。(一方の仕事が忙しく他方の仕事に支障がきたす場合などの例外はあります)そんな副業全盛時代にこそ「ブログ」という選択肢を考えてみることは非常に意義のあるものだと思います。副業で別の企業に就職するとなるとやはり時間的な制約が厳しく、適した仕事を探すことは容易ではないでしょう。しかし、ブログなら空いた時間に自由に更新していくことができるので、副業の第一歩として選びやすいです。そこで、ブログといえばこれ！というくらいに浸透してきている「Wordpress」についてまとめます。

GDPRに対応したGoogle Analyticsのユーザ許可を追加するJavascript

概要

GoogleAnalyticsなどのCookieを利用したアクセス解析ツールを導入する時に気をつけないといけないことがあります。それがタイトルにもある「EU一般データ保護規則」(GeneralDataProtectionRegulation、いわゆる「GDPR法」)です。これはEU在住者の個人情報(IPアドレスやCookie、複数の情報から個人を特定できる情報を含む)を取得する際にはユーザの認可を得てからでないといけない、というものです。日本人しか想定されていないサイトでもEU"在住"の日本人がアクセスする可能性がある場合やEUからのアクセス(旅行者向けサイトなど)が考えられるサイトでは対応しないと非常に厳しい制裁金が課せられます。その額は最高で年間売上の4%か2000万ユーロ(およそ26億円)の高い方、とされます。違反していた時に即罰金というわけではないそうですが、対応しておくに越したことはありません。そこで、ユーザに同意を得てからGoogleAnalyticsを有効にするJavascriptなどを作ったので紹介します。

PayPal API (version 2) を使ってクレジットカード決済を実装しよう！

概要

8月になり全国的に梅雨も明けて非常に暑い日が続いておりますが、皆様体調如何でしょうか？1ヶ月前は寒い日があったのですが、急な環境の変化は辛いですね。さて、1ヶ月前と云えば「7pay」がセキュリティ対策ができておらず大変な被害が出てしまいまったことは記憶に新しいです。(そして9月末で終了)このような新しいシステムの導入は慎重に進めて貰いたいところです。なにやら「UNIQLOPay」なる決済も商標出願したことで一時話題になりました。さて、そんな新規参入したキャッシュレス決済システムにはセキュリティ上の懸念がどうしても付きまといます。対して、古くから使われているシステムはその点で信頼と実績が高いです。こうした古参のシステムとして世界的にも広く使われているシステムに「PayPal」(ペイパル)があります。(PayPayじゃないですよ)ECや決済用のAPIが多数用意されており、基本無料で利用できますので、この便利なAPIを使った決済方法をまとめていこうと思います。

【PHP】サブドメイン間でセッションを共有する方法

概要

皆さんは各種pay、使っていますか？私は全く使っていません(笑)いちいちスマホから決済用コードを表示させて店員さんにスキャンしてもらうって全然スマートじゃないですよ。各種payは、スマホのNFCやSuicaを利用した決済をベースにすればスマートだったと思います。システム的にも開発的にも、です。利便性の向上を目的に登録していないメールアドレスにパスワードのリセット情報を送信する7payは論外ですが、ちょっとしたことでユーザの利便性を上げる仕組みはあると嬉しいですよね。そこで今回は、サブドメイン間でセッション情報を共有する方法を紹介します。とても簡単なことなので、しっていると役に立つときがあると思います。

MicrosoftEdgeのレンダリングエンジンがGoogleChromeベースになります！

概要

皆さんはどんなブラウザを使っているでしょうか？開発者はもとより一般ユーザもGoogleChromeを使っている方が非常に多いですよね。そんなGoogleChromeのレンダリングエンジン「Chromium」(正確には少し違いがあります)を搭載したMicrosoftのEdgeブラウザが発表されました。少し前に"MicrosoftInternetExplorer"の使用をMSが正式にやめるよう発表したこともあり、独自規格の多かったMS系統のブラウザが根絶されそうです。開発者にとってはとても嬉しいニュースです。開発者向けにChromium搭載Edgeがリリースされたので紹介します。

アナログノイズのような「グリッチエフェクト」をCSSで実現する方法

概要

グリッチエフェクト、いわゆるアナログノイズが乗った映像の乱れのような効果があります。動画では良く利用されておりちょっとオシャレな演出ですよね。シンプルなページにもちょっとしょた動きが欲しいという時に役に立つこの「グリッチエフェクト」は、CSSだけで簡単に実装できますので紹介していきます。

超軽量コードで画像の遅延読込を組み込む方法 (542B)【jQuery不要】

概要

平成最後のGWは10連休のようで、ダラダラと過ごしていますでしょうか？時間が出来たら、ちょっとずつやればいいやと思いなかなか手につかないことも多いでしょう。Webの世界にも時が来れば・必要になれば実行しよう、という怠惰な動作をするものがあります。それが「LazyLoad」(遅延読込)という画像などが表示領域内にスクロールされてから読み込む技術です。色々なライブラリが公開されていますが、カスタムデータ属性(任意に設定できるdata-***というHTML要素に付ける属性)が必要です。新規で構築する場合は良いですが、既に作ってしまったページに適応するのはかなり面倒です。そこで、カスタムデータ属性を使わないで既存ページに追加するだけで使える超軽量コード(542B)を作ってみました。そこそこ汎用性があると思いますので、是非ご検討下さい。

CSSのbox-shadowを滑らかにtransitionさせる方法【カクカクさせない】

概要

カードデザインというデザインを検討したことがある方は多いのではないでしょうか？レシポンシブなデザインに対応したECサイトやブログなどの一覧表示でよく使われていますね。一つの商品や記事などをカード状の要素で構成してそれを並べることでどんな幅のディスプレイにも馴染みが良く、それぞれの要素の幅は固定なのでスタイリングやしやすいという特徴があります。このTipsも一覧表示にはカードデザインを採用しています。そんなカードデザインなどでマウスカーソルを合わせた時、ちょっとした演出として影を付けたいことがあります。:hover疑似クラスでbox-shadowを設定するだけなのですが、transitionでアニメーションを付けるとカクカクすることがあります。今回はこれを滑らかにスムーズなアニメーションにするちょっとしたひと手間を紹介します。

PHPでSQLを使わない簡易的なコメント機能を実装しよう！

概要

Webサイトに簡易的なコメント機能を実装してみましたので、紹介します。SQLは使用せずにテキストでデータ管理します。ログインなども必要とせずにただちょっとコメントするだけという簡単なもので多くのコメントを捌くような使い方は想定していません。また、返信機能なども特にありませんので必要なら改造してみて下さい。