ふと思い立ち、ブログをNext.jsで作って、記事をこっちに移動してきたよという話。
いわゆるJamstackなブログというやつですね。この記事は作るにあたってやったことと参考になった記事のメモ。
リポジトリはここ。
<a href="https://github.com/alfe/blog">https://github.com/alfe/blog</a>
<h3>移行手順</h3>
<h4>ブログをつくる</h4>
まずはMarkdownのファイルを入れるとブログっぽい表示になるWebサイトを作ります。以下のサイトをほぼコピペで投稿一覧ページと投稿詳細ページができました。助かる。
<a href="https://gotohayato.com/content/517/">Next.js を使った Jamstack なブログの始め方 | gotohayato.com</a>
<h4>はてなブログ記事のエクスポート</h4>
こちらは <a href="https://github.com/x-motemen/blogsync">x-motemen/blogsync</a> を使って記事のダウンロード。
「見たまま」編集で記事を描いていたため、出力される記事はHTMLになっていました。なので、投稿詳細ページをHTMLとマークダウンが混じっていても上手く表示できるように <a href="https://github.com/remarkjs/remark">remark</a>のプラグインやらを変更。
<h4>OGPをつける</h4>
これはこんな感じで。Next.jsは気軽に&#x3C;head>へ要素を突っ込めるので良い。
<pre><code class="language-jsx">import React from "react"
import Head from "next/head"

const Ogp = (props) => {
 const siteTitle = "FUN YOU BLOG"
 return (
 &#x3C;Head>
 &#x3C;meta property="og:url" content={`https://blog.alfebelow.com/entry${props.slug}`} />
 &#x3C;meta property="og:type" content="website" />
 &#x3C;meta property="og:title" content={props.title} />
 &#x3C;meta property="og:description" content={props.description} />
 &#x3C;meta property="og:site_name" content={siteTitle} />
 &#x3C;meta property="og:locale" content="ja" />
 &#x3C;meta property="og:image" content={props.thumbnail} />
 &#x3C;meta name="twitter:card" content="summary_large_image" />
 &#x3C;meta name="twitter:site" content="@alfe_below" />
 &#x3C;/Head>
 )
}
export default Ogp
</code></pre>
<h4>サムネをつける</h4>
Markdownファイルのタイトルとか入れるところに <code>IMAGE</code> 欄を用意した。この記事だと以下みたいになる。
<pre><code>---
Title: ブログをはてなブログからNext.jsで作ったブログに移行した話
Category:
- プログラム
Date: 2022-09-04T23:10:31
IMAGE: /img/2022/09/04/thumbnail.png
---
</code></pre>
IMAGEに入れたものは記事一覧のサムネとOGP画像になる。
<h4>記事フッター</h4>
前の記事と次の記事へ飛べるようにしてる。
<img src="/img/2022/09/04/entry-footer.jpg" alt="image">
<h4>フッター</h4>
カテゴリー、年別アーカイブ、プロフィールとかを入れた。年別アーカイブでなく月ごとのリンクにしたりとか、各カテゴリーの記事数とか出したりとかしたい。
が、めんどいのであとまわし。
<img src="/img/2022/09/04/footer.jpg" alt="image">
<h4>スマホ対応</h4>
これはお気持ち程度に。また気が向いたらちゃんとやる。
<h4>RSS</h4>
ちゃんと<a href="/feed.xml">feedのxml</a>も作ってる。下の記事を参考にした。
ただ、このブログはSSGでなくSSRにしてるので、RSSの生成部分は別途切り出して手動でたたいて出す感じにした。のちのちCIに組み込みたい。
<a href="https://fwywd.com/tech/next-feed-rss-atom">Next.js に feed を導入して RSS と Atom のフィードを生成しよう | fwywd（フュード）powered by キカガク</a>
<h4>デプロイ to Netlify</h4>
いつものように <code>netlify init</code> をした。
せっかくなので、 <a href="https://vercel.com/">Vercel</a> でホスティングしても良いかもと検討はしてみた。が、Googleアドセンスがダメって話とホスティング先を分散するとどこになに置いたか忘れて大変になるという過去の経験から今回も <a href="https://www.netlify.com/">Netlify</a> で、という話になった。
<h3>移行してよかったこと</h3>
<ul>
<li>画面が好き勝手いじれるようになる。特にheadや細かいボタン回り。</li>
<li>ボタンをコンポーネントとして扱えるのでデザイン周りの変更が楽そう。</li>
<li>VSCodeで文字書いてそのままpushできる。あとあとtextlintとかもいれたい。</li>
<li>ブログ記事の追加がGitHubへの1コミットになる。</li>
</ul>
<h3>移行したデメリット</h3>
<ul>
<li>細かいところも自分で実装する必要ができた</li>
<li>外部サイトへのリンクとか</li>
<li>Amazonの商品ページのリンクとか</li>
<li>カテゴリーや過去記事なんかもそう</li>
</ul>
この辺のデメリットを美味いことやってくれるのがブログサービスだったんだなと、作ってみてあらためて感じた。
HugoやGatsbyなんかをつかえば多少楽になるだろうけれども、細かい調整をできなさそうな気がしてNextにしてる。
<h3>まとめ</h3>
しばらくはこのスタイルでやってみますので、なにとぞ。

ふと思い立ち、ブログをNext.jsで作って、記事をこっちに移動してきたよという話。
いわゆるJamstackなブログというやつですね。この記事は作るにあたってやったことと参考になった記事のメモ。
リポジトリはここ。

移行手順
ブログをつくる
まずはMarkdownのファイルを入れるとブログっぽい表示になるWebサイトを作ります。以下のサイトをほぼコピペで投稿一覧ページと投稿詳細ページができまし

ブログをはてなブログからNext.jsで作ったブログに移行した話

3月末、OBSのカスタムCSSをつくるジェネレーターを作成して公開しました。そこからしばらく経ったのでアクセスログをまとめてみようと思います。
 
<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.alfebelow.com%2Fentry%2Fobs-discord-icon" title="OBSでDiscordのアイコンを四角や横並びにするジェネレーター - FUN YOU BLOG" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: auto;"></iframe>
<h3>アクセスログ</h3>
当初、アクセスログをつけてなくて、GA4を設置したのが5月4日だったのでそこからのデータになりますがおおよその把握できるかなと思います。
<figure class="figure-image figure-image-fotolife mceNonEditable" title="アクセスログ 5月1日～2022年7月1日">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20220702/20220702142454.png" width="773" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
<figcaption class="picture-caption">アクセスログ 5月4日～7月1日</figcaption>
</figure>
<h4>紹介動画</h4>
5月中旬くらいまではだいたい100前後。個人でつくってるWebアプリの伸びとしては、まあこれぐらいが妥当かなといった感じです。
アプリの宣伝のために行ったこととしては、解説ブログに加えて、今回は追加でニコニコ動画とyoutubeに紹介の動画をアップロードしています。
 
<h5>ニコニコ動画とyoutube</h5>
ニコニコ動画とyoutubeそれぞれの再生数は、このようになっています。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20220702/20220702143159.png" alt="ニコニコ動画の再生数">
ニコニコ動画の再生数
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20220702/20220702143350.png" alt="Youtubeの再生数">
Youtubeの再生数
ニコニコ動画が各日の再生数・Youtubeが累積の再生数を表示しているので比較しづらいのですが、再生数自体は若干ニコニコ動画の方が多いですかね。
よく言われているように、youtubeよりもニコニコ動画の方が新規参入に優しいと言われているのは、身をもって体感しました。
ニコニコはタグを付けることができるので、そのタグに興味のある方が結構見てくださってます。
今回は「ニコニコ技術部」と「ニコニコ動画講座」のタグを付けています。アナリティクスの画面で「この動画を見た人が最近見ている動画」というのを確認できるのですが、 動画の傾向的にニコニコ技術部を見ている方々が見てくださってたのかなという雰囲気。
あとは投稿者以外がタグの追加をすることができるんですけれども、どなたかが「今週の技術革新タグ」をつけてくださって、それはすごい嬉しかったですね。
対してYoutubeは新規参入者に厳しく、動画のタイトルで検索かけても表示がされないというのは体験しました。
しかしながら、徐々に伸びていってはいるので、もしかすると1年後とかに再生数が逆転するのかもしれないですね。
個人的にはアプリの存在を周知するためにはニコニコ動画、逆に検索を挟む必要がないチュートリアル動画置き場の用途であればYoutubeで十分かなという気がします。どちらかというとYoutubeを使い慣れているというユーザは多そうですし。
もちろん両方に投稿するのがよりよい、という感じはします。
 
<h4>GIGAZINEでの紹介</h4>
とある日、このアプリへの言及や紹介ツイートのRTが増えたなあと思って調べてみたところ、GIGAGINEが紹介しているのを見つけました。
<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgigazine.net%2Fnews%2F20220517-obs-discord-icon-generator%2F" title="配信画面上で今誰が話してるのかをDiscordのアイコンで超わかりやすくする「OBSのDiscordアイコン外観変更ジェネレーター」の使い方" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: auto;"></iframe>
びっくりはしたんですが普通にありがたい。ということで、便乗してアプリのフッターに紹介記事のリンクを付けました。
 
5月17日の記事にて紹介されて、アクセス数の伸びはというと3～4倍くらいになりました。
最高地点が21日の425回。17日当日は240回でした。
<figure class="figure-image figure-image-fotolife mceNonEditable" title="アプリのアクセスログ（再掲）">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20220702/20220702142454.png" width="773" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
<figcaption class="picture-caption">アプリのアクセスログ（再掲）</figcaption>
</figure>
3～4倍のアクセス回数を以前と比べて大幅に増えたと見るか、有名なWebメディアに紹介されてもこんなものかとみるのかは人それぞれかと思います。 
もちろんこの手のアプリだと紹介されて記事を読んだ人のうち、わざわざアプリにアクセスする人が何割いるのかという話もあります。 
とはいえメリットはあってもデメリットはこちらにないですし、特にこの手のwebアプリだと他のブログや記事などで使い方を紹介してもらうと、ユーザ視点でよりとっつきやすくなるので、紹介してもらえるととてもありがたい。
<h3>現状の集客</h3>
この記事を書いている現時点で、どのようにこのWebアプリを見つけているかを見てみると、Direct、次にオーガニックサーチとなっています。
<figure class="figure-image figure-image-fotolife mceNonEditable" title="トラフィックの獲得 6月25日～7月1日">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20220702/20220702150052.png" width="611" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
<figcaption class="picture-caption">トラフィックの獲得 6月25日～7月1日</figcaption>
</figure>
Directというのはブックマークに登録しているとかURLに直接打ち込んだとか、参照元がわからない（つまりその他）の数となります。
オーガニックサーチというのはGoogleとかで検索して入ってきた人の数ですね。
で、Google Search Consoleでどんな検索キーワードで来ているのかを見ると、こんな感じ。
<figure class="figure-image figure-image-fotolife mceNonEditable" title="検索パフォーマンス（過去3か月）">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20220702/20220702150607.png" width="590" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
<figcaption class="picture-caption">検索パフォーマンス（過去3か月）</figcaption>
</figure>
「obs ディスコード アイコン 四角」と検索して飛んで来ている人が多い様子です。
アプリを作っていた当初、「obs discord アイコン 四角」で検索に引っ掛けようと想定していたので、SEO対策は成功と言ってもいいのではないでしょうか。
discordはカタカナで検索されがち、というのは想定外でしたが。
アプリのタイトルが長いことからも想像できる通り、短い単語で機能を伝えるのが難しいアプリではあるので、4単語の検索キーワードで出てくるのが妥当かなと思っています。
一度設定したらしばらく使わなくて済むタイプのアプリですし。
 
<h4>動画と検索結果</h4>
で、このキーワードで検索した時に、アプリ本体だけでなく、動画のサムネイルが結果画面に表示されるっていうのは今回得られた知見です。
<figure class="figure-image figure-image-fotolife mceNonEditable" title="「obs discord アイコン 四角」での検索結果">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20220702/20220702151229.png" width="745" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
<figcaption class="picture-caption">「obs discord アイコン 四角」での検索結果</figcaption>
</figure>
 
Webアプリだけでつくった、という場合だと検索結果の１つとして表示されるだけですが、アプリに加えて紹介記事や紹介動画も置いておくと、アプリへのリンク以外に間接的な流入元が増えるというのは今後いろいろ活用していきたい知見。
ある意味、検索結果画面のOGPみたいな感じで動画を併用するのが良さそうな気がしていますね。
 
<h4>リプライでの言及</h4>
あとはアナリティクスを見る限り流入数としては少なめなんですが、ツイッターのリプライで言及されているのはよく見かけます。
OBSでアイコンぴょこぴょこさせたいがどうすれば……？ みたいなツイートをしている実況者やVtuberさんに、これ便利ですよ、とURL付きでリプライを投げてくださっているのを見かけています。
オススメできるくらい使いやすいツールとして認識してくれてるというのはうれしいですね。
TwitterやSlackで投げやすいツールは複雑な説明がいらず、分かりやすいということだと思うのでこういう今後もこういうのをつくっていきたいところ
 
<h3>まとめ</h3>
アナリティクスを見ながらいろいろ考察してみる記事でした。動画で紹介するのが思ったより大事、というのが今回の収穫ですかね。
使ってる人がそこそこいそうな感じのアプリなので、何か思いついたらアップデートもかけていきたいなと思っています。

3月末、OBSのカスタムCSSをつくるジェネレーターを作成して公開しました。そこからしばらく経ったのでアクセスログをまとめてみようと思います。
 

アクセスログ
当初、アクセスログをつけてなくて、GA4を設置したのが5月4日だったのでそこからのデータになりますがおおよその把握できるかなと思います。


アクセスログ 5月4日～7月1日

紹介動画
5月中旬くらいまではだいたい100前後。個

アイコン外観変更ジェネレーターのアクセス推移

Among us実況とかで雑談配信とかで、四角いDiscordのアイコンが横並びでぴょこぴょことよく動くのを見かけます。
その見た目を自分好みに設定できるように「<a href="https://obs-discord-icon.alfebelow.com/">OBSのDiscordアイコン外観変更ジェネレーター</a>」をつくりました。
<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fobs-discord-icon.alfebelow.com%2F" title="OBSのDiscordアイコン外観変更ジェネレーター" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: auto;"></iframe>
<h3>何ができるの？</h3>
<ul>
<li>アイコンを横並びにしたり</li>
<li>アイコンのサイズを変えたり</li>
<li>アイコンの形を四角くしたり角を丸くしたり</li>
<li>アイコンをぴょこぴょこさせたり、点滅させたり</li>
<li>ぴょこぴょこする速さを変えたり</li>
<li>名前の位置を調整したり</li>
<li>名前を文字だけにしたり縁取りに変えたり</li>
</ul>
といった調整を、見た目を確認しながら変更できます。
そして、変更後の見た目をOBSに反映するカスタムCSSが出力されます。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20220320/20220320164720.png" alt="f:id:alfe1025:20220320164720p:plain" width="1200" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
<h3>導入方法</h3>
ジェネレータにも使い方説明が出てくるボタンを用意してますが一応こちらでも説明。
<h5>1. OBSのソースにブラウザを追加</h5>
OBSを起動、OBSのシーンを選択後、「ソース」欄で右クリックしてブラウザを追加
<div class="MuiBox-root css-xi606m" style="text-align: center; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><img src="https://obs-discord-icon.alfebelow.com/assets/1_add_browser.b4336576.png" /></div>
<h5>2. Discord を起動</h5>
起動していない場合は起動してください
<div class="MuiBox-root css-xi606m" style="text-align: center; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> </div>
<h5>3. Discord StreamKit Overlay にアクセス</h5>
<a href="https://streamkit.discord.com/overlay">https://streamkit.discord.com/overlay</a> にアクセス
<div class="MuiBox-root css-xi606m" style="text-align: center;"><img width="80%" src="https://obs-discord-icon.alfebelow.com/assets/2_Discord-StreamKit-Overlay.1be10a2f.png" style="border: 1px solid #1976d2; border-radius: 8px; margin: 1rem 0px;" /></div>
<h5>4. ボイスウィジェットのURLを取得</h5>
「Install for OBS」をクリックし、「VOICE WIDGET」のタブを選択
「Server」と「Voice Channel」からボイスチャンネルを選択
右下に表示されるURLをコピー
<div class="MuiBox-root css-xi606m" style="text-align: center; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><img width="80%" src="https://obs-discord-icon.alfebelow.com/assets/discord-url.0f1b9919.png" /></div>
<h5>5. OBSにURLを入力</h5>
OBSに戻り、中央にあるURLの入力欄に 3. でコピーしたURLを貼り付け
<div class="MuiBox-root css-xi606m" style="text-align: center; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><img width="80%" src="https://obs-discord-icon.alfebelow.com/assets/1_obs_empty.cfb78304.png" /></div>
<h5>6. カスタムCSSを作成</h5>
<a href="https://obs-discord-icon.alfebelow.com/">OBSのDiscordアイコン外観変更ジェネレーター</a> で好みの見た目を決めたあと、下に表示されるCSSをコピー
<div class="MuiBox-root css-xi606m" style="text-align: center; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><img width="80%" src="https://obs-discord-icon.alfebelow.com/assets/copy-css.d1fe68cb.png" /></div>
<h5>7. OBSにカスタムCSSを入力</h5>
OBSに戻り、URLの少し下にあるカスタムCSSの入力欄に 5. でコピーしたカスタムCSSを貼り付け
<div class="MuiBox-root css-xi606m" style="text-align: center; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><img width="80%" src="https://obs-discord-icon.alfebelow.com/assets/obs-css.3ec88a4a.png" /></div>
<h5>8. 作成完了</h5>
ダイアログをOKで閉じて完了。OBSに話している人が表示されます。
<div class="MuiBox-root css-xi606m" style="text-align: center; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><img width="80%" src="https://obs-discord-icon.alfebelow.com/assets/obs-complete.3113658d.png" /></div>
 
