Archive for the 'Web' category

Google Apps Script のテストにつかうウインドウ

May 19 2012 Published by under Computer, Web

Google Apps Script のテストで改行を含む文字列をチェックしたいときにはテキストエリアを1つだけもつポップアップウインドウを使うとよいかも.Browser.msgBox() は改行とスペースが省略されてしまうので...なんか他にいい方法あるのかな

function myMsgBox(s){
   var ss = SpreadsheetApp.getActiveSpreadsheet();
   var app = UiApp.createApplication();
   var t = app.createTextArea()
          .setValue(s)
          .setWidth('480px').setHeight('290px');
   app.add(t);
   ss.show(app);
}

No responses yet

論理と表現を分離して Googleフォームの自動返信を少しだけ使いやすくする

May 18 2012 Published by under Web

今日はGoogleフォームの自動返信の文面をプログラミングを知らない人にも簡単に書き換えられるようにする方法を考えます

背景

Google Docs (最近はDriveになっちゃいました)を使うとお手軽にウェブフォームなどを作れるので,すでに使われている方も多いと思います.低予算で済ませたいプロジェクトなんかの場合,大学の職員さんにも利用をおすすめしています.

デフォルトの状態では少し使いづらくて,例えば確認メールを自動返信する機能がないとか,普通のサイトにはあるよねって思うことがなかったりして,不便に感じることが多々あります.しかし,Googleさんはさすがに偉大でして,ほとんどの問題には解決策があります.例えば,自動返信メールの場合,Google Apps Script を使えば実現することができます.

基本的には,送信というイベントをトリガーにして情報を取得します.以下2つは参考サイトです.データの取得の考え方が少し違いますがやっていることは同じです.

問題点

で,これらの解法が気に食わなかった点が何かというとJavaScript の基本的な書き方が分からない人は,返信文面の編集すらできないということです.「こういうスクリプトを書けばできますよー」とJSを書けない誰かに説明して,「やっぱりメールの文面をかえたいです!」って言われたときにJSの分かる人が書き換えてあげなければなりません.だって,行末のセミコロンの意味とか,\n が改行文字だということを知らない人にとっては,ソースを直接書き換えるのは恐怖でしょう.エラーが起きたらお手上げでしょう.そういう状況を作ってしまうのはよくありませんね.

というわけで,一度設定してあげればそれ以降は(基本的には)誰にも聞かずに文面やCC,ReplyTo アドレスを編集できるのが理想的です.

解法

ソースコードの中に文面情報を持ってしまうと,どうしてもJavaScript (Google Apps Script)のルールで書かなければならないので,外側に出します.ここでは,Google Docs のドキュメントにテンプレート情報を保存する方法を採用します.ドキュメントファイルは,Document Class として簡単に読み込むことができます.

まずは,下のキャプチャのようなウェブフォームを作ります.今回はデモなので名前とメールアドレスだけを聞く単純なフォームにします.もっと実用的なフォームでも考え方は同じです.

次に,下のキャプチャのようなGoogleドキュメントを書きます(枠と枠内右上のキャプションは説明のために付加してます).

このテンプレートは,ヘッダ・ボディ・メモの3つのエリアに分けられていて,それぞれのエリアは === (3つ以上連続するイコール)で区切られています.

  • 赤枠で囲まれたヘッダ部分に,送信時の『subject (題名)』『name (送信者名)』『cc』『bcc』『replyTo』を設定します.題名についても,フォームの入力情報を反映させることができますが,今回はやりません.
  • 青枠で囲まれた部分が,メールの本文に当たる部分です.{{Name}} および{{E-mail}} と2重の波括弧で囲まれた部分を,フォームの対応するテキストボックスに入力された情報で置き換え,それを本文として自動返信します.(Timestamp も入れてしまっていますが,これはDocsの言語設定によって名前が変わるので注意してください)
  • メモ部(2つ目の === 以降)は完全に無視しますので,何を書いても大丈夫だと思います(たぶん)

このようにテンプレートを記述しておけば,JavaScript のルールを意識しなくてもメールの文面を編集することができますよね?どうでしょう?

ソース

じゃあテンプレートの適用はどうするのということで,とりあえず次のようにやりました.もっとうまい方法があれば教えてください

2行目に指定しているGoogleドキュメントのIDはドキュメントを開いたときのURLを見れば分かります.メールアドレスが格納される列の名前だけは特別扱いで,3行目にグローバル変数として指定しています.

42行目以降の loadTemplate() 関数は,テンプレートファイルを取得して,ヘッダ部分とボディー部分を取り出します.

