一矢報いる: WEB

ラベル WEB の投稿を表示しています。すべての投稿を表示

2014年7月27日日曜日

画像ファイルなどの共有について

ご近所さん達が集まって花火大会をしました。適当に写真をパシャパシャとりましたが、全員に対して全部プリントアウトして渡すのもコストだなぁと思い、共有サービスとかを使ってアドレスだけ通知することにしました。

いきなり結論

共有サービスを色々と試してみましたが、最終的にマイクロソフトの One Drive が一番いい感じです。以前は Sky Drive という名前だったと思うのですが、刷新されたんですね。しかも容量が 15 GB まで使えるようになってます。

まずはアップロード

ログインすると、次のような画面が表示されます。

フォルダを作成して、そこに写真をドラッグ＆ドロップするだけで OK です。
フォルダ内が画像ファイルだけだと自動的に「フォルダの種類」が「画像」になるようで（フォルダ右クリック - プロパティで確認出来ます）、画像になっていると次の機能が自動的に発動するようです。

フォルダはスライドショー的に中の画像が切り替わります。
フォルダを開くとタイル状に写真サイズを判断してオシャレに配列してくれます。
画像の表示がフェードインです。
画像を表示すると Mac OS X Finder の Cover Flow ライクに表示してくれます。かっこいい。
フルスクリーンでスライドショーを実行出来る。

共有する

アップロードしたファイルは基本的に自分専用なので、共有します。共有したいフォルダ／ファイルを選択して右クリックしましょう。

これの「共有」を選択します。ちなみに「ダウンロード」を選択するとフォルダなら圧縮してダウンロードされます。共有の設定画面はこれです。

Facebook やってない人もいると思うので、今回は「リンクの取得」を選びます。
共有する範囲を選択し、「リンクの作成」ボタンを押すだけでOKです。

リンクが生成されます。

このリンクを共有したい人に通知するだけで、他の人も見れるようになります。
ちなみにリンクの短縮をクリックすると、リンクが短くなります。かゆいところに手が届くー。マイクロソフト、なかなかいい感じです。

ここからは、Pages で名刺のテンプレートにリンクURLを貼付けて、ご近所さんに配りました。

他の共有サービス

いくつか試みましたが、うまく出来なかったり微妙でした。簡単に書いておきます。

Flickr
老舗中の老舗ですね。AppleTVにメニューがあるんで、本当はこれを使ってみたかったのですが、結局アカウントが作成出来ず、断念しました。Yahoo アカウントが必要です。gmail か facebook とも連結出来るようですが、何故かうまく行きませんでした。Yahoo アカウントを作ろうとしましたが、携帯に確認用SMSが通知されてこず、それ以降の手続きが出来ませんでした。携帯番号の入れ方が間違っているのかな？？？頭の０を取ったりしてみたんですが。iPhone がダメなのかな。。。
GooglePlus
gmailがあるんで、それでやろうとしましたが、共有した場合、全員が画像の操作（例えば削除とか）が出来るようになってしまい、これではダメだと断念。参照のみとか出来るのかもしれませんが、ざっと見た感じ見当たりませんでした。
CANON IMAGE GATEWAY
プリンタ買った時にそんなのがあったなーと思い出して登録してみました。が、いざ画像をアップロードしようとしたら、プリンタ購入だけだと画像のアップロードに対応していないとか。デジカメ、ビデオカメラもあるんですが、シリアル番号がわからなくて断念。

この時点で深夜２時をまわってたので、これ以上は調べませんでした。

One Drive でほぼ完成されていると思うのですが、それ以上のものを知っている人がいましたら是非教えて頂きたいです。

2013年5月11日土曜日

[Silverlight]CSV出力

Silverlight で CSV データを保存しよう。
たぶん、やり方は２つ。

Silverlight アプリケーションでデータを生成し、ローカル保存するのが１つ目。

string csvData = "";

// カンマ区切りの文字列を csvData に設定

SaveFileDialog dialog = new SaveFileDialog();

dialog.DefaultExt = ".csv";

dialog.Filter = "データ | *.csv";

dialog.DefaultFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + ".csv";

if (dialog.ShowDialog() == true)