<h3>Q＆A</h3>
<h4>Q. なんでつくったの？</h4>
自分が欲しかったので。
CSSの微調整するときにOBS上でやるの大変なので、ブラウザで調整してからOBSに持っていきたかったんです。
ブラウザで調整するならいっそのことジェネレータにしてしまおうかと。
配信はしてないけれども、身内でAmongusするときにDiscordのライブ配信用に使ってます。
<h4>Q. 設定方法がいまいちわからない</h4>
設定方法自体は「OBS Discord アイコン 四角」とかでググるとたくさん出てくるので、わかりやすいのを探してください。
カスタムCSSをうまいこと作るジェネレーターを作っただけなので、OBSそのものの質問とか来るとつらい。
<h4>Q. こういうのも設定できるようにしてほしい</h4>
GitHubわかるひとはレポジトリ( <a href="https://github.com/alfe/obs-discord-icons-css-generator">https://github.com/alfe/obs-discord-icons-css-generator</a> )にIssueとかプルリクとか投げてください。
ついでにスターも押してくれると嬉しいです。
GitHubわからないひとは、Twitterにリプとか投げてもらえると。実装できそう＋やる気があるときに機能追加するかもしれません。
 
以上、OBSのDiscordアイコン外観変更ジェネレーターの紹介でした。

Among us実況とかで雑談配信とかで、四角いDiscordのアイコンが横並びでぴょこぴょことよく動くのを見かけます。
」をつくりました。

何ができるの？

アイコンを横並びにしたり
アイコンのサイズを変えたり
アイコンの形を四角くしたり角を丸くしたり
アイコンをぴょこぴょこさせたり、点滅させたり
ぴょこぴょこする速さを変えたり
名前の位置を調整したり
名前を文字だけにしたり縁取りに変えたり


OBSでDiscordのアイコンを四角や横並びにするジェネレーター

いま某大学で情報について学んでいる3回生から就活の相談を受けていて、その人から「これからアプリ開発をしていこうと思うが何から手をつけていいかわからない」と質問が来たので、送ったメモの転記。
 
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20210630/20210630162422.jpg" alt="f:id:alfe1025:20210630162422j:plain" width="1200" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
 
<h3>いきさつ</h3>
「いま大学もリモートワークで、就活の相談もままならない情報の3回生が友達の息子にいるので、ちょっと相談に乗ってあげてほしい」と父親から連絡来たので、1時間ほどZOOMをしました。
で、そのときに「情報出身でSIer系志望なら自作アプリとかあると結構アピールできるよ」とアドバイス。
情報系の学部出身の大学生がみんなプログラミングをバリバリ書けるというわけではなく、授業と研究以外でコードを書かなかったという人も多々います。なので、研究が本格的に動き始める前の就活シーズンだと、過去のプログラミング経験を聞いたときに「授業でJSPのWebサイトつくった」だけというレベルの人も普通にいます。
私も情報系の大学出身なのですが、FizzBuzz書ける人半分いるのかな？くらいの体感でした。どちらかというとサブネットマスクの計算方法とかビット演算をできる人のほうが多いのでは？
そんなわけで、「自作アプリ作っておくと面接のときにデモもできるし、コードについての理解も深まるので良いよ」とアドバイスしたのですが、後日 「アプリ製作についてまったくわからず、どこから手をつけていいかわからない。」とメールが来たので、ちょっとまとめて返信しました。
 
<h3>Web</h3>
正直、先方のスキルがあまり把握できてなかったので、レベル別に。
<h4>1. HTML・JavaScriptを書いたことがない</h4>
このレベルだと、まずはHTMLやJSの書き方をドットインストールで学ぶのがオススメ
<ul>
<li>https://dotinstall.com/lessons/basic_website</li>
<li>https://dotinstall.com/lessons/basic_javascript_v4</li>
<li>https://dotinstall.com/lessons/omikuji_js_v5</li>
</ul>
前提知識が書いてあるものの、いったん無視して進めても大丈夫かな？という感覚。 わからないタグや関数はググればいいので。
 
作ったものはGitHub Pagesで公開。ついでにGitHubのアカウントもつくれるし、サイトの公開だけであればGitの知識無くてもいいので。
<ul>
<li> https://prog-8.com/docs/github-pages</li>
</ul>
 
<h4>2. プログラミングが書ける</h4>
Reactのチュートリアルを一通りやってみる。React公式の三目並べをつくるチュートリアルはよくできてて、日本語で解説されてる上にステップバイステップで解説されてて良い。
<ul>
<li>https://ja.reactjs.org/tutorial/tutorial.html</li>
</ul>
Webアプリをしっかりとつくっていこうと思っている人には、このReactチュートリアルのページを渡しがち。なんちゃってプログラミング教室みたいなときはjQueryでお茶を濁すのだけども。
 
そして、このレベルならGitでバージョン管理までできると良いですね
<ul>
<li>https://backlog.com/ja/git-tutorial/</li>
</ul>
<h4> 3. クラウドでばりばり開発してると言いたい</h4>
ここは努力目標。 ReactのアプリをFirebaseにデプロイする
<ul>
<li> https://zenn.dev/h_yoshikawa0724/articles/2020-10-06-react-firebase-deploy</li>
</ul>
nodejsの知識が必要なので、ちょっとハードルはあがる。しかしながら、面接のときに「GCPでWebアプリデプロイしてます」とデモを見せれると出来そう感でてきますよね。
 
さらにログインやDB管理までできると、実現の幅が広がるのでつくれるものも増えます。
<ul>
<li>https://future-architect.github.io/articles/20200819/</li>
</ul>
 
<h3>スマホアプリ(Android)</h3>
私も正直詳しくないですが、最近は Kotlin を使って開発することが多い雰囲気。
<ul>
<li>https://developer.android.com/kotlin/androidbasics?hl=ja</li>
</ul>
英語混じりではあるが、はじめはここからAndroid Studioを使ってサンプルアプリを作ってみるのが良いでしょうか
<ul>
<li>https://developer.android.com/courses/pathways/android-basics-kotlin-two?hl=ja</li>
</ul>
私が昔かじったときはAndroidのアプリをつくって公開するところまではこのページだけで行けた記憶
<ul>
<li>https://developer.android.com/studio/intro?hl=ja</li>
</ul>
React Native や FlutterのようにAndroid/iPhone共にアプリを作れるものも。
iPhone向けはもっと詳しくないですが、Swiftとかでつくれるはず。
 
<h3>まとめ</h3>
上記を送って、「参考にします！」と返ってきました。
うまいことやってほしいところ。

いま某大学で情報について学んでいる3回生から就活の相談を受けていて、その人から「これからアプリ開発をしていこうと思うが何から手をつけていいかわからない」と質問が来たので、送ったメモの転記。
 

 
いきさつ
「いま大学もリモートワークで、就活の相談もままならない情報の3回生が友達の息子にいるので、ちょっと相談に乗ってあげてほしい」と父親から連絡来たので、1時間ほどZOOMをしました。
で、そのと

これからアプリ開発をはじめるときにどこから手を付ければいいか（就活中の情報３回生向け）

Windows機で開発しようとすると、コマンドライン使いにくい問題が発生します。
 
Windows10になってある程度はマシになったんですが、それでもやっぱり使いにくい。
> ls って打って
<blockquote>
'ls' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。 
</blockquote>
と返ってきたときの、あー・・・って感じ。エンジニアあるあるだと思ってる。
 
でもなー PowerShellとかCygwinっていい思い出ないんだよなー
大学時代の講義とかで使わされたけど、消そうとするとゴミが残るしあまり入れたくないなー。ちょっとしたトラブルのときにgit statusとかssh-keygenって打てればいいだけなんだけど。
 
おや。何かデザインのいいターミナルソフトがあるな。
え。ポータブルなんだけど。なにこれ。
 
<h1>cmder</h1>
<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: auto;" title="cmder | Console Emulator" src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fcmder.net%2F" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="https://cmder.net/">cmder.net</a></cite>
ページ真ん中くらいにある[Download full]からダウンロードできる。
zipファイルを落としてきて解凍するとすぐ使える。
インストーラーすら必要ない。
USBメモリにターミナルが入る時代。
なにそれつよい。
 
見た目はこんな感じ↓
デフォルトの設定では複数タブとか使えるようになってる。
私は見た目すっきりが好きなので消した。ショートカットキーでタブ切り替えできるし。
<img class="hatena-fotolife" title="f:id:alfe1025:20160731123937p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20160731/20160731123937.png" alt="f:id:alfe1025:20160731123937p:plain" />
 
Unixコマンドで多用しそうなのはだいたい入ってる。
例えば、
<ul>
<li>ls</li>
<li>git</li>
<li>ssh</li>
<li>ssh-keygen</li>
<li>vim</li>
<li>less</li>
<li>cat</li>
<li>pwd</li>
<li>kill</li>
<li>touch</li>
</ul>
とか。
このあたりってWindowsには入ってないんですよね。
gitをコマンドラインで打てる環境があると、ちょっとしたトラブルシューティングで便利ですよね。
 
逆にcrontabとか使えないコマンドもあって。
この辺りはしかたないかなーと。
ポータブルだからcronの設定できないだろうし。
 
あとifconfigも使えなかった。ipconfig 使ってくれってことですかね。
 
<h1>まとめ</h1>
zip解凍だけなので、レジストリ汚さない。
そんなわけで、ちょこっと使いたいときとか、環境設定めんどくさいときとかにおすすめ。

Windows機で開発しようとすると、コマンドライン使いにくい問題が発生します。
 
Windows10になってある程度はマシになったんですが、それでもやっぱり使いにくい。
 ls って打って

'ls' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。 

と返ってきたときの、あー・・・って感じ。エンジニアあるあるだと思ってる。
 
でも

【環境を汚したくない人向け】Windowsでlsとかgitとかssh-keygenとかvimを使えるようにするcmder

React勉強中
TwitterとかLINEとかみたいな、新しい情報が徐々に追加されるサービスに
有用そうなツールっぽい。
簡単なサンプルコードを置いておく。
ul ← li ← 配列の中身 と入れていくのをプログラムで書ける。
<blockquote>
||
</blockquote>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>React test</title>
</head>
<body>
	<div id="react"></div>
<pre><code>&#x3C;script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js">&#x3C;/script>

&#x3C;script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js">&#x3C;/script>
&#x3C;script>
var contacts = [
{key:1, name: "Twitter", link: "https://twitter.com/"},
{key:2, name: "Facebook", link: "https://ja-jp.facebook.com/"}
]

var listElements = contacts
//要素が足りないときに、はじく
.filter(function(contact) { return contact.link; })
</code></pre>
//ここで書く
.map(function(contact) {
return React.createElement('li', {key:contact.key},
React.createElement('p', {}, contact.name),
React.createElement('a', {href:contact.link}, contact.link)
)
})
var rootElement =
React.createElement('div', {},
React.createElement('h1', {}, "リンク"),
//listElements->createElementの順
React.createElement('ul', {}, listElements)
)
ReactDOM.render(rootElement, document.getElementById('react'))
</script>
</body>
</html>
||&#x3C;

React勉強中
TwitterとかLINEとかみたいな、新しい情報が徐々に追加されるサービスに
有用そうなツールっぽい。
簡単なサンプルコードを置いておく。
ul ← li ← 配列の中身 と入れていくのをプログラムで書ける。
<blockquote>
||
</blockquote>



React test



<pre><code>&#x3C;script

React覚え書き

最近 Cloud9を使っている。
<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: auto;" title="Cloud9 - Your development environment, in the cloud" src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fc9.io%2F" frameborder="0" scrolling="no"></iframe>
 
なにがすごいって、ブラウザだけでコーディングができるのですよ。
 
 
GithubかBitbucketのアカウントがあると、とてもスムーズに登録できる。
<img class="hatena-fotolife" title="f:id:alfe1025:20151123125845p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20151123/20151123125845.png" alt="f:id:alfe1025:20151123125845p:plain" />
 
ログインすると、こんな画面。
<img class="hatena-fotolife" title="f:id:alfe1025:20151123130133p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20151123/20151123130133.png" alt="f:id:alfe1025:20151123130133p:plain" />
<span style="color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">Githubや<span style="color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">Bitbucketになにかしらpushしているなら、左のRepositoriesをクリック。
新しく作るなら Create a new workspace をクリックして作成。
 
そうすると
<img class="hatena-fotolife" title="f:id:alfe1025:20151123130726p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20151123/20151123130726.png" alt="f:id:alfe1025:20151123130726p:plain" />
IDEが開くのであとは編集するだけ。
変更が終わったら 上バーの Run を押すと実行できます。（Web系言語だと仮想でApacheが起動する。Rubyなんかも動く。）
 
実行確認したら、右下のコンソールでgit commit -> git push ができます。
 
Gitの環境が入っていないWindowsPCとかChrome booksとかでも使えるので便利。
貧弱なノートPCに開発環境を構築する必要がないというのは、それだけでありがたいよね

最近 Cloud9を使っている。

 
なにがすごいって、ブラウザだけでコーディングができるのですよ。
 
 
GithubかBitbucketのアカウントがあると、とてもスムーズに登録できる。

 
ログインすると、こんな画面。

GithubやBitbucketになにかしらpushしているなら、左のRepositoriesをクリック。
新しく作るなら Create a new workspac

コード書いて git push をブラウザだけで（Cloud9）

[f:id:alfe1025:20151109075454g:plain]
前回の続き
[/entry/2015/11/07/Google_Maps_API%E3%82%92%E3%81%A4%E3%81%8B%E3%81%A3%E3%81%A6%E3%80%81%E4%B8%80%E7%95%AA%E7%B0%A1%E5%8D%98%E3%81%AA%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%88%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E3%81%A4:embed:cite]
出来上がるものはこちら
[https://alfe.xyz/funyou/streetview_simple]
前回作った、簡単なストリートビューに数行追加すると
ストリートビュー上にアイコンだとかお知らせだとかがおけます。
コードはこんな感じ。
<blockquote>
|javascrpt|
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('streetview'),
{
position: {
lat: 34.6899593, //緯度
lng: 135.8538238 //経度
},
pov: {
heading: -120, //見る方角 +が時計回り、-が反時計回り
pitch: 0 //数字を大きくすると上を向く
},
zoom: 1 //ズームのレベル 1以上推奨
});
</blockquote>
　// 追加した部分
var marker = new google.maps.Marker({
position: {
lat: 34.68989, //緯度
lng: 135.85378 //経度
},
map: panorama, //どの地図にマーカーを置くか
icon: "now.png" //マーカー画像の変更
});
// 追加ここまで
}
||&#x3C;
追加したのは8行。
もちろん、 new google.maps.Marker が入った変数を増やしていけば
複数のところにアイコンを表示することが可能です。