取り出した情報を使って,35行目のMailApp.sendEmail()に必要な情報を作っています.コア部分は,22,23行目の2重波括弧で囲まれたキーワードを置き換えるところです

// Doc ID of the template file
var id = "koko_ni_id_wo_iretekudasai";
var mailCol = "E-mail";

function onFormSubmit(e){
    try {
      var ss = SpreadsheetApp.getActiveSpreadsheet();
      var r = ss.getLastRow();
      var c = ss.getLastColumn();
      var rg = ss.getDataRange();

      // Processing the body part
      var t = loadTemplate(id);
      var body = t.body;
      var v = {};
      for ( var j = 1; j <= c; j++ ){
        // Replacing the template keyword into the input value
        var cname = rg.getCell(1, j).getValue();
        var entry = rg.getCell(r, j).getValue();
        v[cname] = entry;

        var re = new RegExp("{{"+cname+"}}", "g");
        body = body.replace(re, entry);
      }

      // Processing the header part
      var mail = v[mailCol];
      var subject = t.head.subject;
      var opt = { cc: t.head.cc,
                  bcc: t.head.bcc,
                  replyTo: t.head.replyTo,
                  name: t.head.name };

      // Sending the message
      MailApp.sendEmail( mail, subject, body, opt );
    } catch (e) {
        // When exception raised
        MailApp.sendEmail(Session.getActiveUser().getEmail(), "Error report", e.message);
    }
}

function loadTemplate(docId){
  // Load your template doc file
  // docId = Google Docs Document ID
  // Find it from doc's URI
  var t = DocumentApp.openById(docId).getText();

  // Comment out strings after double slashes
  t = t.replace(new RegExp("//.*\n", 'g'), "");

  // Body part is placed between a pair of lines with more than 3 consecutive ='s
  var tsplit = t.split(/===+.*\W+/);

  // Retrieving the header part
  // that should be placed before the first ===
  var head = {};
  var lines = tsplit[0].split(/\n+/);
  for ( var i in lines ){
    var line = lines[i];
    if ( null != line.match(/(\w+)\s*=\s*(.+)$/)) {
        head[RegExp.$1] = (RegExp.$2).trim();
    }
  }

  // Retrieving the body part
  // that should be place between the firs and last ==='s
  var body = tsplit[1];

  return { head: head, body: body};
}

結果

こんな感じになります.うまく行ってそうですね

One response so far

Voidy Options

Apr 23 2012 Published by under Computer, Web

Voidy というWordpressのテーマにしてみたんだけどレスポンシブじゃなかった。残念です。

このテーマはサイドバーの一番上に固定テキストを入れられるところがあるのだけど(Voidy Options → Sidebar Text)ここに顔写真を設定しようと思ったらWP HTTPS プラグインのせいだと思うのだけれど, http → https に勝手に変更されてしまう。僕の顔写真は暗号化されるべきですかね。

(相対パスで指定したらいまのところ上手くいってるみたいだけど,これは使いづらい。なんとかならんもんかな)

No responses yet

公開されちゃってるWordPress環境をローカルにコピーしてみた

Apr 19 2012 Published by under Web

※いつものように非専門家向けです

WordPress のテーマの,それも style.css とか,functions.php を少し弄りたいだけだし,どうせ見てる人なんてあんまりいないからと思って,エイヤっとサーバーに置いちゃうような怠慢アマチュアはきっと僕だけではないでしょう(僕だけかな?)スタイルファイルとか無害なものだときっと問題ないだろうし(?)

それでも大々的に宣伝を始めてしまったら,やっぱり心苦しくなるもので,ローカル環境をちゃんと作ってみました.実際にデータは投入されはじめているので,まったく白紙のデータベースとつないでしまわず,現状の環境をまるごとコピーということをやります.

目的

  • 原稿環境をまるごとコピー
  • できるだけめんどくさくない感じで

まずやること

  1. サーバー:Wordpressのプログラムをまるごとダウンロード.C:\WHEREVER-YOU-LIKE におく
  2. サーバー:phpMyAdmin でデータベースをまるごとエクスポート
  3. ローカル:1を入れたフォルダでPHPが実行できるように(個人的にはVertrigoServをおすすめ)
  4. ローカル:phpMyAdmin でテーブルを作って,そこに2をインポートする
  5. ローカル:config.php にデータベース情報を書き込む.VertrigoServ を入れてすぐであればホスト名 localhost, ユーザー名 root パスワード vertrigo になってるはず