{

using (var stream = dialog.OpenFile())

{

using (var writer = new StreamWriter(stream, Encoding.UTF8))

{

writer.Write(csvData);

writer.Flush();

}

CSVファイルの文字コードは shift-jis じゃないと Excel で開いたときに文字化けしてしまう。普通にファイル出力してしまうと、UTF-8 で出力される。とはいえ、Silverlight には標準で shift-jis にサクッと変換するすべは無い。だが、Excel も UTF-8 をサポートしているはずなので、調べてみたところ BOM(Byte Order Mark) が付与されているものであれば、UTF-8 でも開けるとのこと。

BOM を付与するには、StreamWriter の第二パラメータにちゃんと UTF8 ですよってつけてあげればおk。

DefaultFileName を未設定だと、保存ダイアログのファイル名のところが空になってしまい、設定しちゃうと、保存ダイアログ表示前に勝手に確認ダイアログが出るのが気に入らない。
UTF-8 じゃなくて shift-jis で出したい場合は、ちょっと手間だけど次の方法。

サーバーサイドで作ってダウンロードさせる。これが２つ目。

aspx 作って POST で返すのもいいけど、今回はジェネリックハンドラを使う。
まずはサーバーサイド。

/// <summary>

/// CsvDownload の概要の説明

/// </summary>

public class CsvDownload : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

string csvData = "";

// カンマ区切りの文字列を csvData に設定

context.Response.ContentType = "text/csv";

context.Response.AddHeader("Content-Disposition", "attachment;filename=" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".csv");

context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("shift-jis");

context.Response.Write(csvData);

}

public bool IsReusable

{

get

{

return false;

}

これで、CsvDownload.ashx をクライアント側から呼び出すだけでおk。

呼び出し方はいくつかあって、Silverlight アプリケーションから直接呼び出す場合は、WebClient クラスを使ってバイトデータを読み出したあとに、１つ目と同じ方法で保存する。

javascript 側からリクエストする方法もいくつかある。
流れはjsにリクエストさせる為のメソッドを用意して、Silverlight側からCALLする。

☆js側

function getCsv() {

}

</script>

☆SL側

HtmlPage.Window.Invoke("getCsv");

getCsv の中でHTTPリクエストをやるんだけど、まずは一番かっちょわるいやりかた。
新規Window作ってそこからリクエストする。

var w = window.open("CsvDownload.ashx", "csv", "width=1,height=1", null);

w.onload = function () {

w.close();

};

self.focus();

Windowが見えるのはやだよね。

これを回避する為には隠しiframeを使う。

var iframe = document.createElement("iframe");

if (iframe != null) {

iframe.style.display = "none";

iframe.onload = function () {

document.body.removeChild(iframe);

}

document.body.appendChild(iframe);

iframe.src = "CsvDownload.ashx";

}

ほかにも jQuery の ajax 使うのとか色々ありそうだけど、キリが無いので今日はここまで。

2013年3月22日金曜日

[jQuery]iframeのスムーズな切換え

最近ではあまり使われなくなっている Frame 関係だけど、業務アプリケーションではまだまだ使っていることも多い。

iframe のコンテンツを切り替える際に iframe 内が真っ白になってしまう。
切換え先のページのロードが重たければ、白い画面がしばらく表示されることになるのだが、なんとかならんか〜と考えてみた。

結論から言うと、iframe を div タグ内に入れて、div タグをフェードイン／フェードアウトさせればフワフワっとページを切り替えることが出来る。

フェードインは iframe の loaded イベントで行う。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var index = 0;

var pages = new Array("aaaa.html", "bbbb.html");

function frameChange(){

$('#contents').animate({ opacity: 0 }, 500, function () {

$('#contents').css("visibility", "hidden");

main.location.href = pages[index];

index++;

index = index % 2;

});

}

function loaded(){

$('#contents').css("visibility", "visible");

$('#contents').animate({ opacity: '1' }, 800, function () {

});

}

</script>

</head>

</div>

</body>

</html>

[jQuery]アコーディオンメニュー

dtタグを使ってメニューを作成し、サブメニューは sideToggle によるアニメーションでのの表示／非表示を切り替えることでアコーディオン風のメニューが出来上がる。

<head>

$(document).ready(function(){

$('dd').css("display", "none");

$("dt").click(function () {

if ($(this).next().children(0).children().length != 0) {

$(this).next().slideToggle("slow");

}

return false;

});

</script>

</head>

<body>

<dd>

<ul>

<li>サブメニュー１</li>

<li>サブメニュー２</li>

<li>サブメニュー３</li>

</ul>

</dd>

<dd>

<ul>

<li>サブメニュー１</li>

<li>サブメニュー２</li>

<li>サブメニュー３</li>

</ul>

</dd>

</body>

</html>

2012年1月30日月曜日

Blogger でタイトル一覧を表示する方法

このブログをカスタマイズする際に、ラベルでタイトル一覧を出したいなぁと夢想し、早速 Google 先生に聞いてみたところ、下記サイトを紹介してくれた。

やってみるも、表示されず。。。さらに調べてみると、埋め込むコードの位置を <b:includable id='main' var='top'> の後にするといいという記述を見つけてやってみると表示された。しかしこのままでは、「前の投稿」「次の投稿」でもタイトル一覧が表示されてしまう。そりゃ判定文が、URL で判定してたらそうなるわな。で、代替えになる判定材料を Layouts Data Tags - Globally Available Data で調べてみると、ふむふむ、ちょっと力技だけどタイトルの比較でいけそう！ってことが判明。早速、試してみるといい感じで表示される。

以下、作り方の手順を記す

テンプレートのHTMLの編集ボタンをクリック

ウィジェットのテンプレートの展開をチェック

<b:includable id='main' var='top'> を検索し、その下に下記コードを貼付ける

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.title != data:blog.pageTitle'>
<ul id='post-title-navigation'>
<span>このページの記事一覧</span>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:post.title'>
<a expr:href='"#" + data:post.id'><data:post.title/></a>
<b:else/>
<a expr:href='"#" + data:post.id'><data:post.id/></a>
</b:if>
</li>
</b:loop>
</ul>
</b:if>
</b:if>

Google Chart で QR コードを作ろう

QR コードを作りたかったら、Google Chart を使うと簡単に出来ますよっていうお話。

使い方をググってみても、URL(API) を手打ちで頑張っている人が結構いるようで、そんなことしなくても簡単に作れる Wizard が用意されています。

Google Chart Tools Chart Wizard

Editor タブを選ぶ。
Chart Type を QrCode に。
Options for QR Code を Shift_JISにしたほうが良さげ（UTF-8だと携帯で見たら文字化けした）。Text が多い場合は「H」がいいかもね。

あとは適当に入力したら、結果 Image と Link 文字列／タグ文字列が生成されるので、それを使って HP に埋め込むもよし。名刺に使うのもよし。

登録: 投稿 (Atom)

2014年7月27日日曜日

画像ファイルなどの共有について

いきなり結論

まずはアップロード

共有する

他の共有サービス

2013年5月11日土曜日

[Silverlight]CSV出力

関連

2013年3月22日金曜日

[jQuery]iframeのスムーズな切換え

[jQuery]アコーディオンメニュー

2012年1月30日月曜日

Blogger でタイトル一覧を表示する方法

Google Chart で QR コードを作ろう