[f:id:alfe1025:20151109075454g:plain]
前回の続き
[/entry/2015/11/07/Google_Maps_API%E3%82%92%E3%81%A4%E3%81%8B%E3%81%A3%E3%81%A6%E3%80%81%E4%B8%80%E7%95%AA%E7%B0%A1%E5%8D%98%E3%81%AA%E3%82%B9%E3%83%88%E

ストリートビューに物を置く

基本形はかなり簡単だよ、という記事
[f:id:alfe1025:20151107104355p:plain]
<blockquote>
|javascript|
</blockquote>
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Street View</title>
 <style>
 html, body {
 height: 100%;
 margin: 0; padding: 0;
 }
 #streetview {
 height: 100%;
 }
 </style>
 <script async src="https://maps.googleapis.com/maps/api/js?callback=initialize&v=3.exp"></script>	
 <script>
var panorama;
function initialize() {
 panorama = new google.maps.StreetViewPanorama(
 document.getElementById('streetview'),
 {
 position: {
 lat: 34.6899593, //緯度
 lng: 135.8538238 //経度
 },
 pov: {
 heading: -90, //見る方角 +が時計回り、-が反時計回り
 pitch: 0 //数字を大きくすると上を向く
 },
 zoom: 1 //ズームのレベル 1以上推奨
 });
}
 </script>
 </head>
 <body>
 <div id="streetview"></div>
 </body>
</html>
||<
上のソースコードをコピペして、streetview.htmlとでも名前を付けて、ブラウザで開けば動く。
細かな解説はコード内に記述しているけれども、
<blockquote>
|javascript|
position: {
lat: 34.6899593, //緯度
lng: 135.8538238 //経度
},
||&#x3C;
</blockquote>
この部分を好きな場所の緯度経度に変えてやると、好きな場所でのストリートビューが作れます
簡単でしょ？

基本形はかなり簡単だよ、という記事
[f:id:alfe1025:20151107104355p:plain]
<blockquote>
|javascript|
</blockquote>



Street View

html, body {
height: 100%;
margin: 0; padding: 0;
}
#streetview {
height: 100%;
}



va

Google Maps APIをつかって、一番簡単なストリートビューをつくる(v3・JS)

このごろなにかと話題の通信の最適化
情報工学の知識がある人とない人とのギャップがすごいあるので 知識がなくてもわかるように説明してみよう。
<a class="http-image" href="https://www.flickr.com/photos/49993642@N00/5294440854" target="_blank"><img class="http-image" src="https://farm6.staticflickr.com/5041/5294440854_e8e73eaabb.jpg" alt="https://www.flickr.com/photos/49993642@N00/5294440854" /></a>
<a href="https://www.flickr.com/photos/49993642@N00/5294440854">photo by El Villano</a>
 
 
<h3>実家から下宿先に木彫りの熊を送る</h3>
さて、ここに木彫りの熊（データ役）があります
<img class="hatena-fotolife" title="f:id:alfe1025:20150717164240j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150717/20150717164240.jpg" alt="f:id:alfe1025:20150717164240j:plain" width="336" />
 
実家（Webサイト）に置いていた木彫りの熊を 下宿先（スマホ）のインテリアにするために宅配便で送ってもらいましょう
<img class="hatena-fotolife" title="f:id:alfe1025:20150717164253j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150717/20150717164253.jpg" alt="f:id:alfe1025:20150717164253j:plain" width="402" />
 
<h3>ふつうに送ると・・・</h3>
まずは、おかんが木彫り熊を箱詰めします
買ったときに入ってた化粧箱に詰めてから、宅配便の段ボールに入れます
<img class="hatena-fotolife" title="f:id:alfe1025:20150717164312j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150717/20150717164312.jpg" alt="f:id:alfe1025:20150717164312j:plain" />
 
宅配便の人に渡して、下宿先まで届けてもらいます
<img class="hatena-fotolife" title="f:id:alfe1025:20150717164253j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150717/20150717164253.jpg" alt="f:id:alfe1025:20150717164253j:plain" />
 
 
<h3>通信最適化の場合</h3>
箱詰めして宅配便の人に渡すまでは一緒
<img class="hatena-fotolife" title="f:id:alfe1025:20150717164312j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150717/20150717164312.jpg" alt="f:id:alfe1025:20150717164312j:plain" />
 
しかし、受け取ってから宅配員は思います。 「この木彫り熊重たい・・・」
 
「そうだ、木彫り熊を軽くしてしまおう！」
 
宅配員、段ボールをあけて、木箱もあけて 木彫りの熊と見た目はそっくりな発泡スチロール熊と入れ替えました （これが通信の最適化）
<img class="hatena-fotolife" title="f:id:alfe1025:20150717164331j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150717/20150717164331.jpg" alt="f:id:alfe1025:20150717164331j:plain" />
 
そして、そのまま下宿先まで届けました
 
さて、どんな争点が出てきたでしょう？
 
<h3>通信最適化に賛成の人の言い分</h3>
「荷物が軽くなったから、宅配員が楽できる！」
 
「重たい荷物ばかりを運ばせたら、宅配員が体壊しちゃうよ」
→ソフトバンクのいう正当業務行為（実際には通信が詰まる）
 
「飾るだけなら、見た目同じなんだし発泡スチロールでも良いよね」
 
<h3>通信最適化に反対の人の言い分</h3>
「勝手に中身入れ替えるなんて・・・！」 →契約内容には記されているらしい →著作権 (同一性保持権)にひっかかるかも
 
「裏に書いていた、秘密の暗号が消えているんだけど」 →これが議論のキッカケになった（AngelBeats-OW-というゲーム） →秘密の暗号＝チェックサム
 
「製造年と製作者のサインも消えてる」 →デジカメ写真だと撮影日時とか撮影場所とか
 
「発泡スチロールになったら重厚感なくなった」 →画質の劣化 →ニコニコ動画のプレミアムに入ってても、エコノミー画質になる可能性がある
 
「宅配業者は荷物を運ぶだけでいいんだよ」 →運ぶことだけして、段ボールの中身には触らないでほしい →専門用語で「OSI参照モデル」
 
「段ボールあけたら情報漏洩が」 →「検閲の禁止」（憲法21条2項, 電気通信事業法第三条）じゃない？
 
「開けるな！って黒マジックで段ボールに書いておけば？」 →書いてても注意を見ずに開けるみたい（robot.txtの無視）
 
「中を開けられたくないから、金庫を化粧箱の代わりに使おう」 →HTTPSという技術（銀行のWebサイトとかが使ってる） →荷物がよけいに重たくなる
 
<h3>で、どっちに味方すればいいの？</h3>
宅配員の仕事が軽くなることを優先すれば賛成
荷物の中を見られたくない、発泡スチロールといれかえるのはどうよ って人は反対
賛成か反対かは個々人におまかせします
 
 
P.S.（その1）
私は通信の最適化がされるMVNOを使ってます
出先では、見られても良いような、どうでも良い情報しか やり取りしないだろう・・・という考え
 
P.S.（その2）
Wi-Fiを使うと通信の最適化を考えなくても良いので
家にWi-Fiがある人はそっちを使うと良いよ
 
<h4>追記(2015.07.21)</h4>
「発泡スチロールへの交換ではなく、中身を削って空洞の木彫り熊にしたのほうが正確では？」というコメントを頂いた。
確かにそっちのほうが元に戻せない感ある。
 
 
参考
<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: auto;" title=" 「通信の最適化」の論点 - めもおきば" src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fd.hatena.ne.jp%2Fnekoruri%2F20150715%2Ftranscoding" frameborder="0" scrolling="no"><a href="https://d.hatena.ne.jp/nekoruri/20150715/transcoding" data-mce-href="https://d.hatena.ne.jp/nekoruri/20150715/transcoding"> 「通信の最適化」の論点 - めもおきば</a></iframe><cite class="hatena-citation"><a href="https://d.hatena.ne.jp/nekoruri/20150715/transcoding">d.hatena.ne.jp</a></cite>
<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: auto;" title="高木浩光先生、通信の最適化についてauに電凸（前編）「元に戻せない圧縮であるが、改ざんではない」" src="//hatenablog-parts.com/embed?url=http%3A%2F%2Ftogetter.com%2Fli%2F846035" frameborder="0" scrolling="no"><a href="https://togetter.com/li/846035" data-mce-href="https://togetter.com/li/846035">高木浩光先生、通信の最適化についてauに電凸（前編）「元に戻せない圧縮であるが、改ざんではない」</a></iframe><cite class="hatena-citation"><a href="https://togetter.com/li/846035">togetter.com</a></cite>

このごろなにかと話題の通信の最適化
情報工学の知識がある人とない人とのギャップがすごいあるので知識がなくてもわかるように説明してみよう。

photo by El Villano
 
 
実家から下宿先に木彫りの熊を送る
さて、ここに木彫りの熊（データ役）があります

 
実家（Webサイト）に置いていた木彫りの熊を下宿先（スマホ）のインテリアにするために宅配便で送ってもらいましょう

 
ふつう

 #通信の最適化 をわかりやすいように木彫りの熊で解説してみる

Googleフォームにに申し込み欄つくって 「申し込みありがとうございましたー」みたいなメール返信する
 