通常のサーバーの移行と同じようにやればよいということですね.ダウンロードしてアップロードする.基本はそれだけですね

問題点

  • データベース接続エラーというのが出る!
  • サイト内リンクがおかしい

WP3.3 をマルチサイトで運用してたものを動かすとこういうことになっちゃいます.単一サイトの運用でもサイトのあらゆるところでサーバー環境でつかっていたドメイン情報が使われています.

方法1:DB内のドメイン情報を書き換える

間違ったドメイン情報が書いてあるんだからそれは書き換えればよろしい.ごもっとも.つまりMySQLに格納されたドメイン情報をまるごと置換してやるってことですね.具体的にはSQLをテキストで落として置換ということをやればよろしい,と → http://d.hatena.ne.jp/shunsuk/20081205/1228486751

方法2:HOSTSをいじる

ほんとは1の方がスマートな大人のやり方なんだと思います.でも僕はそれをやらなかった.なぜなら全テーブルを置換するやり方が思いつかなかったし,見るべきテーブルを知らないから!というわけで,ドメインのマッピングを無理やり変えちゃいます.

  1. HOSTS( http://helpdeskgeek.com/windows-7/windows-7-hosts-file/ )を開いて,127.0.0.1 www.your-domain.com のような一行を追加.IPアドレスは,自分のローカルサーバーのアドレスを入れます(127.0.0.1ではダメかも?Vertrigoならタスクバーアイコンを右クリックしたときに出るやつを入れればOK).ドメイン名は自分のものを入れる
  2. Apache の httpd.conf に独自ドメインの情報をいれます.

こんな感じ:

<VirtualHost *:80>
DocumentRoot "C:/WHEREVER-YOU-LIKE"
ServerName www.your-domain.com </VirtualHost>

つまりここでやっていることは,(1)ブラウザなどで www.your-domain.com にアクセスしたら 127.0.0.1 のサーバーに問い合わせるようにして,(2)問い合せを受け取ったサーバーは,www.your-domain.com へのアクセスについて “C:/WHEREVER-YOU-LIKE” ディレクトリのデータを返してやるようにしている.ってことですね(たぶん)

これによって www.your-domain.com として公開されているサイトは(一時的に)見られなくなります.もどすときは,HOSTS に追加した一行の先頭に # をつけてコメントアウトすればよいでしょう.正しいDNSを参照するようになります

おしまい

No responses yet

ぽすてん,いいです。

Jan 29 2012 Published by under Computer, Web

1日のメモをEvernoteの1つのノートにまとめるスマホアプリPostEverはみなさんすでにお使いのことと思います。Macでも同じように使えるものがないかなと思いまして探しましたら,すぐ見つかりました。

PostEN というマックのスクリプト/アプリ。すごいシンプルなんだけどこれでPostEverとだいたい同じことがMacでできるようになりました。Apple Script使うとEvernoteの操作って結構自由にできるみたいで,いつか自分でもやってみようかな(遠い目)

Windows版もあるかな

No responses yet

Google Alerts がとっても便利

Aug 27 2011 Published by under Web

これまた周回遅れがひどいですけどGoogleアラートがすごい便利.特定のキーワードを保存しておくと最新の検索結果を定期的にメールやフィードで知らせてくれます.たとえば,「Python 数値計算」という検索ワードを設定して,毎日メールで送信する設定にしておくとか,Google ReaderなどのRSSリーダーで表示させるとかできます.Google Scholar でも同様の機能が利用可能なので (検索結果が表示されてる画面で Create email alert って書いてるとこをクリックして設定) メールで最新の論文(正確には最新の検索結果)をお知らせしてくれます.Evernoteのメールでノートを保存する機能を使えば,オリジナルのナレッジベースが構築されていきます

No responses yet

Ctrl + D で Google Bookmark に登録 [Firefox編]

Aug 21 2011 Published by under Computer, Web

ボツとかいっといてなんですが,Ctrl+D でGoogle Bookmarkに登録(ボツ)の続編。

ちなみにWindows上のYAGBEのキーボードショートカットではCtrl+Dのデフォルトのキーバインドを殺せなかったので,前回のボツ発言はなかったことに...

今回はFirefoxでやってみます.ベースになるスクリプトが以前参照したものより進化しているようでさらに便利になっております.次のページを参考にしました.Firefox 4 でやられているようですが,Firefox 6 でもインストール実行可能でした

KeySnail というものを入れて (ダウンロードしたXPIファイルをアドオンマネージャーにD&D),Ctrl+Dにブックマークスクリプトを割り当てることで,目的が達成されます.次のスクリプトを追加してください.今回も選択範囲がアノテーション(備考欄)に登録されるようになっています

function (ev, arg) {
    var a = window,
        b = a.content.document,
        c = encodeURIComponent,
        d = a.open(
         'http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk='
          + c(b.location)
          + '&title='
          + c(b.title)
          + '&annotation='
          + c(b.getSelection())
         , 'bkmk_popup'
         , 'left='
          + ((a.screenX || a.screenLeft) + 10)
          + ',top='
          + ((a.screenY || a.screenTop) + 10)
          + ',height=420px,width=550px,resizable=1,alwaysRaised=1');
    a.setTimeout(
     function () {
         d.focus()
     }
     , 300)
}

アノテーションの記述が前回のスクリプトよりシンプルなのは,古いIE用の特殊な記述がなくなっているからと思います.たぶん.

このスクリプトを一応ブックマークレットにしておきます(上のとはちょっとだけ変数が違ってます.ブックマークレットではみてる変数が違うの?) → Add to Google Bookmark

javascript:(function(){var a=window, b=document, c=encodeURIComponent, d=a.open('http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk='+c(b.location)+'&title='+c(b.title)+'&annotation='+c(b.getSelection()),'bkmk_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=420px,width=550px,resizable=1,alwaysRaised=1');a.setTimeout(function(){d.focus()},300)})();

Internet Explorer 9 ではアノテーションも含め正しく機能したっぽいです.Google Chrome + Shortcut Manager でももちろん動きます.しかも今回はなんと登録したらウインドウが自動で閉じます!ww

JavaScriptで選択範囲を取得する方法については

KeySnailのフルパワーを利用したい人はこちらへ

JavaScriptに興味のある方はこちらの書籍もどうぞ:

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで JavaScript 第5版 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

One response so far

Ctrl+D でGoogle Bookmarkに登録(ボツ)

Aug 15 2011 Published by under Computer, Web

[2011/8/21追記] 実はやっぱりこの方法は必要だった...Windows の Google Chrome + YAGBE だけだとブックマーク追加のキーバインドを Ctrl+D にしてもブラウザデフォルトのバインドが無効にならなかった.やっぱりShortcut Managerを使いましょう.ただし,もっといいスクリプトがあるので新しい記事《Ctrl + D で Google Bookmark に登録 [Firefox編]》を参照してください

[2011/8/18追記] YAGBEだけでBookmark追加のショートカットが設定できることを見逃していました!Windowsでオリジナルのキーバインドを上書きするかどうか検証してませんが,こっちの方が断然いいです.というわけで下は無視してください

何を今更という話ですが...

BookmarkをChromeの同期機能でやってたんだけどやめました。増えると見づらいし,登録のときによくわからないフォルダに入れられることがあるの。ブックマークバーはスクリプトだけにしぼって,通常のブックマークはGoogle Bookmarkにする。

そのままではさすがに使いづらいのでチューンナップ。入れるエクステンションは以下のふたつ

Yet Another Google Bookmark Extension (YAGBE)
Google Bookmarkに簡単にアクセス
Shortcut Manager
Chromeのショートカットキーを簡単に変更

YAGBEを入れるだけでも右クリックでGoogle Bookmarkに追加といったことはできるのですが,やっぱりCtrl+Dで登録できないと面倒なので,Shortcut Managerを入れます。

Ctrl+Dに対して以下のスクリプトが動くようにします(元々のバインドをHIDEしちゃうよって言われますが無視)

javascript:var u=encodeURI(location.href);var ti=encodeURIComponent(document.title);var te=encodeURIComponent((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var href=(te!='')?'http://www.google.com/bookmarks/mark?op=add&bkmk='+u+'&title='+ti+'&annotation='+te:'http://www.google.com/bookmarks/mark?op=add&bkmk='+u+'&title='+ti;void(window.open(href,'_blank','width=900,height=650,resizable=1,scrollbars=1,status=1'))


(このスクリプトは 『Googleブックマークに追加するブックマークレット(メモ欄対応版)』で紹介されていたものをちょっと手を加えてポップアップするようにしたものです)

こんな感じで

するとCtrl+DでGoogle Bookmark に登録されます。テキストを選択してCtrl+DするとNotesに反映されます。

登録したBookmarkを参照するにはYAGBEの星マークをクリックして検索すればよいです。こちらはChromeのブックマークとは違ってタグ管理されてるのがGood

僕はさらにCtrl+Shift+D でGoogle Bookmarkのサイトを新しいタブで開くように設定してみました。

No responses yet

Dropbox について勘違いをしていた

Dec 22 2010 Published by under Computer, Web

Dropboxの無料スペースは最大8GBと,このHPの中で書いたような気がしますが,完全に英語を読み間違えておりました.すいません.馬鹿でした.

正解は,

基本(2GB)+追加のフリースペース(最大8GB)

で計10GBまでは使えるようです.

というわけで,まだDropboxをお使いでない方はぜひ最大10GBの無料クラウドストレージをご利用ください.僕のリンクから登録していただければ,あなたと僕にボーナス250MBがもらえます.(https://www.dropbox.com/referrals/NTEwMjg2NDI5?src=global0

さらにお友達に紹介すればひとりにつき250MBずつもらえますよー

No responses yet

ScribTeX いいのかなぁ。どうだろう。

Dec 07 2010 Published by under TeX, Web

ScribTeX=クラウドでLaTeXが使えるサービス。(ただし日本語非対応)

LaTeXは、ご存じない人のために一応説明すると、数式などの特殊な文字、記号を多用する研究者などに利用されている組版システムです。コマンドベースで命令を打ち込んでいきます。Wordのように入力=出力という関係は成り立たないので、直感的な書き方はできませんが、一度仕組みを覚えてしまえばWordよりも比較的簡単に自由度の高い美しい組版が(無料で!)できるようになります。

そういうややマニアック(アカデミックでは標準的ですが・・・)なツールがクラウドに進出してたみたい。これは素晴らしいことです。なぜかというと、WindowsにLaTeXをインストールしようとすると若干面倒で、ちょっとお友達のPCを借りてLaTeXで文章書くといったことはまぁ普通できないからです。じゃあポータブルにしてUSBメモリに入れましょうとなるとそれもまた大変(環境変数の設定を一時的に変えるバッチファイル?を作らないといけない)。何が一番現実的かというと、USBメモリからLinuxをブートしてそこで・・・まぁそんなことは普通のひとはやりたくないので、クラウドツールがあれば嬉しいなという話になります。

クラウド上にLaTeXの実行環境を配置して、Webブラウザ上でコンパイルをする。インターフェイスは普通のメモ帳みたいな安物のエディタでいいので、Google Docsみたいにイライラしなくて済むし。コンパイル処理もサーバーでやってくれるので端末側は終始軽快。出来上がりは、pdflatex で処理してるのか、PDFがでてくるから即配布可能(だから日本語はだめなんだけど。そもそも日本語のクラスファイルがないのかな)。クラウドのさらなる恩恵はスマートフォン(LaTeXのインストールなどできるはずもない)で同じ作業ができるという点。出先でのちょっとした資料作成ならPCはもうほんとに必要なくなるかもしれない。

問題はそのお値段。

価格設定は3段階のフリーミアムモデル。フリープランは、共同作業不可、容量少ない。プロジェクトは3つまで。ミディアムな感じのプランでは、容量アップ、プロジェクト数アップ、共同編集可能。最終形態は月9.99ドルで、共同編集無制限、容量1GB、プロジェクト数無制限という仕組み。この価格をどう見るか。

研究の草稿や数学の計算なんかを共同編集する場面ってのは結構限られているように思う。あと、出先で簡単な修正ができれば嬉しいということはあっても、がっつり書くという風には今のところまだならないかなぁ。LaTeXのソースは可読性に多少の難があるので、小さい画面では使いづらいんじゃないかな。補助的な役割としての利用価値が非常に高いのはこれまで述べてきた通りですが、その利用頻度にはそんなこんなで疑問符がつきます。やはりLaTeXは非クラウド的なのかもしれないなぁと思ったり。

LaTeXユーザー内の利用頻度も高くないだろうし、そもそもLaTeXのユーザー数自体がそんなに多くないだろうからこれくらい高くても(僕は高いと思う)仕方ないのでしょう。個人的にはすごくいいサービスだと思うんだけど、儲かるんだろうか???

年間1万円払ってまでLaTeXをクラウドで動かさなきゃいけない理由がこれから何か出てくればいいのですが。そうだいっそ、共同作業制限を開放しちゃって旧態依然とした研究領域もWikiみたくCrowdsourceされてしまえば面白いんだけどな。

・・・アカデミアの住人は飯の種を根こそぎ奪われて大変なことになるだろうか。それはやだな。

No responses yet

Older posts »