サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
blog.mach3.jp
この記事は賞味期限切れです。(更新から1年が経過しています) 以前より公開されたスプレッドシートの読み込みについて記事をしたためてまいりましたが、 拙作の Ghostsheet 等はスプレッドシートを公開しなければならない、書き込みが出来ないといった欠点がありました。 今回は、Google製のPHPクライアントを利用して認証し、読み書きの実験を行ってみました。 下準備 まず必要な物をまとめます。 サービスアカウントの鍵ファイル 1のアカウントに編集権限を与えたスプレッドシート Google製のクライアント(PHP) サービスアカウントの鍵ファイル Google Developper Console でプロジェクトを作成します。 「認証情報」→「認証情報の追加」から「サービスアカウント」を選択 鍵ファイルをJSON形式で取得します。 このファイルは認証情報が記載されている大変重要なファイルな
この記事は賞味期限切れです。(更新から1年が経過しています) すけつい Twitter関連の新しいサービスが公開されたようなので、 ちょっと試してみました。 すけつい TwitterとGoogleカレンダーを連携させて皆でスケジュールを共有! という趣向のWebサービスだそうです。 使い方はシンプルで、サービス登録後に ハッシュタグ「#yotei」をつけてつぶやくだけ。 「”日付” “時間” “イベント名” “#yotei”」 こんな文法でツイートすれば、 日時を解釈してGoogleカレンダーに登録してくれるみたい。 予定が公開されると、自分のTwitter宛に報告してくれます。 ちょっとタイムラグがあるみたいですが…(自分の時は20分ほどでした) サーバの中の人が疲れていたんでしょうか。 登録する対象のGoogleカレンダーは以下の中から選ぶ事が出来ます。 “すけつい”Googleカレン
この記事は賞味期限切れです。(更新から1年が経過しています) Webページで動画を活用したコンテンツもかなり増えてきた昨今ですが、如何お過ごしでしょうか。 今回はYoutubeの動画をJavaScriptで操作する Youtube IFrame API を使って色々遊んでみましょう。 Youtube IFrame API とは 基本的な使い方 動的にスクリプトをロードする 見た目・挙動・イベントを設定する 動画再生のイベントトラッキング 動画の再生の任意のタイミングでアクションを起こす 埋め込みプレイヤーでAPIを利用可能にする まとめ Youtube IFrame API とは iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame API | Google Developers IFrame Player API を使うと、You
この記事は賞味期限切れです。(更新から1年が経過しています) 今回のお題は「マトリックスシーケンサー」。 昔Flashで実装された物があったのをふと思い出し、今ならWeb Audio APIで作れそう!と思って作ってみました。 きっと同じ事考えて作って見た人はいるはず。 マトリックスシーケンサーとは マトリックスシーケンサーとは、整列配置されたボタンをトグルしてループミュージックを奏でる事ができるシーケンサーです。 多くの場合縦軸が音階を、横軸がフレーム(時間)を表し、 左から右にフレームが移動してONにされたボタンに割り当てられた音が鳴る仕組みです。 縦軸の「音」はスケール(調)に則って配置されているので、 相当いい加減にやってもまともな演奏になってしまう所がマトリックスシーケンサーの魅力の一つです。 ハードで知られているのがYAMAHAの「TENORI-ON」ですが現在は生産完了品で、
この記事は賞味期限切れです。(更新から1年が経過しています) 最近ではIE6/7対応がほとんど無くなり、泥臭い手法を取る必要が少し減ってきました。 様々な場面で頻出するトグルボタンUIもまた、以前に比べて少しモダンな形での実装が可能になってきています。 隣接セレクタを使用したトグルボタン IEはバージョン8から隣接セレクタが使えるようになります。 ここでは、その隣接セレクタとラジオボタンを使ってトグルボタンを作ってみます。 ラジオボタンをチェックボックスに変更すれば複数選択可能なボタンが表現できます。 Toggle Button Demo 要点は、下記の通りです。 :checked 擬似クラスと隣接セレクタ(+)を使用 input要素は非表示にして、隣接する span.label 要素をボタンのように見せる label 要素でラップして選択出来るようにする ところが、このコードは次に挙げる
この記事は賞味期限切れです。(更新から1年が経過しています) JavaScript でモールス信号を再現するアプリケーション「TOOTNE(ツートン)」を公開しました。 TOOTNE [ツートン] TOOTONE [ツートン] – モールス信号で遊び、学ぶ。 TOOTONEは、モールス信号で遊びながら学ぶアプリケーションです。 手で打ったり、テキスト変換をしたりしながら思う存分ツートンしましょう。 「JavaScriptでモールス信号」というのは少し前から課題にしていたのですが、 ある程度まとまった形になったのでWebアプリケーションにしてみました。 使い方 誰しもおおまかな所はしっているとは思いますが、「モールス信号」そのものについては Wikipediaの説明 でも見て頂くとしましょう。 TOOTONE では次の4つの方法でツートンする事ができます。 キーボードの「T」をたたく マウス
この記事は賞味期限切れです。(更新から1年が経過しています) 横浜で行われたHTML5飯でWeb Audio APIでモールス信号を表現してみる話をさせて頂いたのが今月頭の話。 その際に「Oscillator使えばよい」というアドバイスを頂いたので調べてみたところ、 「これで楽器をつくってみたい」と思って試してみた話を Yokohama.js でしゃべらせていただきました。 Oscillator で楽器を作りたい! こちらが当日の資料です。ざっくり言うと… Oscillator はオシレーターであってオスシレーターではない Oscillator は周波数・デチューン・波形をいじることでいろんな音になる 作ってみた物の紹介・デモ といった内容をお話しました。 作ってみたデモ(Oscy.js) そして作ってみたデモがこちら。 触ると音が出るのでご注意ください。 Oscy.js (http://
この記事は賞味期限切れです。(更新から1年が経過しています) jQueryでDOMのロード完了を検知するのに使われる$(document).readyですが、 これを未挿入の要素に対して使いたい。そんなメモログ。 $(document).ready()について まず、$(document).ready()について。 引数に渡された関数が、HTMLのDOM構築が完了した時点で呼ばれるという便利機能。 $(document).ready(function(){ // DOMロード完了時に実行される alert("Hello, world !"); }); jQueryを使っていれば一度はお目にかかる定型文ですね。 仕組みについては、こちらの記事が大変詳しく書いてありました。 $(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)
一行目のヘッダ部分でデータの型を指定する事が出来ます。 上記にある integer、bool の他に、float、json が利用出来ます。 省略時は string になります。 そしてスプレッドシートのキーをメモしておきます。スプレッドシートのキーはURLの下記太文字の箇所になります。 https://docs.google.com/spreadsheets/d/00X_xxxXX_0xXxxXx00XXXxx-xxXXxX0-XxXxXx0XxxX/edit#gid=0 このキーをそのまま引数にしてメソッドの呼び出しをします。 <?php require "the/path/to/ghostsheet/phplib/Ghostsheet.php"; $gs = new Ghostsheet(); $gs->config("cache_dir", "./cache"); $data =
この記事は賞味期限切れです。(更新から1年が経過しています) 住民税と並んで個人事業主にとって大きな負担となるのが、国民健康保険です。 所得額に左右される為、多くの方にとってその保険料は決して安くはないでしょう。 この度私は市区町村の国民健康保険を脱退し、「文芸美術国民健康保険」に切り替えたのでその話を記しておきます。 文芸美術国民健康保険とは 「国民健康保険法」に基き、「文芸美術国民健康保険組合」が提供する健康保険です。ここでは公式にあわせて「文美国保」と略すとしましょう。 文芸美術国民健康保険組合 主な特徴 文芸や美術の著作活動に従事している者が加入する事ができます。 文美国保に加入する為には組合に加盟している団体の会員になり、その団体に承認してもらう必要があります。 全ての組合員に対して同じ金額の保険料が課せられます。 特に重要なのが保険料の項目で、 市区町村の国保と違って保険料が所
この記事は賞味期限切れです。(更新から1年が経過しています) PHPのビルトインウェブサーバーについては以前も軽く触れたのですが、 今回はもう少し細かく噛み砕きつつ、仮想マシンからホストOS(Win/Mac)のサーバーにアクセスして動作確認を捗らせてみます。 まえおき やりたいこと 仮想マシン(Windows)で、ローカルで制作中のWebサイトの動作確認をしたい。 せっかくなのでhttpアクセスで閲覧したい。 でもどこかにアップロードしたりローカルサーバ構築したりするのはめんどう。 せっかちなのでDropboxの同期をまっている心の余裕がない。 こういう時にはPHPビルトインウェブサーバーが簡単でおすすめです。 好きなディレクトリをドキュメントルートにしてコマンド一発で即時に簡易Webサーバが立ち上がります。 ログがターミナルに流れるのでわかりやすく、どことなくテンションがあがります。 ち
この記事は賞味期限切れです。(更新から1年が経過しています) 昨日書いた「jQuery.triggerを使ってEventDispatcher(AS3)のような事をしてみる」を応用して、 localStorageと連携して、一定時間で自動保存してくれる簡単なメモ帳を書いてみます。 DEMO on JS Bin HTML <form action=""> <textarea name="memopad" id="memopad" cols="30" rows="10"></textarea> <fieldset> <input type="button" value="SAVE" id="saveButton" /> <input type="reset" value="CLEAR" id="clearButton" /> </fieldset> </form> <p id="message"
この記事は賞味期限切れです。(更新から1年が経過しています) 最近になってIE6のサポートは減ってきましたが、IE8の息もまた長そうですね。 透過PNGについては以前も記事をしたためた事がありますが、 当時からまた事情も変わってきてると思いますので、ここに昨今の対応に関する雑記などを記しておきます。 前提 ここで言う「belatedPNG」は本家ではなく、 本家をフォークしている「jquery-belatedpng.js」を指しています 「おおきくくずれなければいい」IE6対応 「IE6ではおおきくくずれなければいい」 最近よく聞くようになってきたフレーズですが、つまり「完全にあわせなくてもいいけど一応見えるようにしてね」という事で、 見た目をある程度損なっても許容されるわけです。(と好意的に解釈しましょう。) ところで、今IE6を使うような人達は、おそらく諸事情があって「致し方なく」使っ
この記事は賞味期限切れです。(更新から1年が経過しています) 以前Yahoo! pipesで似たような事をやりましたが、 どうやらGoogleスプレッドシートそのものがJSON出力に対応していたので、 それをJSから利用してみようという試みです。 URLの取得 「リスト」と「セル」 JSONPしてみる どんな時に使えそうか デメリットなど 後半へ URLの取得 現在の「新しいスプレッドシート」では「公開データのリンクを取得」のUIがありませんが、APIは一応整備されていてJSONPでも利用できます。 URL: https://spreadsheets.google.com/feeds/list/[A]/[B]/public/basic?alt=json [A]にはスプレッドシートID、[B]にはワークシートIDが入ります。 まずは対象となるスプレッドシートをJSONで出力する事からスタート
この記事は賞味期限切れです。(更新から1年が経過しています) 以前「Opauth」による簡単な認証を記事にしましたが、 またさらにシンプルな認証ライブラリ「HybridAuth」を知ったので試用してみました。 HybridAuthとは HybridAuth, Open Source Social Sign On PHP Library HybridAuth enable developers to easily build social applications to engage websites vistors and customers on a social level by implementing social signin, social sharing, users profiles, friends list, activities stream, status upda
この記事は賞味期限切れです。(更新から1年が経過しています) 世にテンプレートエンジンは多くあれど、 これ程多くの場所で活躍出来るテンプレートエンジンはなさそうです。 本稿はそんなテンプレートエンジン「Mustache」の試用レビューです。 Mustacheについて {{ mustache }} “Mustache”というのは口ひげを指す言葉で、「ますたっしゅ」とか発音する様です。 テンプレートタグに使用されている「{」が口ひげに似てるので、そこらへんが由来っぽいです。 公式を見れば分かるとおり、Mustacheは1言語にとどまらず、 様々な言葉で開発されているテンプレートエンジンです。 知らない言語も入ってたりしますね…。 Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Go, Lua, ooc, C++, Action
この記事は賞味期限切れです。(更新から1年が経過しています) PHPでTwitterのAPIを利用する方法は何度かPEARのServices_Twitterと絡めて記事にした事がありましたが、 今回はもっと手軽に導入できるOpauthとtmhOAuthを紹介してみます。 認証はOpauthで Opauth – Multi-provider authentication framework for PHP Opauthは、様々なOAuth認証を一手に引き受けてくれる認証フレームワークです。 執筆時に公式に紹介されていた利用可能なサービスは、Twitter・Facebookなどを含め11件。 これらのサービスへの認証機能は「ストラテジー」という形で外部モジュールとして提供されます。 所謂ストラテジーパターンと呼ばれる物ですね。 その使い方は、認証のみにフォーカスしているライブラリなだけあって恐
この記事は賞味期限切れです。(更新から1年が経過しています) 通常なら文字が伏せてある状態のパスワード入力フォームですが、 入力したパスワードを確認する為の「パスワードを表示」機能を JavaScriptで実装する為のメモです。(jQuery使用) ざっくりとした仕掛け IE兄弟はinput要素のtype属性をいじれないらしい textとpasswordを並べて表示/非表示をトグルする コード抜粋 ざっくりとした仕掛け チェックボックスにチェックを入れると、 パスワードのtypeがtextに切り替わって内容が確認出来るようになる仕組み。 type直接いじれば楽じゃーん。 そう考えていた時代が僕にもありました。 IE兄弟はinput要素のtype属性をいじれないらしい ところがIEはinput要素のtype属性を弄ろうとするとエラーになります。 その為jQueryでも、attr()で同様の処
この記事は賞味期限切れです。(更新から1年が経過しています) 先日の記事で軽く触れた、Markdown から EPUB データを生成する Grunt タスクの体裁を整えてパブリッシュしてみました。 mach3/grunt-mdeb @ GitHub Grunt task to publish markdown docs as EPUB 3.0 book. Markdown書類とJSONの設定ファイルからEPUBデータを作成します。 ナビゲーションドキュメント(論理目次+視覚目次)はMarkdownを元に出力されるXHTMLから抽出されて自動的に生成されます。 名前の「mdeb」は「Markdown to eBook」の略です。 動作環境 タスクの中でシェルコマンドを叩いている箇所があるので、 bash等が動く環境でないと動作しません。 Mac OSX や Linux なら問題ありませんが、
この記事は賞味期限切れです。(更新から1年が経過しています) だいぶ前に書いた”TumblrPosts.js“ですが、意外と使われる方がいらっしゃったのと、 わりと適当だったり、よろしくない部分も多く見られたので少し見直しを行いました。 TumblrPostsとは Js-tumblrposts.js by mach3 TumblrPostsは、「Tumblrでタグリスト/新規投稿リストを出力してみる」で紹介したjQueryプラグインです。 TumblrのAPIでは、最新のポストのリストを取得する事ができますが、 タグの一覧を取得する方法が無かった為、それを可能にする為のライブラリです。 新しいTumblr APIについて 今現在、Tumblrからは新しいAPIが提供されています。 API | Tumblr : 新しいAPI Tumblr API v1 | Tumblr : 古いAPI (投
昨年11月末から12月末にかけて当ブログにて掲載していた 「Alphabetical Advent Calendar」を題材にして Kindle ストアでの自費出版を試してみました。 紹介を兼ねて、備忘録など。 JavaScript Alphabetical Advent Calendar 2013 JavaScript Alphabetical Advent Calendar 2013 こちらが制作してみた書籍になります。 基本的にはブログで掲載した内容とあまり変わりませんが、 リリースにあたって少し加筆修正などをしています。 Kindle ストアでの自費出版の手順 以下が出版までに踏んだ手順です。 EPUBデータを制作する epubcheck でバリデーションする kindlegen でKindle用のデータに変換する Kindle プレビューツールで内容を確認する Kindle Di
この記事は賞味期限切れです。(更新から1年が経過しています) AS3にある多くのクラスの中でもお世話になる事が多いのが、EventDispatcher。 カスタムイベントを登録して送出したり出来るので大変便利。 本稿は、JavaScriptでも似た事が出来ないかなぁと試行錯誤してみたログです。 AS3のEventDispatcher まず、AS3のEventDispatcherはどのような代物なのか。 EventDispatcher – ActionScript 3.0 コンポーネントリファレンスガイド public class Example extends EventDispatcher { public static const EVENT_CHANGE:String = "change"; private var value:String = "Hello, World!"; /*
この記事は賞味期限切れです。(更新から1年が経過しています) 以前はmakeを使って納品用のデータをビルドしていたりしたのですが、 去年くらいから代替にGruntを使ってみています。 この度0.3.xから0.4系に切り替えたので、覚書も兼ねてGruntの導入・使い方を記しておきます。 Gruntってなに Gruntを導入する 使ってみよう どんなタスクがあるの? その他Gruntの魅力 まとめ Grunt ってなに GRUNT: The JavaScript Task Runner Gruntはnode.jsベースで作られたタスクベースのコマンドラインビルドツールです。 ビルドツールってなに ビルドは、ソースファイル群を元にして、実行出来る成果物を生成するプロセスの事を指します。 cf) ビルド (ソフトウェア) – Wikipedia 鍋に鶏と野菜とコンソメを入れて煮込んだらポトフが出来
この記事は賞味期限切れです。(更新から1年が経過しています) 『GoogleスプレッドシートをJSONPで利用する(前編)』の続きです。 一連の処理をまとめてみたスクリプトを紹介します。 書いてみたもの SpreadSheetLoader mach3/js-spreadsheetloader via GitHub スプレッドシートのJSONを読み込みます 読み込んだデータを整理します jQuery 1.7+ が必要です 簡単な使い方 1. URLを取得 まず前編の記事を参考にしてURLを取得してきましょう。 形式は「Atom」または「RSS」の、「セル」を選択してください。 こんな感じのURLですね。 https://spreadsheets.google.com/feeds/cells/**********/***/public/basic 2. 読み込む まずはインスタンスを初期化し、
この記事は賞味期限切れです。(更新から1年が経過しています) 既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。 なにをしたいのか 例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。 こんな感じに。この処理をしてくれるライブラリを書いてみます。 書いてみた物 jQuery.lineUp 使い方 例えばこんな要素があるとして <div class="items"> <!-- 異なるコンテンツ量のブロック達 --> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item"
この記事は賞味期限切れです。(更新から1年が経過しています) CSSスプライトを使用したアニメーションライブラリは既に色々と選択肢がありそうですが、 敢えて今回これを書いてみたのは、ローテクでごくシンプルな物が欲しかったから。 さらに言ってみれば、それらの選択肢をまだ知らなかったから。 MovieCrop.jsについて MovieCrop.js via Github MovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。 名前から推察されるように、ActionScriptのMovieClipを模して作った…つもりです。 再生/逆再生/停止/巻き戻しが出来ます。 簡単な使い方 まず使用する画像を作成し、ブロック要素の背景にします。 要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなの
この記事は賞味期限切れです。(更新から1年が経過しています) 以前に紹介したSammy.jsのサイトを見に行ったら、 何やら色々とバージョンアップしてフレームワーク的な物に生まれ変わっていました。 もうちょっとシンプルな物が欲しい場合もあるので、エクササイズを兼ねて書いてみました。 HashChangeとは たとえば、いわゆるページ内リンクで http://www.example.com/ から http://www.example.com/#foobar にURLが変わったタイミングにイベントを受け取って なんやかんやする為のもの。 わりと有名だと思われるのが、jQuery hashchange eventプラグインですね。 » Ben Alman » jQuery hashchange event あとは、冒頭で言ったSammy.js。こちらもjQueryプラグインです。 » Samm
この記事は賞味期限切れです。(更新から1年が経過しています) 透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。 この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。 サンプルコード 例えば、こんなコード。 <style> .test { display:block; width:128px; height:128px; background:url(./test.png) 0 0 no-repeat transparent; } .test:hover { background-image:url(./test-hover.png); } </style> <a href="#" class="test"></a> test.pngとte
この記事は賞味期限切れです。(更新から1年が経過しています) わざわざ投稿するほどのものか、というぐらいちょこざいな小技です。 JavaScriptでナビゲーションを操作して、 現在いるディレクトリのナビゲーションに「.active」クラスを付加してみます。 例えばこんなナビゲーションがあるとしますね。 こんなかんじにマークアップされているとしましょう。 <ul id="navi"> <li><a href="#" id="navi-home">HOME</a></li> <li><a href="#" id="navi-product">PRODUCTS</a></li> <li><a href="#" id="navi-about">ABOUT</a></li> <li><a href="#" id="navi-blog">BLOG</a></li> <li><a href="#" i
次のページ
このページを最初にブックマークしてみませんか?
『Mach3.laBlog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く