<img class="hatena-fotolife" title="f:id:alfe1025:20150715171526p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150715/20150715171526.png" alt="f:id:alfe1025:20150715171526p:plain" />
<h3>やりかた</h3>
<h5>１</h5>
Googleフォームをつくる
<h5>２</h5>
[アイテムの追加]→[テキスト]から 「氏名」と「メールアドレス」の入力欄をつくる
<h5>３</h5>
[ツール]の[スクリプトエディタ]から[空のプロジェクト]をつくり 以下を貼付ける
function submitForm(e){ var itemResponses = e.response.getItemResponses(); var message = ''; var username = ''; var mail = ''; for (var i = 0; i &#x3C; itemResponses.length; i++) { var itemResponse = itemResponses[i]; var question = itemResponse.getItem().getTitle(); var answer = itemResponse.getResponse(); if (question == '氏名'){ username = answer; } if (question == 'メールアドレス'){ mail = answer; } message += (i + 1).toString() + '. ' + question + ' \n' + answer + '\n'; } var address = username + 'さま'+'&#x3C;'+mail+'>'; var title = '申込み受付のお知らせ'; var content = itemResponses[0].getResponse() + ' さま\n\n' + '今回は、XXXに申し込みいただきありがとうございます。\n\n' + '以下の内容で申し込みを受け付けました。\n' + message + 'あとはいろいろ好きな言葉をくっつける\n' + 'バックスラッシュとnで改行\n' + 'ーーーーーーーー\n' + '送信者の名前 mail@mail.com\n' + '最後の行にセミコロンをつける\n';
GmailApp.sendEmail(address, title, content); }
 
<h5>４</h5>
時計のマーク（現在のプロジェクトのトリガー）を押して [新しいトリガーを追加]→[submitForm/フォームから/フォーム送信時] 認証のポップアップが出たら、OKを押していく
 
<h5>５</h5>
フォーム作成画面に戻って、[実際のフォームを表示]から 実際に動かしてみよう。
入力されたデータは[回答を表示]から見ることができますよ

 
Googleフォームにに申し込み欄つくって「申し込みありがとうございましたー」みたいなメール返信する
 

やりかた
１
Googleフォームをつくる
２
[アイテムの追加]→[テキスト]から「氏名」と「メールアドレス」の入力欄をつくる
３
[ツール]の[スクリプトエディタ]から[空のプロジェクト]をつくり以下を貼付ける
'; var title = '申込み受付のお知らせ'; var con

Googleフォームに入力されたアドレス宛に自動返信する

忘備録的なアレ。
<a class="http-image" href="https://www.flickr.com/photos/78137955@N00/477844434" target="_blank"><img class="http-image" src="https://farm1.staticflickr.com/199/477844434_7d6d15e457.jpg" alt="https://www.flickr.com/photos/78137955@N00/477844434" width="360" /></a>
<a href="https://www.flickr.com/photos/78137955@N00/477844434">photo by Tom Carmony</a>
 
コンソールにこんな感じで打てばOK 
<blockquote>
/sbin/mount_smbfs //smbserver1/Share/ ~/smb
</blockquote>
 
 <span style="color: #000000; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">/sbin/mount_smbfs がコマンド。
<span style="color: #000000; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">パスが通ってるなら mount_smbfs だけでも可 
 
コマンドの使い方は
/sbin/mount_smbfs （マウントするsmbサーバ）（ディレクトリ）

忘備録的なアレ。

photo by Tom Carmony
 
コンソールにこんな感じで打てばOK 

/sbin/mount_smbfs //smbserver1/Share/ ~/smb

 
 /sbin/mount_smbfs がコマンド。
パスが通ってるなら mount_smbfs だけでも可 
 
コマンドの使い方は
/sbin/mount_smbfs （マウントするsmbサーバ）（

Macのコンソールからローカルネット内のsmdにつなぐ

[f:id:alfe1025:20150227144908p:plain]
google map engin からマップデータを取り出して使おうと思ったときに引っかかったのでメモ
一行で解決策を述べると、拡張子をzipにすれば開く
====
google map enginでkmlをエクスポート　いうボタンを押すと、なぜかkmzという形式でＤＬされる不思議。
[f:id:alfe1025:20150227144845p:plain]
で、このkmz、どうやって開くの？
メモ帳に直接突っ込んでも妙なコードしか出てこない
調べてみると、kmz は kmlをzipで圧縮したもの だそうな
ということで、mapdata.kmzをmapdata.zipに名前を変更して、適当な解凍ソフトで開くと
この通り
[f:id:alfe1025:20150227144811p:plain]
kmlファイルが出力されます
kmlはマークアップ言語の一種なので、使いたい部分を抜き出すようなパーサーを作れば、必要な情報だけ抜き出すことができます
xmlに変換するサービスもWeb上に転がっているので、xmlに慣れている人はそちらを使うのも良いかも
ちなみに
rubyだとこんな感じで書くと、位置と名称が取り出せます
<blockquote>
|ruby|
</blockquote>
#utf-8
require 'rexml/document'
doc = REXML::Document.new(open("nara2.kml"))
doc.elements.each('kml/Document/Folder/Placemark/')do |element|
if(element.elements["Point/coordinates"])
print element.elements["Point/coordinates"].text
end
print ", "
puts element.elements["name"].text
end
||&#x3C;

[f:id:alfe1025:20150227144908p:plain]
google map engin からマップデータを取り出して使おうと思ったときに引っかかったのでメモ
一行で解決策を述べると、拡張子をzipにすれば開く
====
google map enginでkmlをエクスポート　いうボタンを押すと、なぜかkmzという形式でＤＬされる不思議。
[f:id:alfe1025:2015

kmz拡張子ってどうやって開くの？への解決法

<img class="hatena-fotolife" title="f:id:alfe1025:20150127211107g:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150127/20150127211107.gif" alt="f:id:alfe1025:20150127211107g:plain" width="276" /><img class="hatena-fotolife" title="f:id:alfe1025:20150127211118g:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150127/20150127211118.gif" alt="f:id:alfe1025:20150127211118g:plain" width="278" />
 
ひさびさに情報系っぽい記事。
 
milkcocoaというサービスがとても気に入ったので紹介します。
<a href="https://mlkcca.com/">Milkcocoa - JavaScript一行に詰め込まれたバックエンド</a>

<h4>milkcocoa </h4>
<img class="hatena-fotolife" title="f:id:alfe1025:20150127211027p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150127/20150127211027.png" alt="f:id:alfe1025:20150127211027p:plain" width="344" />
>milkcocoaはデータをリアルタイムで、保存・同期できる自由度の高いAPIです。
と公式で紹介しているように、かなり自由度高めなサービスです。
いろんなデータを飲み込んでくれるので、JavascriptのObjectもそのまま読み込んでくれます。
 
はじめてmilkcocoaにふれるときは、LIGの解説記事（<a href="https://liginc.co.jp/web/programming/server/129348">https://liginc.co.jp/web/programming/server/129348</a>）がわかりやすくておすすめ。
 
<h3>つくったもの</h3>
PCのストリートビューで移動
 <img class="hatena-fotolife" title="f:id:alfe1025:20150127211107g:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150127/20150127211107.gif" alt="f:id:alfe1025:20150127211107g:plain" width="503" />
 
すると、スマホ（もしくはタブレット）にストリートビューの位置が反映されます
<img class="hatena-fotolife" title="f:id:alfe1025:20150127211118g:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20150127/20150127211118.gif" alt="f:id:alfe1025:20150127211118g:plain" width="461" />
 
<h4>デモ</h4>
PCのストリートビュー https://alfe.xyz/funyou/streetview_milkcocoa/
 
位置を反映する地図 https://alfe.xyz/funyou/streetview_milkcocoa/map.html
 
<h3>まとめ</h3>
これをWebソケットで実装しようとすると、サーバー立てて、Node.jsの設定して、、、と結構ごちゃごちゃしたことをしないといけないのです。
milkcocoaのおかげで通信部が４行ですむ。ありがたい。
 
milkcocoaはまだβ版なので、これからの発展に期待ですね。
 
<h4>追記 1</h4>
milkcocoaにソケットのログが残るので、移動した形跡をとろうとすればとれる。
 
<h4>追記2</h4>
<span style="color: #000000; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">ストリートビューの位置を表示している靴のアイコンは、以前芸大生につくってもらったもの。いろいろ多用しています。感謝。
<h4>追記 3</h4>
ソースコードをペチッと貼付けておく
<iframe class="embed-card embed-webcard" style="width: 100%; height: 155px; max-width: 500px; margin: auto;" title="alfe/streetview_milkcocoa" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Falfe%2Fstreetview_milkcocoa%2Ftree%2Fmaster" frameborder="0" scrolling="no">&amp;amp;amp;lt;a href="https://github.com/alfe/streetview_milkcocoa/tree/master" data-mce-href="https://github.com/alfe/streetview_milkcocoa/tree/master"&amp;amp;amp;gt;alfe/streetview_milkcocoa&amp;amp;amp;lt;/a&amp;amp;amp;gt;</iframe> <a href="https://github.com/alfe/streetview_milkcocoa/tree/master">alfe/streetview_milkcocoa · GitHub</a>
<h4> </h4>

 

 
ひさびさに情報系っぽい記事。
 
milkcocoaというサービスがとても気に入ったので紹介します。
Milkcocoa - JavaScript一行に詰め込まれたバックエンド
milkcocoa 
milkcocoaはデータをリアルタイムで、保存・同期できる自由度の高いAPIです。
と公式で紹介しているように、かなり自由度高めなサービスです。
いろんなデータを飲み込んでくれるので、Ja

PCにストリートビュー＋スマホに地図 with milkcocoa

プログラムをしたことがない人向けへの解説を意識したので
アプリを作るのに最低限の知識は含まれているはず
[f:id:alfe1025:20140916105140p:plain]

###まずはアプリ作る流れを感じてもらう
<ul>
<li>Monacaに登録</li>
<li>ボタンを追加</li>
<li>ボタンを押したときの機能を追加</li>
<li>ボタンの見た目を変更</li>
</ul>
使ったスライドは↓
https://alfe.lk6.co/funyou/dau/dau_js.html
Androidの環境構築をするのに、SDKとかEclipseとかインストールするのは、初心者には敷居が高いなーと思い
Monaca(https://monaca.mobi/ja/)を採用しました
アプリを作る流れはそこまで変わらないので敷居低いほうでやりましょう
で アプリを作る流れはというと
<ul>
<li>部品の追加（ボタンを追加）</li>
<li>動作の追加（ボタンを押したときの機能を追加）</li>
<li>デザイン（ボタンの見た目を変更）</li>
</ul>
といった感じ
スライドでは、ここまでを解説しています
アプリを作る流れを感じ取れたら後は応用するだけ
###サンプルアプリを見ながら解説
このあとに ストップウォッチのアプリをサンプルとしてみてもらい
<ul>
<li>関数</li>
<li>変数</li>
</ul>
について解説してみました
サンプルアプリ
https://alfe.lk6.co/funyou/dau/
部品の追加 と 動作の追加 までが出来上がったサンプルです
そして これにデザインを追加するとこうなります
サンプルアプリ（完成版）
https://alfe.lk6.co/funyou/dau/simple/
こんな感じでアプリを作るんだよーと教えました
###なぜ芸大生？
いま 授業で「情報系の学生と芸術系の学生がコラボしてアプリ作ってみよう」みたいなのがありまして、
同じチームの芸大生にも アプリを作る流れがわかってもらえれば後々スムーズだなー と、希望者募って教えてみました
###まとめ
気づいたかと思いますが、教えたのはアプリを作る流れだけ
アルゴリズムとか具体的な言語の構文とかは省いています
今の段階でも、「javascript （作りたいアプリ）」で検索すればある程度のアプリは作れると思いますが、
もっと詳しく勉強してみたい！ という場合は ドットインストールでJavascript入門（https://dotinstall.com/lessons/basic_javascript_v2）をみて構文とか勉強してみるとよいかと
あと、作ったアプリをてきとーに公開してみたので、この流れでこんなアプリ作れるんだな、という確認にどうぞ
https://play.google.com/store/apps/details?id=jp.hateblo.alfe

プログラムをしたことがない人向けへの解説を意識したので
アプリを作るのに最低限の知識は含まれているはず
[f:id:alfe1025:20140916105140p:plain]

###まずはアプリ作る流れを感じてもらう
<ul>
Monacaに登録
ボタンを追加
ボタンを押したときの機能を追加
ボタンの見た目を変更
</ul>
使ったスライドは↓
https://alfe.

プログラム経験のない芸大生にAndroidアプリを作ってもらった

オブジェクト指向について後輩に質問されて、解説してたら興が乗ったのでブログ記事としてまとめてみる。
オブジェクト指向で必要なのはキーワードは６つだけ！
<ul>
<li>オブジェクト</li>
<li>クラス</li>
<li>メッセージ</li>
<li>継承</li>
<li>カプセル化</li>
<li>ポリモーフィズム</li>
</ul>
オブジェクト指向は雰囲気を掴めば勝ちです

##まずは各キーワードのざっくりした説明
###オブジェクト
ものとか ひととか 概念とか。オブジェクト指向の基本単位。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140718/20140718144535.jpg" alt="f:id:alfe1025:20140718144535j:plain" title="f:id:alfe1025:20140718144535j:plain" class="hatena-fotolife" itemprop="image">
###クラス
共通の性質を持つもの。Twitterでいう「クラスタ」とほぼ同義だと考えていいよ。「ほ乳類クラスタ」とか「艦これクラスタ」とか「のんのん難民クラスタ」みたいな。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140718/20140718144545.jpg" alt="f:id:alfe1025:20140718144545j:plain" title="f:id:alfe1025:20140718144545j:plain" class="hatena-fotolife" itemprop="image">
###継承
クラスタの包括関係のこと。「のんのん難民クラスタ」も「ごちうさぴょんぴょんクラスタ」も「深夜アニメクラスタ」に入りますよね。なので、「深夜アニメクラスタ」の性質を「のんのん難民クラスタ」と「ごちうさぴょんぴょんクラスタ」は持っているはず！というのが継承。「のんのん難民クラスタ」は「深夜アニメクラスタ」を継承した、とかいいます。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140718/20140718144555.jpg" alt="f:id:alfe1025:20140718144555j:plain" title="f:id:alfe1025:20140718144555j:plain" class="hatena-fotolife" itemprop="image">
###メッセージ
関数呼び出しみたいなの。あるオブジェクトから別のオブジェクトに「この仕事やってくれ」と伝えること
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140718/20140718144616.jpg" alt="f:id:alfe1025:20140718144616j:plain" title="f:id:alfe1025:20140718144616j:plain" class="hatena-fotolife" itemprop="image">
###カプセル化
みんなが「このオブジェクトはこの仕事をやってくれる。どうやってやるのかは知らないけど」と思うこと。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140718/20140718144625.jpg" alt="f:id:alfe1025:20140718144625j:plain" title="f:id:alfe1025:20140718144625j:plain" class="hatena-fotolife" itemprop="image">
###ポリフォーリズム
このクラスを継承した人は「＊＊＊」機能を持ってるよ。「＊＊＊」の仕方は、人それぞれだけど。みたいなこと。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140718/20140718144632.jpg" alt="f:id:alfe1025:20140718144632j:plain" title="f:id:alfe1025:20140718144632j:plain" class="hatena-fotolife" itemprop="image">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140718/20140718144638.jpg" alt="f:id:alfe1025:20140718144638j:plain" title="f:id:alfe1025:20140718144638j:plain" class="hatena-fotolife" itemprop="image">
##で、オブジェクト指向だと何がうれしいのか
一番うれしいのはプログラムの書き換えが楽になること。
キモになるのは、カプセル化とポリフォーズム。
カプセル化の例だと、質問相手がどういうアルゴリズムで仕事を行っているのかを考えなくても、聞けば答えてくれる。
ポリフォーズムの絵の例だと、同じクラスタの人であれば質問相手を変えても答えてくれる。
つまり、命令のぶん投げとか、命令相手のとっかえとかが簡単にできるのがオブジェクト指向なのです！
個々のオブジェクトを擬人化して、オブジェクト達がどういう風に動いていくのか、を考えながら設計するとオブジェクト指向っぽい感じになると思います。

オブジェクト指向について後輩に質問されて、解説してたら興が乗ったのでブログ記事としてまとめてみる。
オブジェクト指向で必要なのはキーワードは６つだけ！
<ul>
オブジェクト
クラス
メッセージ
継承
カプセル化
ポリモーフィズム
</ul>
オブジェクト指向は雰囲気を掴めば勝ちです

##まずは各キーワードのざっくりした説明
###オブジェクト
ものとか ひととか 概念とか。オブジェクト指

わかった気になれるオブジェクト指向講座

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140330/20140330092644.png" alt="f:id:alfe1025:20140330092644p:plain" title="f:id:alfe1025:20140330092644p:plain" class="hatena-fotolife" itemprop="image">
https://alfe.hp2.jp/funyou/rain/
外の雨の様子を 実測雨量をもとに、ブラウザ上にそれっぽく再現してみました。
↑を開くと、寝屋川市駅の雨がそれっぽく再現されます。
以下詳細

##使ったもの
rainyday.js(https://maroslaw.github.io/rainyday.js/) 
と 
Yahoo!の気象情報API (https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/weather.html)
雨降ってるし、ブラウザ上に再現してみたら楽しいかなーとか思って作ってみました。
##BKCとか京都駅の雨も再現してみた
せっかくなのでほかの地点でも使えるように設定してまして、
https://xxx/rain/?[lat],[lng]#[imgurl] で 設定地点と背景画像の変更が可能です。
たとえば、
https://alfe.hp2.jp/funyou/rain/?34.982419,135.964517#https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Ritsumeikan-Univ-BKC-01.jpg/320px-Ritsumeikan-Univ-BKC-01.jpg 
にアクセスすると、立命館BKCの雨がそれっぽく再現されたり
https://alfe.hp2.jp/funyou/rain/?34.985634,135.757771#https://upload.wikimedia.org/wikipedia/commons/c/c1/JR-Kyoto-Isetan-01.jpg
にアクセスすると、京都駅の雨がそれっぽく再現されたりします。
##仕組み
仕組みとしては、緯度経度とYahoo!の気象情報APIから実測降雨量を取得して、
rainyday.jsで再現する。。。という感じです。
研究室に引きこもってるときとかに、雨の強さ確認するのに使おうかなーとか思ってます。

https://alfe.hp2.jp/funyou/rain/
外の雨の様子を 実測雨量をもとに、ブラウザ上にそれっぽく再現してみました。
↑を開くと、寝屋川市駅の雨がそれっぽく再現されます。
以下詳細

##使ったもの
rainyday.js(https://maroslaw.github.io/rainyday.js/) 
と 
Yahoo!の気象情報API

雨なので、外の雨の様子をブラウザ上に再現してみた。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20140213/20140213112925.png" alt="f:id:alfe1025:20140213112925p:plain" title="f:id:alfe1025:20140213112925p:plain" class="hatena-fotolife" itemprop="image">
データをいろいろ入力するフォームを作ったときに、 
**「送信ボタンを何度も押さないでください」**みたいなこと書くのダサいなと思ったので、そもそも送信ボタンを何度も押せないような仕様にしてみた。

<a href="https://exp-www.ubi.cs.ritsumei.ac.jp/~alfe/funyou/form.html">デモ</a>
そして、ソースはこちら
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
&#x3C;head>
&#x3C;meta charset="UTF-8">
&#x3C;title>フォームサンプル&#x3C;/title>
&#x3C;script type="text/javascript">

// 送信ボタンが押されたら、送信ボタンを使えなくする
function attention() {
	var at_txt = '完了の表示が出るまでお待ちを。'
	document.getElementById("attention").innerHTML= at_txt;
	document.getElementById('submit').disabled = true;
}

// 同ページにフォームの内容を送信するなら、ボタンを復旧する
function finish() {
	alert( "処理を終了しました。");
	var at_txt = '処理を終了しました。'
	document.getElementById("attention").innerHTML= at_txt;
	document.getElementById('submit').disabled = false;
}

&#x3C;/script>
&#x3C;/head>
&#x3C;body>
	&#x3C;div class="main">
		
# フォーム

		&#x3C;form action="form.html" method="post" onSubmit="attention()">
			&#x3C;textarea name="data" rows="16" cols="25" placeholder='ここにデータ入力
			(今回は処理への反映なし)'>&#x3C;/textarea>&#x3C;br>
			&#x3C;button id="submit" type="submit">
		 送信
			&#x3C;/button>
		&#x3C;/form>
		&#x3C;p id="attention">

	&#x3C;/div>

&#x3C;?php
if($_POST["data"]){

	//時間のかかる処理
	sleep ( 5 );

	//すべて表示したあとに通知アラーム+ボタン復旧
	echo '&#x3C;script type="text/javascript">finish()&#x3C;/script>';
}
?>

&#x3C;/body>
&#x3C;/html>

</code></pre>
注目すべきところとしては、 
formタグに onSubmit="attention()" と設定して、 
送信ボタンが押されたときに、Javacriptのattention()を呼び出し。 
idが'submit'のボタンを disabledに設定して、ボタンを押せなくしています。
また、同ページにフォームの内容が送信される場合は、処理が終えた後に復旧しないといけないので、disabled = false; として、ボタンの無効化を取り消してます。
これで、送信ボタン連打は防げるはず…！

データをいろいろ入力するフォームを作ったときに、 
**「送信ボタンを何度も押さないでください」**みたいなこと書くのダサいなと思ったので、そもそも送信ボタンを何度も押せないような仕様にしてみた。


そして、ソースはこちら
<pre><code>&#x3C;!DOCTYPE html>
&#x3C;html>
&#x3C;head>
&#x3C;meta charset="

送信ボタンを１回しか押せないフォーム作った

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20131223/20131223181634.png" alt="f:id:alfe1025:20131223181634p:plain" title="f:id:alfe1025:20131223181634p:plain" class="hatena-fotolife" itemprop="image">
またしてもphp。
##サムネイル作りたい
ファイルをサーバーにアップロードしてもらったときに、 
自動でサムネイル画像作れたらいいなーと思っていろいろ調べてみると、 
どうやらGDライブラリというのを使うとphpで画像を扱えるらしい。
ということで、コード書いてみました。

##まずはGDのインストール
UbuntuServer10.04の場合
<pre><code> sudo apt-get install php5-gd
</code></pre>
としてから、apacheを再起動すればOK
ちゃんとインストールできたかどうかは、
<pre><code>&#x3C;?php phpinfo(); ?>
</code></pre>
と書いたphpファイルを作って、ブラウザで開き 
GDの項目があるか確認すればOK
##pngを縮小するサンプルコード
他ページのアップロードフォームから送信されたこと前提で。
<pre><code class="language-php">&#x3C;?php

// コピー元画像の確認
if (!is_uploaded_file( $_FILES['upFile']['tmp_name'])) {
 echo 'ファイルが選択されていません。';
 exit();
}

$targetImage = $_FILES['upFile']['tmp_name'];
$targetName = $_FILES["upFile"]["name"];

//ファイル拡張子取得
$file_ex = substr($targetName, strrpos($targetName, '.') + 1);

/****png拡張子の縮小****/
if($file_ex === 'png'){
// ファイル名から、画像インスタンスを生成
$original = imagecreatefrompng($targetImage);

// コピー元画像のファイルサイズを取得
$image_w = imagesx($original);
$image_h = imagesy($original);

// 出力する画像サイズの指定
$width = $image_w *0.1;
$height = $image_h *0.1;
// サイズを指定して、背景用画像を生成
$resize = imagecreatetruecolor($width, $height);

/* 透過情報をそのままに */
// アルファブレンディングをoffにする 
imagealphablending($resize, false); 
// 完全なアルファチャネル情報を保存する
imagesavealpha($resize, true);

// 背景画像に、画像をコピーする
imagecopyresampled(	$resize, // 背景画像
			$original,// コピー元画像
			0, // 背景画像の x 座標
			0, // 背景画像の y 座標
			0, // コピー元の x 座標
			0, // コピー元の y 座標
			$width, // 背景画像の幅
			$height, // 背景画像の高さ
			$image_w, // コピー元画像ファイルの幅
			$image_h // コピー元画像ファイルの高さ
		);


// content type ヘッダ
header('Content-Type: image/png');

// 画像を出力する
imagepng($resize, // 背景画像
 $_FILES["upFile"]["name"]//保存先
 );

// メモリを開放する
imagedestroy($resize);
imagedestroy($original);
?>

</code></pre>
##まとめ
ライブラリ系使わずに何とかする方法はわからなかったので断念。 
何とかする方法があればレンタルサーバーで使えて便利なのですが。うむむ。

またしてもphp。
##サムネイル作りたい
ファイルをサーバーにアップロードしてもらったときに、 
自動でサムネイル画像作れたらいいなーと思っていろいろ調べてみると、 
どうやらGDライブラリというのを使うとphpで画像を扱えるらしい。
ということで、コード書いてみました。

##まずはGDのインストール
UbuntuServer10.04の場合
<pre

フォームで送信されたpngを1/100に縮小して保存する

**メンテのときにつかうやつ
<blockquote>
<blockquote>
</blockquote>
</blockquote>
システムメンテナンスのため、以下の期間はご利用いただけません 
12/26(木) 00:00 ~ 1/5(日) 24:00
&#x3C;&#x3C;
みたいなよくあるメンテナンスメッセージ。 
(メンテナンス時間はフィクションです。実在の団体とは関係ありません。)
今回の目標は、これを表示させたい。 
そして、1/6(月)になったらWebページから見えなくなるようにしたい。 
メンテ終わりを見計らってメッセージ削除とかめんどくさい。
**phpのコード
というわけで、こんなコード作った。
<blockquote>
|php|
</blockquote>
<?php
// メンテナンス用メッセージ 適当なタイミングで消してくだしあ(by alfe
$mente = <<<EOF
	

	システムメンテナンスのため、以下の期間はご利用いただけません
	 12/26(木) 00:00 ~ 1/5(日) 24:00
	
EOF;
	if (strtotime(date('Y-m-d')) <= strtotime('2014-1-5')) {
		echo $mente;
	}
// ここまで
?>
||&#x3C;
これをメンテナンスメッセージが欲しいところに張り付ければOK
strtotimeは、日付だけでなく年もいれて比較した方が確実なので、 
年をまたがないときにも入れておくほうが吉。
**まとめ 
というコードを作ったのですが、貼り付けようと思ってたページがphp禁止で、
<blockquote>
||
</blockquote>
<?php
||<
 が 
>||
<--<?php
||<
に勝手に変換され、すごく残念な思いをしたのでした。

**メンテのときにつかうやつ
<blockquote>
<blockquote>
</blockquote>
</blockquote>
システムメンテナンスのため、以下の期間はご利用いただけません 
12/26(木) 00:00 ~ 1/5(日) 24:00
&#x3C;&#x3C;
みたいなよくあるメンテナンスメッセージ。 
(メンテナンス時間はフィクションです

メンテナンスメッセージを一定期間だけ表示させるphpコード

大学の卒研のため、Webページ使っていろいろしているんですが、
作業ページが増えてくるにしたがって、urlの扱いに困るようになりました。
作業ページ開くのに、「url+フラグ」とかで開ければかっこいいなとか思って
いろいろ調べてみると、purl.js というのが便利そうなのでメモ。
使い方は簡単
purl.js(https://github.com/allmarkedup/purl)から、purl.jsをダウンロード。
<blockquote>
||
</blockquote>
<script src="purl.js"></script>
||&#x3C;
で purlを読み込む。
<blockquote>
||
</blockquote>
<SCRIPT language="JavaScript">
 if(purl().attr('fragment') == "up"){
 location.href = "./test/up/uploader.html"
 }
</SCRIPT>
||&#x3C;
としてやると、
https://hoge/#up
と入力して
https://hoge/test/up/uploader.html
に飛んでくれるというわけです。
purl() が 現在のURL
.attr('fragment') で #up のような #がついた文字列(フラグ)を読み取ってくれます。
indexページの隠しリンクとして仕組んだり、
フラグから読み込む画像ファイルを変更とかしたり。
使いどころはいろいろありますよ。

大学の卒研のため、Webページ使っていろいろしているんですが、
作業ページが増えてくるにしたがって、urlの扱いに困るようになりました。
作業ページ開くのに、「url+フラグ」とかで開ければかっこいいなとか思って
いろいろ調べてみると、purl.js というのが便利そうなのでメモ。
使い方は簡単
purl.js(https://github.com/allmark

JavaScriptでURLを扱うのにpurlが便利という話

PHPだけインストールしてローカル環境を整えよう、みたいな覚書記事です。
Apacheとか使いません。PHPだけしか使わないので、一番簡単であろうはず。
１、Microsoft Web Platform Installer（以下、Web PI）をダウンロードしてきます。
https://www.microsoft.com/web/downloads/platform.aspx
２、Web PI の検索窓に 「php」と入力して、新しそうなphpを「追加」します。
php5.x.x を「追加」すると、他に必要なものも勝手に追加されるみたいです。
[f:id:alfe1025:20131029120128p:plain]
３、「インストール」→「同意」 と、
順にクリックしていきインストールを完了します。
４、コマンドプロンプトを開き、
<blockquote>
|
php -v
|&#x3C;
と入力して、phpがインストールされたか確認します。
</blockquote>
PHP 5.4.14 (cli) (built: Apr 10 2013 21:19:30)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies
みたいなのがでたら、インストールが無事に終えてます。
５、コマンドプロンプトに
<blockquote>
|
php -S localhost:8080 -t .
|&#x3C;
と、打ち込みます。
</blockquote>
６、ブラウザに localhost:8080 と打ち込むと、
コマンドプロンプトのカレントディレクトリにあるphpファイルが参照できるようになります。
デスクトップのphpファイルを開きたい場合は、
<blockquote>
|
php -S localhost:8080 -t c:\Users(user名)\Desktop
|&#x3C;
と打ち込んでみてください。
</blockquote>
Apacheなくても、phpだけでローカル環境作れますよ。という内容でした。

PHPだけインストールしてローカル環境を整えよう、みたいな覚書記事です。
Apacheとか使いません。PHPだけしか使わないので、一番簡単であろうはず。
１、Microsoft Web Platform Installer（以下、Web PI）をダウンロードしてきます。
https://www.microsoft.com/web/downloads/platform.aspx<

ローカルホストでPHPを動かす一番簡単な方法

JavaScriptのTouchイベントのデバックをしようとするときに
コンソールがないと大変だなーと感じて 調べて見たメモ
エラーの表示と、console.logが使えないとつらいさんなので。
■
やり方は簡単
　
1　adb をインストールして、パスを繋げる。
普段からAndroidの開発している人は もうできているはず。
2　コマンドを打ち込む
<blockquote>
adb forward tcp:1234 localabstract:chrome_devtools_remote
</blockquote>
3　ブラウザで
localhost:1234
を開く
すると、AndroidのChromeで開いているページの一覧がPCのブラウザに表示されます。
[f:id:alfe1025:20131022165739p:plain]
4　あとはデバックしたいページを選ぶと、PCで扱うのと同じように
コンソールを扱うことができます。
[f:id:alfe1025:20131022165743p:plain]
ConsoleタグからJavaScriptの関数呼び出しもできます。便利！

JavaScriptのTouchイベントのデバックをしようとするときに
コンソールがないと大変だなーと感じて 調べて見たメモ
エラーの表示と、console.logが使えないとつらいさんなので。
■
やり方は簡単
　
1　adb をインストールして、パスを繋げる。
普段からAndroidの開発している人は もうできているはず。
2　コマンドを打ち込む
<b

Android Chrome のコンソールをPCで開いてみる(Windows8 / 8.1)

イメージとしては下の図のような感じ
[f:id:alfe1025:20130727192514j:plain,w250]
div1にメイン情報を載せて、div2にサブ情報を載せる感じで。
ボタンを押すと div2を出したり消したりできるようにしてみたかった。
下のコードをhtmlファイルとして作れば動くはず。
~https://alfe.wkeya.com/div_sub.html~ (デモ)
div_sub.html
<pre><code class="language-|javascript|">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 &#x3C;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 &#x3C;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">&#x3C;/script>
 &#x3C;/head>
 &#x3C;body>
 &#x3C;div id="main_contents">&#x3C;/div>
 &#x3C;div id="sub">
 &#x3C;div id="sub_botton">
 &#x3C;div id="left_botton" class="botton">⇒&#x3C;/div>
 &#x3C;div id="bottom_botton" class="botton">↑&#x3C;/div>
 &#x3C;/div>
 &#x3C;div>
 &#x3C;/body>
 &#x3C;style type="text/css">
 html, body {
 margin: 0;
 }
 #main_contents {
 width: 440px;
 height: 600px;
 position: relative;
 border: none;
 background-color: #CCAA00
 }
 #sub {
 width: 160px;
 height: 600px;
 position: absolute;
 top: 0px;
 left: 440px;
 background-color: #99cc00
 }

 #sub_botton {
 width: 90px;
 height: 24px;
 position: absolute;
 bottom: 0px;
 right: 0px;
 }
 
 .botton {
 font-size:10px;
 font-family:Comic Sans MS;
 font-weight:normal;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 border:1px solid #d02718;
 padding:9px 18px;
 text-decoration:none;
 float:left;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f24537), color-stop(100%, #c62d1f) );
 background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
 background:-ms-linear-gradient( top, #f24537 5%, #c62d1f 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
 background-color:#f24537;
 color:#ffffff;
 display:inline-block;
 text-shadow:1px 1px 0px #810e05;
 -webkit-box-shadow: 1px 1px 0px 0px #f5978e;
 -moz-box-shadow: 1px 1px 0px 0px #f5978e;
 box-shadow: 1px 1px 0px 0px #f5978e;
 }.botton:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #c62d1f), color-stop(100%, #f24537) );
 background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
 background:-ms-linear-gradient( top, #c62d1f 5%, #f24537 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
 background-color:#c62d1f;
 }.botton:active {
 position:relative;
 top:1px;
 }
 &#x3C;/style>
 
 &#x3C;script type="text/javascript" code="subs_code">
// *********** subを動かすjquery*******
 $(function(){
 $("#left_botton").click(function(){
 if($("#sub").width() == 160){
 // close sub
 $("#main_contents").width(600).css({cursor:"auto"});
 $("#main_contents").height(600).css({cursor:"auto"});
 $("#sub").css({top:"600px", left:"600px"});
 $("#sub").width(0).css({cursor:"auto"});
 $("#sub").height(0).css({cursor:"auto"});
 $("#bottom_botton").text("↑");
 $("#left_botton").text("←");
 }else{
 // open sub
 $("#main_contents").width(440).css({cursor:"auto"});
 $("#main_contents").height(600).css({cursor:"auto"});
 $("#sub").css({top:"0px", left:"440px"});
 $("#sub").width(160).css({cursor:"auto"});
 $("#sub").height(600).css({cursor:"auto"});
 $("#bottom_botton").text("↑");
 $("#left_botton").text("⇒");

 }
 });
 $("#bottom_botton").click(function(){
 if($("#sub").height() == 160){
 // close sub
 $("#main_contents").width(600).css({cursor:"auto"});
 $("#main_contents").height(600).css({cursor:"auto"});
 $("#sub").css({top:"600px", left:"600px"});
 $("#sub").width(0).css({cursor:"auto"});
 $("#sub").height(0).css({cursor:"auto"});
 $("#bottom_botton").text("↑");
 $("#left_botton").text("←");
 }else{
 // open sub
 $("#main_contents").width(600).css({cursor:"auto"});
 $("#main_contents").height(440).css({cursor:"auto"});
 $("#sub").css({top:"440px", left:"0px"});
 $("#sub").width(600).css({cursor:"auto"});
 $("#sub").height(160).css({cursor:"auto"});
 $("#bottom_botton").text("↓");
 $("#left_botton").text("←");

 }
 });
 });
 &#x3C;/script>
&#x3C;/html>
</code></pre>
.botton の設定はジェネレータから。
初めはsubの有無を変数で管理しようと思っていたが、
jQueryの変数でフラグ管理するのは、なかなか厄介そうだなと思い、
divのサイズをflag変数代わりに用いてます。
きっとうまいやり方がほかにもあるはず。
使い方としては、googleストリートビューをdiv1に乗せて、地図をdiv2に載せてみるとか。
div1に全体写真、div2に拡大写真を貼り付けてみるとか

イメージとしては下の図のような感じ
[f:id:alfe1025:20130727192514j:plain,w250]
div1にメイン情報を載せて、div2にサブ情報を載せる感じで。
ボタンを押すと div2を出したり消したりできるようにしてみたかった。
下のコードをhtmlファイルとして作れば動くはず。
~https://alfe.wkeya.com/div_su

補足情報をjQueryを使って横とか下とかに うにゅっと出してみる。

ことあるごとに忘れるのでメモ
geometry型の"latlng"が、どの地点を指しているのかを取り出す時のsqlコマンド
<blockquote>
|
psql=> select ST_AsEWKT(latlng) from points WHERE id= 'titen1';
|&#x3C;
</blockquote>
結果は
<blockquote>
|
st_asewkt 
――――――――――――――――
SRID=1000;POINT(34.7 135.4)
(1 row)
|&#x3C;
</blockquote>
みたいになる
ちなみに
<blockquote>
|
psql=> select SRID(latlng) from points WHERE id= 'titen1';
|&#x3C;
とすると
</blockquote>
<blockquote>
|
srid
――――――――
4301
(1 row)
|&#x3C;
と、SRIDのみの表示もできる。
</blockquote>
このSRIDはなにに使うものなのか、まだよくわかってない。

ことあるごとに忘れるのでメモ
geometry型の"latlng"が、どの地点を指しているのかを取り出す時のsqlコマンド
<blockquote>
|
psql=> select ST_AsEWKT(latlng) from points WHERE id= 'titen1';
|&#x3C;
</blockquote>
結果は
<blockquote>
|
s

psqlのgeometryからSRIDと座標を取得する

Windows8 で WMPをクリックしても起動しなくなった。
アイコンをクリックしても、スルーされているような感じ。
音楽ファイルをWMP指定で起動すると、
「サーバーの実行に失敗しました」とエラーが出た。
いろいろやってみたら解決したので、書いておく。
コマンドプロンプトを管理者権限で起動
　(windows8なら、 [win]+[x] -> [a])
以下の2行を実行
regsvr32 jscript.dll
regsvr32 vbscript.dll
これでWMPが起動した。
参考：https://arxitecton.wordpress.com/2012/03/21/%E3%80%90%E5%82%99%E5%BF%98%E9%8C%B2%EF%BC%9Apc%E3%83%BB%E3%82%BD%E3%83%95%E3%83%88%E3%80%91%E3%80%80windows-media-player-12-%E3%81%A7%E3%80%8C%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E5%AE%9F/
コントロールパネルの「プログラムと起動」から
「Windowsの機能の有効化または無効化」を開いて
メディア機能を、無効→再起動→有効→再起動 とかもしてみたが特に変わらなかった。
他のエラーのときだとうまくいくのかも。

Windows8 で WMPをクリックしても起動しなくなった。
アイコンをクリックしても、スルーされているような感じ。
音楽ファイルをWMP指定で起動すると、
「サーバーの実行に失敗しました」とエラーが出た。
いろいろやってみたら解決したので、書いておく。
コマンドプロンプトを管理者権限で起動
　(windows8なら、 [win]+[x] -> [a])
以下の

windows8 Windows Media Player 12 で「サーバーの実行に失敗しました」

ｈttp://kamigami/insert.php?myname=watasida&#x26;yourname=omaedattanoka
みたいなURLから、mynameとyournameの値を取ってSQLに入れようみたいな記事。
研究室のサーバー上にあるSQLにアクセスするために書いた。
mynameとyournameは文字列を想定してます。
<blockquote>
|php|
</blockquote>
<html>
<head><title>PHP TEST</title></head>
<body>
<?php
$conn = "host=localhost dbname=alfe user=alfe password=alfepass";
$link = pg_connect($conn);
if (!$link) {
 die('接続失敗'.pg_last_error());
}
$myname = $_GET["myname"];
$yourname = $_GET["yourname"];

print('接続に成功しました。 ');
pg_set_client_encoding("utf-8");
print('データ追加 ');
$sql = "INSERT INTO kamigami (myname, yourname) VALUES ('".$myname."','".$yourname."');";
$result_flag = pg_query($sql);
if (!$result_flag) {
 die('INSERTクエリー失敗'.pg_last_error());
}
$close_flag = pg_close($link);
if ($close_flag){
 print('切断 ');
}

?>
</body>
</html>
||<
挿入するデータが文字列以外の場合は
VALUES ('".$myname."','".$yourname."');";
を
VALUES (".$myname.",".$yourname.");";
のように、'を外してやると良いと思います。

ｈttp://kamigami/insert.php?myname=watasida&#x26;yourname=omaedattanoka
みたいなURLから、mynameとyournameの値を取ってSQLに入れようみたいな記事。
研究室のサーバー上にあるSQLにアクセスするために書いた。
mynameとyournameは文字列を想定してます。
<blockquote>
|php

URL文字列からSQLにデータを入れる(PHP)

Herokuってチョウカンタンデスヨ。
という文言を入れとかないと、Herokuについて書いちゃいけない気がしたので、
とりあえず書いておいてからスタート。
Herokuを使って1日1回名言をツイートするTwitter Botの作り方(https://blog.ruedap.com/entry/20110209/ruby_heroku_twitter_bot)を読みながらTwitterBOTを作っていたら、いろいろ引っかかったのでメモしておきます。
主に何に引っかかったかというと、Herokuから「cron」が廃止されて、「scheduler」が導入されているということ。より便利に使いやすくなったのですが、ちょっととまどったのでその辺を書きます。
<ol>
<li>
Heroku環境の構築
上のリンク(Herokuを使って1日1回名言をツイートするTwitter Botの作り方)を参照
</li>
<li>
プログラム作成
今回はpso2向け緊急告知TwitterBOT(/entry/2012/10/05/212150)を使った
</li>
<li>
初期化
プログラムのあるローカルフォルダ内で
</li>
</ol>
<blockquote>
||
$ git init
$ heroku create [appname]
||&#x3C;
</blockquote>
<ol start="4">
<li>Gemfileを作る</li>
</ol>
<blockquote>
||
</blockquote>
<h1>Gemfile</h1>
source :rubygems
gem 'twitter'
||&#x3C;
「Gemfile」(拡張子なし)をプログラムのあるローカルフォルダに入れる
Gemfileとは、プログラムに必要なgemファイル一覧だと思ってもらえれば。
<ol start="5">
<li>ファイルをHerokuに突っ込む
プログラムのあるローカルフォルダ内で</li>
</ol>
<blockquote>
||
$ git add .
$ git commit -m "tekitou"
$ git push heroku master
||&#x3C;
これで、ローカルフォルダの中身がHerokuに突っ込まれます。
</blockquote>
<ol start="6">
<li>Schedulerを使う
HerokuのWebページ(https://www.heroku.com/)にログインして、設定中のアプリを選択
[+]Get Add-ons のボタンから「Heroku Scheduler 」を選択します。
「select an app ..」のプルダウンをクリックして、設定中のアプリを選択。
「Add Standerd For Free」のボタンを押すと、Schedulerが使えるようになります。</li>
</ol>
もしくはプログラムのあるローカルファイル上で
<blockquote>
||
$ heroku addons:add scheduler:standard
||&#x3C;
これでもSchedulerが使えるようになります。
</blockquote>
アプリのページに戻り、Add-onsに「Heroku Scheduler Standard」が追加されているのを確認して、追加されたものをクリック
Heroku Schedulerの編集画面が開くので、
「Add Job..」のボタンを押して、$ の横に、実行したい「コマンド」を入力します
たとえば、「ruby ./pso2ship9bot.rb」みたいな感じで
そして、右側にあるFREQUENCY(実行間隔)などを設定、「save」ボタンを押すと完了です。
<ol start="7">
<li>確認
これで数時間動かしてみて、
うまく動かないようなら</li>
</ol>
<blockquote>
||
heroku ps
||&#x3C;
や
||
heroku logs
||&#x3C;
で動作状況を確認すると良いかと。
</blockquote>
ひとまずそんな感じです
author:<a href="https://plus.google.com/104298697221719052044?rel=author">alfe_below</a>

Herokuってチョウカンタンデスヨ。
という文言を入れとかないと、Herokuについて書いちゃいけない気がしたので、
とりあえず書いておいてからスタート。
Herokuを使って1日1回名言をツイートするTwitter Botの作り方(https://blog.ruedap.com/entry/20110209/ruby_heroku_twitter_bot)を読みながらTwitte

Heroku SchedulerでTwitterBOTを動かしてみる

(14.1.8追記)
＊メンテしていないので、そろそろ動かなくなってきているかも。。。
＊質問コメントはGoogleに検索かけてから！

<a href="%E3%83%A1%E3%82%A4%E3%83%89%E3%81%A1%E3%82%83%E3%82%93(/entry/2012/07/10/145204)%E3%81%AE%E8%A8%98%E4%BA%8B">/entry/2012/07/10/145204</a>に、
動かし方を教えてほしいというコメントが何件かきてたので、ちょっと詳しく書いてみます。
<h3>1. Rubyを入れる</h3>
<a href="https://rubyinstaller.org/">https://rubyinstaller.org/</a> で、windowsにRubyを入れましょう。
上サイトに入ったら、「Download」の赤いボタンをクリックして、
RubyInstallers の欄にある中で、一番上のものをダウンロードしてください。
(執筆時は「Ruby 1.9.3-p286」でした。)
次にインストール。ダウンロードしたファイルを開いてください。
基本的には、「次へ」を押していけばOKです。
途中で、オプションの設定画面が出ます。
「Install Td/Tk support」
「Add Ruby executables to your PATH」
「Associate .rb and .rbw files with this Ruby installation」
の３つ項目があるので、「Add Ruby executables to your PATH」にチェックしましょう。
インストールウィンドウを進めていって、「Finish」のボタンを押せば終了です。
<h3>2. gem</h3>
メイドちゃんに必要なgemインストールします。
 (12.12.03追記)
gemとは、パッケージシステムRubyGemsのことで、
拡張機能が入ったパッケージ みたいなものです。
コマンドプロンプトからメイドちゃんに必要なパッケージを導入しましょう。
[スタート] ― [プログラム] ― [アクセサリ] ― [コマンドプロンプト]で、
コマンドプロンプトを起動してください。
コマンドプロンプトで
<pre><code>>gem install ruby-gmail
>gem install gcalapi
>gem install weather_hacker
</code></pre>
を、実行してください。
<h3>3. GMailの設定</h3>
メイドちゃんは、GMailに届いたメールから予定を作成します。
メイドちゃんに予定として読んでほしいメールを、あらかじめフィルタで振り分けるよう設定しておきましょう。
デフォルトでは、「Work/maid-tyan」に届いたメールを読むようになっています。
ちなみに私の振り分け方法。
Gmailだと、”+(プラス記号)と適当な文字列”を既存のアドレスに追加するだけでもう一つのアドレスが持てます。
なので、私のアドレスが、mail@gmail.com だとすると、
「mail+maidtyan@gmail.com」 にメイドちゃん宛のメールを送り、
「to:mail+maidtyan@gmail.com」でフィルタを作れば、
メイドちゃん宛のメールを振り分けることができます。
<h3>4. メイドちゃんの設定</h3>
<a href="Github(https://github.com/alfe/maidtyan)">https://github.com/alfe/maidtyan</a>から、ソースコードをダウンロードし、解凍します。
(「ZIP」のボタンから、maidtyan-master.zipがダウンロードできます。)
config.rb をメモ帳で開いてください。
そして、gmailのアドレス・パスワード、送信先アドレス、自宅の郵便番号を記入してください。
■■■ここまでが、初期設定になります。■■■
<h3>5. メイドちゃんに予定メールの送信</h3>
メイドちゃんのアドレス宛に、
件名を「(今日の日付) メイドちゃんのテスト」
(「11/10 メイドちゃんのテスト」みたいな感じで)
として、送ってみましょう。
<h3>6. Googleカレンダーに予定の登録</h3>
Googleカレンダーに今日の予定が入っていない人は、登録してみてください。
<h3>7. メイドちゃんの実行</h3>
コマンドプロンプトで、
<pre><code>>ruby C:\(4,でダウンロードした場所)\maidtyan-master\maid-tyan.rb
</code></pre>
として、メイドちゃんを実行してください。
(12.11.29追記)
つまり
<pre><code>>ruby C:\Users\alfe\Downloads\maidtyan-master\maid-tyan.rb
</code></pre>
という感じですね。
 (12.12.03追記)
<code>mime/Message(LoadError)</code> とかのエラーが出た場合はGmailにログインする機能がうまくいってないので、
<a href="https://github.com/dcparker/ruby-gmail">https://github.com/dcparker/ruby-gmail</a> からZIPをダウンロードして、
C:\Ruby193\lib\ruby\gems\1.9.1\gems\ruby-gmail-0.2.1の中身と置き換えてみてください。
 (13.03.03追記)
./MaidMail.rb (LoadError)のエラーが出るときは、
maid-tyan.rb の6-9行目にある、
require "./*" の部分を
require 'C:(インストール場所)\maidtyan-master*'
に、
maid-tyan.rb:10行目、MaidMail.rb 4行目、
Google_calender.rb 8行目、weather.rb 7行目を、
load 'C:(インストール場所)\maidtyan-master\config.rb'
に変更してみてください。
つまり、相対パスを絶対パスに変えてみるということです。
コマンドプロンプトが
・・・・・・ となって、4,で設定した送信先アドレスにメールが届けば成功です。
■■■
メイドちゃんの活用方法としては、
スケジュールやタスクが入ったときに、5,と 6, を行なっておいて、
朝方に 7, を実行する。という感じです。
そうすると、朝一番にメイドちゃんから、「今日の予定メール」が届いて捗ります。

(14.1.8追記)
＊メンテしていないので、そろそろ動かなくなってきているかも。。。
＊質問コメントはGoogleに検索かけてから！

/entry/2012/07/10/145204に、
動かし方を教えてほしいというコメントが何件かきてたので、ちょっと詳しく書いてみます。
1. Rubyを入れる
https://rubyinstaller.org/ で、windowsにR

メイドちゃんを動かす―Rubyを入れるところから。

1日1回 プログラムを実行させようと思って、スタートアップに設定してみたが、
再起動とかしたとき、その都度実行されて、メンドクセ…ってなったとき向け。
batファイルと ログ用txtファイルを使って、解決してみようというのが今回のテーマ。
◆方向性
batファイル実行
　→ ログに今日の日付がある
　　　　-[ある]→ EXIT
　　　　-[ない]→ 今日の日付を書き込む →プログラム実行
こんな感じ。　簡単ですね。
◆ソース
open.bat
<blockquote>
||
@echo off
FOR /F "delims=," %%a IN (log.txt) DO (
IF %%a == %date:/=% (
EXIT
)
)
echo %date:/=%>> log.txt
C:\Users\alfe\hoge.exe ←実行ファイル
||&#x3C;
</blockquote>
上のopen.batと、 log.txt という空のテキストファイル作って、
スタートアップにopen.batを登録すれば完了。
◆まとめ
普通のプログラムを実行するなら、サーバのcronとかで定期実行するのが楽。
Windows機を1日1回バックアップしたいとか、そんな用途で使おうと作ってみました。
<a href="https://plus.google.com/104298697221719052044?rel=author">author:alfe_below</a>

1日1回 プログラムを実行させようと思って、スタートアップに設定してみたが、
再起動とかしたとき、その都度実行されて、メンドクセ…ってなったとき向け。
batファイルと ログ用txtファイルを使って、解決してみようというのが今回のテーマ。
◆方向性
batファイル実行
　→ ログに今日の日付がある
　　　　-[ある]→ EXIT
　　　　-[ない]→ 今日の日付を書き込む →プ

windowsのスタートアップから、1日1回だけプログラムを実行させてみる

PSO2 Ship9 緊急クエ通知BOT(<a href="@pso2_ship9_emg">https://twitter.com/pso2_ship9_emg</a>というのを作ってみた。
機能としては、PSO2緊急クエ発生時間つぶやきbot (<a href="@pso2_emg_bot">https://twitter.com/pso2_emg_bot</a> のつぶやきから、
Ship9の緊急クエだけを取り出してRTするだけです。
使用言語はRuby。 ubuntuのcronで定時実行しています。
twitterBOTを作ってみたいという人が、周りに割といたので、作り方を紹介してみます。
環境さえ整っていれば、1時間かからずに作れますよ。
<h3>◆つくりかた</h3>
<ol>
<li>”twitter”をrequireできるようにします。</li>
</ol>
<pre><code>$ gem install twitter -v=2.1.0
</code></pre>
　古めのバージョンを使ってるのは、説明しているページが多めだからです。
<ol start="2">
<li>
twitterのサイトで、BOT用アカウントを作成します。
</li>
<li>
<a href="Twitter%E3%81%AE%E9%96%8B%E7%99%BA%E8%80%85%E7%94%A8%E3%82%B5%E3%82%A4%E3%83%88">https://dev.twitter.com/</a>を開きます。
</li>
<li>
BOT用アカウントでログインします。
</li>
<li>
右上のアイコンから、[My applications]→[Create a new application]と押していきます。
</li>
<li>
アプリの名前とか説明とかを記入して、OKを押します。
</li>
<li>
アプリのステータス画面を開いて、[Create my access token]のボタンを押します。
</li>
<li>
再読み込みされたステータス画面から、Consumer keyとConsumer secretとAccess tokenとAccess token secretを控えておきます。
　 (twitterに投稿する系のアプリの場合は、Read&#x26;Writeできるように設定を変えておきます。)
</li>
<li>
Rubyプログラムを作成します。
　 今回のPSO2 Ship9 緊急クエ通知BOTだと、こんな感じのソースコードになります。
　 gemのtwitterをどうやって使うかは、<a href="%E3%81%93%E3%81%93(https://route477.net/w/?RubyTwitterJa)">https://route477.net/w/?RubyTwitterJa</a>を見て調べた。
</li>
</ol>
(*2013.2.7 ソースコード訂正)
<pre><code class="language-ruby">require 'twitter'

#ログイン
Twitter.configure do |config|
 config.consumer_key = '8, のConsumer key'
 config.consumer_secret = '8, のAccess token'
 config.oauth_token = '8, のAccess token'
 config.oauth_token_secret = '8, のAccess token secret'
end 

#タイムラインの取得
tl = Twitter.
search("pso2_emg_bot #pso2 #pso2_ship09 -rt", :lang => "ja", :count => 1)
ship9 = Twitter.
user_timeline("pso2_ship9_emg", :lang => "ja", :count => 1)

#すでにリツイートしていないかを確認
#していなければ、リツイート！
s9text = ship9.first.text
if s9text.include?("RT @pso2_emg_bot: ")
	s9text["RT @pso2_emg_bot: "] = ""
end

if(tl.statuses.first.text != s9text)
	Twitter.retweet(tl.statuses.first.id)
	p tl.statuses.first.text
	puts "retweet"
else
	puts "*****already retweeted*****"
	p s9text
end
</code></pre>
<ol start="10">
<li>
9で作ったプログラムを実行してみて、うまく動くか確認します。
</li>
<li>
crontabを編集して、定時実行するように設定します。
</li>
</ol>
<a href="%E3%81%93%E3%81%93(https://kazmax.zpp.jp/linux/lin_cron.html)">https://kazmax.zpp.jp/linux/lin_cron.html</a>とか、<a href="%E3%81%93%E3%81%93(https://miya0.dyndns.org/pc/settei/crontab.html)">https://miya0.dyndns.org/pc/settei/crontab.html</a>とかがわかりやすかった。
<ol start="12">
<li>指定した時間にうまく動作してたら完成。</li>
</ol>
―――――――――
BOTをすぐに作れるWebサービスとかが普通にあって、ほんと便利です。
ただ、Webサービスだと、機能が限られてるときなんかもあると思うので、
そういうときは、BOTの自作も簡単にできそうだったなー、と思い出してもらえれば。

というのを作ってみた。
https://twitter.com/pso2_emg_bot のつぶやきから、
Ship9の緊急クエだけを取り出してRTするだけです。
使用言語はRuby。 ubuntuのcronで定時実行しています。
twitterBOTを作ってみたいという人が、周りに割といたので、作り方を紹介してみます。
環境さえ整っていれば、1時間かからずに作れますよ。
◆

PSO2用にBOTを作ったよという話

+++++++++++++++++++++++++++++++++++++++++++++++
2012-11-10　<a href="%E7%B6%9A%E3%83%BB%E3%83%A1%E3%82%A4%E3%83%89%E3%81%A1%E3%82%83%E3%82%93%E3%80%81%E3%81%95%E3%82%89%E3%81%AB%E7%B6%9A%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82">/entry/2012/11/10/074920</a>
[]+++++++++++++++++++++++++++++++++++++++++++++++[]
ちょこちょこと機能を追加したメイドちゃんの挙動が、
いい感じに安定してきたので、ここで変更後のソースとかさらしてみる。
<a href="%E3%83%A1%E3%82%A4%E3%83%89%E3%81%A1%E3%82%83%E3%82%93%E3%81%8C%E5%89%8D%E5%9B%9E%E3%81%A8%E6%AF%94%E3%81%B9%E3%81%A6">/entry/2012/06/14/194824</a>どの辺が成長したかというと。
・雨が降りそうなときに教えてくれる。
・セリフ増量
・無駄にオブジェクト化
つまり私が得をする感じの追加です。
ソースコードは続きから
=====
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
そいうわけでソースコードです。
・maid-tyan.rb（メールを検索したり送信したりする）
・MaidMail.rb （メールの中身を作る）
の2つのファイルで動かしてあります。
maid-tyan.rb
<blockquote>
|ruby|
#coding: utf-8
require 'gmail'
require 'kconv'
day = Time.now
</blockquote>
require "./MaidMail.rb"
#gmailにログイン
USERNAME='mail@gmail.com' #gmailのアドレス
PASSWORD='pass' #gmailのパスワード
gmail = Gmail.new(USERNAME,PASSWORD)
#メールを送信するかしないかのフラグ
mailFlag = 0
fullSchedule = ""
#Workフォルダ内の未読を調べる
mail = gmail.mailbox('Work').emails(:unread).map do |mail|
#件名があるときだけ、
if mail.subject != nil
schedule = Kconv.toutf8(mail.subject)
today = day.strftime("%m%d")
<pre><code>#今日のタスクがある
if /^#{today}/ =~ schedule
 mailFlag += 1
 schedule = schedule.sub(/^#{today}\s/,'')
 #複数のタスクを分ける (空白を"・・"に置き換えてから”\n・”にする)
 while /\s/ =~ schedule 
 schedule = schedule.sub(/\s/,"・・") 
 end
 while /・・/ =~ schedule 
 schedule = schedule.sub(/・・/,"\n・") 
 end
 fullSchedule += "・" + schedule + "\n"
 
 #本文処理⇒備考に
 if !mail.text_part &#x26;&#x26; !mail.html_part
 if mail.body.decoded.encode("UTF-8", mail.charset) != ""
 fullSchedule += " (" + mail.body.decoded.encode("UTF-8", mail.charset) + ")\n"
 end
 elsif mail.text_part
 fullSchedule += " (" + mail.text_part.decoded + ")\n"
 elsif mail.html_part
 fullSchedule += " (" + mail.html_part.decoded + ")\n"
 end
 #mail.mark(:unread) #読み込んだメールを未読に(テスト用)
 next
end
mail.mark(:unread) #使わなかったメールを未読に
</code></pre>
end
end
#予定のあるときのみ送信
if mailFlag > 0
maidSerif = MaidMail.new
<pre><code>#メール送信
gmail.deliver do
	to maidSerif.sendTo
	subject maidSerif.sub
	body maidSerif.text(fullSchedule)
end


#出力結果テスト用
#maidSerif.showMail (fullSchedule)
</code></pre>
end
||&#x3C;
MaidMail.rb
<blockquote>
|ruby|
</blockquote>
<h1>coding: utf-8</h1>
require "weather_hacker"
class MaidMail
<pre><code>def initialize(address = "keitai@docomo.ne.jp")
	@sendTo = address
	@sendSub = "メイドちゃんより"
	@sendText = ""
end

def sendTo
	return @sendTo
end

def sub
	return @sendSub
end

def status
	array = [
		"ちょっぴりおねむなメイドちゃんです.ヾ(＾▽＾*ζ",
		"ζ＞∇＜)ﾉ できる女 メイドちゃんです.",
		"あなたのかわいいメイドちゃんです.ヾ(´ｖ｀*ζ",
		"メイドちゃんですよ♪ ｖ(・ω´・+*ζ",
		"ζﾉ≧▽≦)ﾉ メイドちゃんが可憐に登場です♪"
		]
	return array[rand(array.length)]
end

def weather
	zipcode = "000-0000" #郵便番号
	forecast = WeatherHacker.new(zipcode)
	if "雨" == forecast.today['weather'] #”雨”の予報のとき
		weatherMessage = "雨ですね。風邪などひかれませんようお気を付け下さい。\n" 
	elsif /雨/ =~ forecast.today['weather'] # ”雨のち曇り”とか”雨時々晴”とかの予報のとき
		weatherMessage = "今日は折り畳み傘がいるかもです。\n" 
	end
	return weatherMessage
end

def text(fullSchedule)
	day = Time.now
</code></pre>
maid_tyan_messageFirst = &#x3C;&#x3C;-EOS
ご主人様 おはようございます！
#{self.status}
#{self.weather}
今日(#{day.strftime("%m月%d日")})のご予定をお知らせしますね。
EOS
maid_tyan_messageLast = &#x3C;&#x3C;-EOS
それでは 今日も元気に頑張ってください♪
EOS
@sendText += maid_tyan_messageFirst + fullSchedule + maid_tyan_messageLast
return @sendText
end
<pre><code>def showMail(fullSchedule)
	text(fullSchedule)
	print @sendTo + "\n"
	print @sendSub + "\n"
	print @sendText + "\n"
end
</code></pre>
end
||&#x3C;
またなにか面白そうなの思いついたら、機能を付け加えていきます。

+++++++++++++++++++++++++++++++++++++++++++++++
2012-11-10　/entry/2012/11/10/074920
[]+++++++++++++++++++++++++++++++++++++++++++++++[]
ちょこちょこと機能を追加したメイドちゃんの挙動が、
いい感じに安定してきたので、ここで変更後のソースとかさら

続・メイドちゃん

+++++++++++++++++++++++++++++++++++++++++++++++
2012-07-10　<a href="%E7%B6%9A%E3%83%BB%E3%83%A1%E3%82%A4%E3%83%89%E3%81%A1%E3%82%83%E3%82%93%E3%81%AB%E6%94%B9%E8%89%AF%E7%89%88%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82">/entry/2012/07/10/145204</a>
[]+++++++++++++++++++++++++++++++++++++++++++++++[]
■ さくら壮のペットな彼女 に触発されました。
上記のライトノベルに、メール自動返信AIというのが出てくるのです。
その名も メイドちゃん。
龍之介(開発者)宛てのメールに好き勝手返信するAIプログラムなのです。
なんか楽しそうなので、摸倣してみることに。
しかし、メール返信をAIに任せるのは怖すぎるので、別の機能をさせてみよう。
今回はローカルで動けばいいからRuby使おう。
そんなわけで スケジュール管理メイドちゃん ができました。
■ 機能はこんな感じ
携帯から予定メモをGmailに送信する
　　　　↓
Rubyプログラム起動 (朝に自動実行するよう設定しておく)
　　　　↓
メイドちゃんが、「今日の予定はこれですよ」 と携帯にメールしてくれる。
普段から予定をメモしている人向けですね。
うまく使えば、定期券の更新とか本の返却とかのうっかり忘れが格段に減るのではないかと。
■ プログラムを使う前準備は
・予定メモメールを[Work]に割り振るよう事前にフィルタをかける。
・Gmailにメールを送信する。
　形式はこんな感じで
　　　<a href="%E4%BA%88%E5%AE%9A%E6%97%A5">件名</a> [半角スペース] (予定内容)
　　　<a href="%E4%BA%88%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A9%B3%E7%B4%B0">本文</a>←なくても可
　つまり
　　　[件名]0613 研究室紹介
　　　[本文]16:20から
　みたいに書くとバッチシ認識してくれます。
■ プログラムの流れは、
・gmailログイン
　　　↓
・Workフォルダの未読メールを調べる。
　　　↓
・今日の分のタスクがあれば、内容をストックして、メールは既読に。
　　　↓
・今日の分のタスクがあれば、メール送信！
といった感じ。
あっさりしてますね。
■ ソースコードはこんな感じ
<blockquote>
|ruby|
#coding: utf-8
</blockquote>
require 'gmail'
require 'kconv'
day = Time.now
#gmailにログイン
USERNAME='gmailid@gmail.com' #gmailのアドレス
PASSWORD='gmailpass' #gmailのパスワード
gmail = Gmail.new(USERNAME,PASSWORD)
#メールを送信するかしないかのフラグ
mailFlag = 0
#本文ストック用String
fullSchedule = ""
#Workフォルダ内の未読を調べる
mail = gmail.mailbox('Work').emails(:unread).map do |mail|
#件名があるときだけ内容を読み込む
if mail.subject != nil
schedule = Kconv.toutf8(mail.subject)
today = day.strftime("%m%d")
<pre><code>#今日のタスクがある
if /^#{today}/ =~ schedule
 mailFlag += 1
 schedule = schedule.sub(/^#{today}\s/,'')
 schedule = schedule.sub(/\s/,"\n・") #複数のタスクを分ける
 fullSchedule += "・" + schedule + "\n"
 
 #本文処理⇒備考として
 if !mail.text_part &#x26;&#x26; !mail.html_part
 if mail.body.decoded.encode("UTF-8", mail.charset) != ""
 fullSchedule += " (" + mail.body.decoded.encode("UTF-8", mail.charset) + ")\n"
 end
 elsif mail.text_part
 fullSchedule += " (" + mail.text_part.decoded + ")\n"
 elsif mail.html_part
 fullSchedule += " (" + mail.html_part.decoded + ")\n"
 end
 
 next
end
mail.mark(:unread) #使わなかったメールを未読に
</code></pre>
end
#mail.mark(:unread) #読み込んだメールをすべて未読に
end
<h1>今日の予定があるならメール送信</h1>
if mailFlag > 0
#メールヘッダ
maid_tyan_messageFirst = &#x3C;&#x3C;EOS
おはようございます！
EOS
maid_tyan_messageFirst += "今日("+ day.strftime("%m月%d日") + ")のご予定をお知らせします。\n"
#メールフッタ
maid_tyan_messageLast = &#x3C;&#x3C;EOS
それでは 今日も頑張ってください♪
EOS
#メールを送信
sendTo = "address@docomo.ne.jp" #送信先アドレス
sendSub = "メイドちゃんより"
sendText = maid_tyan_messageFirst + fullSchedule + maid_tyan_messageLast
gmail.deliver do
to sendTo
subject sendSub
body sendText
end
end
||&#x3C;
Gmailを使えるようにするため、cmdで ↓ をしてやってください。
<blockquote>
||
gem install ruby-gmail
||&#x3C;
 
</blockquote>
そして、実行すると
<blockquote>
||
おはようございます！
</blockquote>
今日(06月14日)のご予定をお知らせします。
・たとえばそんな予定
(おもむろな補足やおおざっぱな備考)
・もふもふした予定
・混沌とした予定
(いつもニコニコあなたの隣に這いよる感じの)
それでは 今日も頑張ってください♪
||&#x3C;
みたいなメールが届きます。
 
■ とりあえず完成です。
ですが、もっといろんなことができるようにさせたいですね。
メイドちゃんの挨拶をランダム生成したりとか、
天気予報と連動させたりとか、(「今日は傘要りますよ」的な)
Googleカレンダーから予定を引っ張ってきたりとか。
いろいろ遊べそうですね。

+++++++++++++++++++++++++++++++++++++++++++++++
2012-07-10　/entry/2012/07/10/145204
[]+++++++++++++++++++++++++++++++++++++++++++++++[]
■ さくら壮のペットな彼女 に触発されました。
上記のライトノベルに、メール自動返信AIというのが出てくるの

Gmailからスケジュールを管理するメイドちゃんをRubyでつくった

BKCから帰るバス：https://bkcbus.f01.jp/
 
今年の4月頭に作ったサイトになります。 BKCから帰るときに、次のバスがいつ出発なのかが、 さくっとわかるように作りました。 BKCのバス停では、多様なバス路線が選べまして、 最寄駅の南草津駅よりもバスの停留所が多いという。 そして、私の使っている路線がマイナー路線で、 長期休暇になると、運休してしまうのです。
なので、他の路線を使って大回りして帰らなければいけない。 しかし他路線の時刻表がわからないので、 バスが出発したときにバス停に着いたりとかよくあったわけです。
これは不便だぜ。 という成り行きで作ったサイトになります。 実際に使ってみると、地味に便利でした。 ■機能はとてもシンプル
・各路線の次発と次々発のバスがいつ出発するかがわかります。
・ガラケーでもスマホでも使えます。 ガラケー対応にはこだわりました。 なにせ対応していないと、私にとって使いづらい。 使用言語はPHP。 時刻表データを加工して、配列に突っ込み、Whileで要るデータを取り出す、 というシンプルな構造です。
 
時刻表を外のサイトから抽出したほうがいいかな？ とも思いましたが、 時刻表ってそんな更新しないよね、というのと、 マクロ使ったら意外と処理時間短かったので、配列に直突込みという横着してます。 
 このバス時刻表サイトもTwitterで宣伝したら、 結構な方がRTしてくださりました。感謝です。

BKCから帰るバス：https://bkcbus.f01.jp/
 
今年の4月頭に作ったサイトになります。BKCから帰るときに、次のバスがいつ出発なのかが、さくっとわかるように作りました。BKCのバス停では、多様なバス路線が選べまして、最寄駅の南草津駅よりもバスの停留所が多いという。そして、私の使っている路線がマイナー路線で、長期休暇になると、運休してしまうのです。
なので、他の路線を使って大回

BKCから帰るバス

<img class="hatena-fotolife" title="f:id:alfe1025:20120531191553j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20120531/20120531191553.jpg" alt="f:id:alfe1025:20120531191553j:plain" />
 
BKC内で呟かれたツイートを表示するBKCったー！：
https://bkctter.f01.jp/
 
 
Twitterから、立命館大学びわこくさつキャンパス内で
呟かれたツイートをだらだら見るサイトなのです。
 
大学内のツイートが一覧表示されたら、
　　食堂で新しいメニューができたときとか
　　ゲリラ豪雨のときとか
　　サンタさんが学内に出没したときとか
そんなとき楽しそうだなーと思って、勢いで作ったサイトです。
 
つくったよー、とツイートしたら
何人かに、リプライとRTをいただきました。
ありがとうございます。
 
 
で、数日 プロトタイプ版として動かしてみて思ったこと。
・びっくりするくらい流れが遅い。
　きっとgeoタグをつけている方が少ないのだと思います。
　私もgeoタグつけてませんし(ガラケーでgeoタグ付けれるのだろうか)
　一部のgeoタグ付けて投稿されてる方と、foursquareで投稿している方だけ表示されるので、流れがゆっくりなのでしょうね。
　きっと改善方法はあると思うので、要研究です。
 
・ガラケーで使えない。
　携帯電話向けサーバーを借りて 動かしているのですが、
　文字コードがUTF-8なので、ガラケーで動かないという。
　友達のiPhoneからだと動きます。Androidもいけます。
　でも、ガラケーはSHIFT-JISしか対応していないので文字化けします。
　ページの一番下のサーバから付加される広告が文字化けてるのもきっとその影響。
　twitterから送られてくるデータがをUTF-8からSHIFT-JISに変換できれば、
　ここも何とかなるはずなので要改造。
　
・あとはデザインが何とかならんか。
　ガラケー対応を取るか、CSSでデザインするかの2択。
 
 
 
P.S.
投稿しようとしたときに気付きましたが、
BKCから帰るバス https://bkcbus.f01.jp について
こっちのブログで書いていないのですね。
 
 
ありがたいことに皆様に愛されて
Returning Visitorが 86.94%というサイトです。(5/31現在)
 
次回は これについて書きます。


 
BKC内で呟かれたツイートを表示するBKCったー！：
https://bkctter.f01.jp/
 
 
Twitterから、立命館大学びわこくさつキャンパス内で
呟かれたツイートをだらだら見るサイトなのです。
 
大学内のツイートが一覧表示されたら、
　　食堂で新しいメニューができたときとか
　　ゲリラ豪雨のときとか
　　サンタさんが学内に出没したときとか
そんなとき楽しそうだなーと思

BKCったー 作ったよ 

<img class="hatena-fotolife" title="f:id:alfe1025:20120525083032j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20120525/20120525083032.jpg" alt="f:id:alfe1025:20120525083032j:plain" />
Original Update by<a href="https://www.flickr.com/photos/hunter0405/"> TounoTouji</a>
 
4月の頭くらいに、twitter投稿アプリを作りました。
かなり雑なつくりになっているため公開はしていないのですが。
<a href="https://twitter.com/#!/alfe_below">https://twitter.com/#!/alfe_below</a> で使用しております。
 
私のtwitter上では 読んだ本を記録しているのですが、
「投稿元を アルフの本棚 とかにすれば、なんかよくね？」と
いつも通りの思い付きで作ったアプリだったりします。
 
PHPなファイルなので、ガラケーでも使えます。
アプリというよりページといったほうが正しいのかな？
 
書籍名を入れて 投稿 って押すと、
「○○○○○  読了」
と投稿して、自動的にふぁぼってくれるという。
私しか得しない仕様ですよね。
 
 
で、さっき使いながら
「Consumer key さえ入れ替えれば、各々好きなアプリ名にできるよね」
とか思って、需要あるのだろうかと調べてみたら、
 
すでにあった
https://hiruoppai.web.fc2.com/
 
ここでTitanium Desktopというものを初めて知りました。
Titanium Mobileは知ってましたが、Desktopのもあるのか。
しかし、このパソコンで動かない。
windows8に対応してなかったりとかなのだろうか。
 
Titanium Desktopが使えそうなら、
いまwindowsソフト用に勉強しているBasicも必要ないのか。もしかして。
 
こうしてまたいろんなものに手を出していくわけですね。
言語に対してふらふらしすぎている気がする今日この頃です。

 

Original Update by TounoTouji
 
4月の頭くらいに、twitter投稿アプリを作りました。
かなり雑なつくりになっているため公開はしていないのですが。
https://twitter.com/#!/alfe_below で使用しております。
 
私のtwitter上では 読んだ本を記録しているのですが、
「投稿元を アルフの本棚 とかにすれば、なんかよくね？」と

自作twitter投稿アプリ

注）WebAuthとかが普及する前(2012年以前)のつなぎ方です。
　　最新のつなぎ方は立命館の情報基盤課に問い合わせてください　　
 
<img class="hatena-fotolife" title="android" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/alfe1025/20120524/20120524194928.jpg" alt="f:id:alfe1025:20120524194928j:plain" />
立命館大学には無線LANが張り巡らされていて、
ノートPCやiPhone持っている人は恩恵を受けている人も多いのではないかと。
私の学科だと、授業中 1割くらいの人はノートPC開けている感じです。
 
しかし、
この張り巡らされている無線LAN。
iPhoneには公式に対応しているのに、Androidには対応していないのです。
 
せっかくなので、持っているAndroidタブレットにもつなぎたい、と思い、
がんばってなんとか繋げましたよ。
以下、注意点と方法です。
 
 
＊注意
・root化が必要かもしれません。何かあっても責任は取れません。
　root化の意味、やり方は各自調べてください。
・使用OSはAndroid4.01です。ほかのバージョンでは繋げないかもしれません。
　ちなみに端末は、Novo 7 Advanced IIという中華Padです。
・公式な方法ではないので、RAINBOW STAFFへの問い合わせは控えてください。
 
＊接続方法
1. PPPoEWを立命館大学外の無線LANとかからダウンロードします。
　正式名称はPPPOE WIFI WLAN みたいです。
　→<a href="https://play.google.com/store/apps/details?id=info.lvcoffee.pppoew&amp;hl=ja">https://play.google.com/store/apps/details?id=info.lvcoffee.pppoew&#x26;hl=ja</a>
　このアプリを動かすのに、root化が必要だと思われます。
　(もともとroot化しているタブレットを使っているので、詳細は不明)
 
2. RAINBOWのページから無線LAN接続のマニュアルをダウンロード。
　→ https://www.ritsumei.ac.jp/acd/mr/i-system/rainbow/service/wireless.html
　無線LANの設定マニュアル：ダウンロードからログインして、
　MacOS X(Ver10.4.0以前）のマニュアルをダウンロードしてください。
 
◆ここから立命館大学内
 
3. Wi-fiの設定を行います。
　立命館大学内だと Rits-Wireless が見つかると思うので、タップ。
　2.で入手したマニュアルの 1ページ目中央付近に書いているパスワードを入力。
　
　次に「詳細オプションを表示」をタップ。
　プロキシ設定の右にある「なし」を「手動」に変更。
　新たに出てきた3行に上から
　「https://proxy.ritsumei.ac.jp/」「3128」「localhost」
　と入力。
　IP設定は「DHCP」のままでOK。
　
4. 「接続」をタップしてしばらく待ちます。
　[IPアドレスを取得中]で止まってしまうかもですが根気よく待ちましょう。
　(きっと学内のIPアドレスが足りないのではないかと。)
　[接続済み]となれば成功です。
　
5. PPPoEに接続します。
　1.でダウンロードしたPPPoEWを起動します。
　RAINBOWのIDとパスワードを入れて、[Dial-up]をタップします。  
　Dial up のダイアログが消えて、青っぽい画面が出てきたら、
　中央付近のURLをタップしてください。
　(上に disconnectと書いてる場合でも気にしない。)
　接続が成功していると、ピンク色の画面が出るはずです。
　
<ol start="6">
<li>接続完了！</li>
</ol>
　Androidでのインターネットライフを満喫してください。
　
　
補足として書いておくと、
・プロキシがHTTPのみ反映されているため、接続できないアプリもあるようです。
　Skypeはダメっぽかったですね。
・スリープモードになると、接続が切れることもあるようです。
　そのときはまた繋ぎなおしてください。
　
　
立命館大学の無線LANに繋ぐときには、
無線認証⇒PPPoE⇒プロキシ の3段階が成功すれば接続できます。
 
Androidの一般に普及している2.2とか2.3とかだと、
プロキシの設定が難しいので、そこをクリアすると接続ができるようになるかも。
 
参考になれば幸いです。

注）WebAuthとかが普及する前(2012年以前)のつなぎ方です。
　　最新のつなぎ方は立命館の情報基盤課に問い合わせてください　　
 

立命館大学には無線LANが張り巡らされていて、
ノートPCやiPhone持っている人は恩恵を受けている人も多いのではないかと。
私の学科だと、授業中 1割くらいの人はノートPC開けている感じです。
 
しかし、
この張り巡らされている無線LAN。
iPhon

立命館無線LANにAndroidをつなげる方法

ひとまずHTML5のcanvasの練習として。
alfe.hp2.jp/skytree.html
 
学科の違う友人が、実験でcanvasを扱っているらしく、それに影響されてノリで作ってみたという代物。
canvasの使い方から学び始めて、1時間かもう少し短いくらいの時間かかった。
CSS3 と canvasは全く別物なんですね。
CSS3で新しく加わったグラデーションとか、円を描いたりとかに近いものかと思ってました。
やってみるまでわからないことって多いです。
ひとまず今日はここまで

ひとまずHTML5のcanvasの練習として。
alfe.hp2.jp/skytree.html
 
学科の違う友人が、実験でcanvasを扱っているらしく、それに影響されてノリで作ってみたという代物。
canvasの使い方から学び始めて、1時間かもう少し短いくらいの時間かかった。
CSS3 と canvasは全く別物なんですね。
CSS3で新しく加わったグラデーションとか、円を描いたりとかに近い

FUN YOU BLOG

ブログをはてなブログからNext.jsで作ったブログに移行した話

アイコン外観変更ジェネレーターのアクセス推移

OBSでDiscordのアイコンを四角や横並びにするジェネレーター

これからアプリ開発をはじめるときにどこから手を付ければいいか（就活中の情報３回生向け）

【環境を汚したくない人向け】Windowsでlsとかgitとかssh-keygenとかvimを使えるようにするcmder

React覚え書き

コード書いて git push をブラウザだけで（Cloud9）

ストリートビューに物を置く

Google Maps APIをつかって、一番簡単なストリートビューをつくる(v3・JS)

#通信の最適化をわかりやすいように木彫りの熊で解説してみる

Googleフォームに入力されたアドレス宛に自動返信する

Macのコンソールからローカルネット内のsmdにつなぐ

kmz拡張子ってどうやって開くの？への解決法

PCにストリートビュー＋スマホに地図 with milkcocoa

プログラム経験のない芸大生にAndroidアプリを作ってもらった

わかった気になれるオブジェクト指向講座

雨なので、外の雨の様子をブラウザ上に再現してみた。

送信ボタンを１回しか押せないフォーム作った

フォームで送信されたpngを1/100に縮小して保存する

メンテナンスメッセージを一定期間だけ表示させるphpコード

JavaScriptでURLを扱うのにpurlが便利という話

ローカルホストでPHPを動かす一番簡単な方法

Android Chrome のコンソールをPCで開いてみる(Windows8 / 8.1)

補足情報をjQueryを使って横とか下とかにうにゅっと出してみる。

psqlのgeometryからSRIDと座標を取得する

windows8 Windows Media Player 12 で「サーバーの実行に失敗しました」

URL文字列からSQLにデータを入れる(PHP)

Heroku SchedulerでTwitterBOTを動かしてみる

メイドちゃんを動かす―Rubyを入れるところから。

windowsのスタートアップから、1日1回だけプログラムを実行させてみる

PSO2用にBOTを作ったよという話

続・メイドちゃん

Gmailからスケジュールを管理するメイドちゃんをRubyでつくった

BKCから帰るバス

BKCったー作ったよ

自作twitter投稿アプリ

立命館無線LANにAndroidをつなげる方法

Canvasで東京スカイツリーを建ててみた

ブログをはてなブログからNext.jsで作ったブログに移行した話

アイコン外観変更ジェネレーターのアクセス推移

OBSでDiscordのアイコンを四角や横並びにするジェネレーター

これからアプリ開発をはじめるときにどこから手を付ければいいか（就活中の情報３回生向け）

【環境を汚したくない人向け】Windowsでlsとかgitとかssh-keygenとかvimを使えるようにするcmder

React覚え書き

コード書いて git push をブラウザだけで（Cloud9）

ストリートビューに物を置く

Google Maps APIをつかって、一番簡単なストリートビューをつくる(v3・JS)

#通信の最適化 をわかりやすいように木彫りの熊で解説してみる

Googleフォームに入力されたアドレス宛に自動返信する

Macのコンソールからローカルネット内のsmdにつなぐ

kmz拡張子ってどうやって開くの？への解決法

PCにストリートビュー＋スマホに地図 with milkcocoa

プログラム経験のない芸大生にAndroidアプリを作ってもらった

わかった気になれるオブジェクト指向講座

雨なので、外の雨の様子をブラウザ上に再現してみた。

送信ボタンを１回しか押せないフォーム作った

フォームで送信されたpngを1/100に縮小して保存する

メンテナンスメッセージを一定期間だけ表示させるphpコード

JavaScriptでURLを扱うのにpurlが便利という話

ローカルホストでPHPを動かす一番簡単な方法

Android Chrome のコンソールをPCで開いてみる(Windows8 / 8.1)

補足情報をjQueryを使って横とか下とかに うにゅっと出してみる。

psqlのgeometryからSRIDと座標を取得する

windows8 Windows Media Player 12 で「サーバーの実行に失敗しました」

URL文字列からSQLにデータを入れる(PHP)

Heroku SchedulerでTwitterBOTを動かしてみる

メイドちゃんを動かす―Rubyを入れるところから。

windowsのスタートアップから、1日1回だけプログラムを実行させてみる

PSO2用にBOTを作ったよという話

続・メイドちゃん

Gmailからスケジュールを管理するメイドちゃんをRubyでつくった

BKCから帰るバス

BKCったー 作ったよ

自作twitter投稿アプリ

立命館無線LANにAndroidをつなげる方法

Canvasで東京スカイツリーを建ててみた

#通信の最適化をわかりやすいように木彫りの熊で解説してみる

補足情報をjQueryを使って横とか下とかにうにゅっと出してみる。

BKCったー作ったよ