ReactJS帰省アドベントカレンダー【一日目】
実家に戻ってるのですが、近くの自販機にいつも買っていたさらりとしたオレンジって缶ジュースが販売中止しているわ(どうやら生産終了？したみたい)キーボードのOキーが利きづらいわ散々です。
アドベントカレンダーをやります。
一回やってみたかったんですよね〜〜〜。12月の初日からクリスマスである12月25日前後までにかけて一日に一記事を何人かで持ち回りで投稿していく企画っぽいのをアドベントカレンダーなんたらっていうらしいですが、僕の所属している高校の技術界隈で今年やるみたいですね〜〜！僕も投稿したかった！！！
アドカレ17日目に参加します〜#Qiita #n高https://t.co/8tidLmVF4q
— aoharu514 (@aoharu_514)
まあなんか僕が書くって約束してもその日ガッツリ寝ちゃうかもしれないのが怖いので誰かとブログ記事の投稿なんてやりませんが
とは言ってもぼくも責任の発生しない範囲でやりたいんで
帰省中に勉強しているreactJSの経過とかを書いていけたらなと思っています。
なんかこれを読んだJSの神がいい感じにまさかり投げてくれたりしないかなと思っています。
東京に帰る12日前後までを目標に毎日一日ずつ投稿しようと思っています。
ちなみにこれを始めようとしたのが今日のお昼なのですが、早速さっき寝落ちかけて明日のお昼くらいに
アドベントカレンダー２日目です！
って平然と書く茶番をしてしまうところでした。
とりあえず今の所、ガッツリ書く気力とかもないので明日から報告はしていきます。
ポエム記事になっちゃう日とかもあるかもですができるだけ真面目に書こうという所存です。ばいばい
1500円でかっこいいネオン管風サインボードを作りました
この記事の一番下におすすめの開発ブログ記事へのリンク貼ってます、よかったらどーぞ。
この前メルカリで500円のクーポンが配布されたんですよ。500円引きって普通にすごくないですか？僕は喜びました。
（メルカリのリンクを載せたかったんですけど、僕が買ったやつがもう掲載されてなくｱｱ）
ELファイバーを買いました。3mのやつです。
これを買うときにも紆余曲折あったんですけど、まず500円引きのクーポン券が1000円以上の商品にしか使えなかったんですよ。
しかし売られている3mのELファイバーってどれも800円くらいが多かったので僕はコメント機能から「200円値上げして売ってくれないか」っていう謎の逆値引きを行いました。まあでも普通に考えてもうちょっとオトクな方法があるよなって思い直して３個セットで2000円で売ってもらうことで販売者の人にも納得してもらいました。
500円のクーポンを使って大体3mのELファイバーひとつを500円で手に入れたことになります。
これがELファイバーです。USBから給電しています。黒い大きめの部品は多分交流電圧に変換するﾔｰﾂでしょう。
作ります。
前からネオン管のサインボード、看板ですね。がほしかったんですよ。
でもあれってガラス管ですし割れたら怖いし何より結構値が貼ります。なので今回入所したELファイバーでネオン看板風のやつを作ることにしました。
ちなみにELファイバー、光るとこんな感じです。明るい環境で撮影したので光度がわかりにくいですが、けっこうはっきりと蛍光色っぽい青みに色づいて輝いています。
新宿の東急ハンズで黒いボードを買ってきました。別にどんな板でもいいと思います。適当に500円位で買いました。
どんな文字で光らせるかを下書きします。僕は文字にしましたが、そこまで複雑なやつじゃなければ絵っぽい何かでも良さそうです。
いい感じに穴を開けて（柔らかいスチレンボードっぽい板を使ったので穴あけは楽でした。それどころか柔らかいので穴同士が近すぎると穴が繋がって破損しそうだったので複雑なモチーフを作りたかったら丈夫めの板を選んだほうが良さそうです。低発泡塩ビ板とかどうよ）
編み込む...というかELファイバーを通していきます。簡単簡単。
これで完成です。
めっちゃいい感じでよきですね〜
文字は”WHAT IF”、深い意味はありません。それっぽいので...。
光らせてみます。
あ〜〜、いいかんじ〜。
ついでに僕のベッドにも飾ってみました。
これインスタ映えってやつでは！？！？！？！？！？！？１
ちなみに隣のカレンダーみたいなのは
使わなくなったタブレットを再利用してスマートミラーをつくる - 自由研究をします。
これで作ったスマートミラーです。暗いところのほうがやっぱりかっこいいですね。
まとめ
え、チョー良くないですか？ 作るのにかかった費用は板が500円ELファイバーが500円あと飾るためにぶら下げるときに使った金具がだいたい500円でまあ1500円と少しでたくさん遊べました。
今回使ったELファイバーの長さは3mでしたが、このサインボードを作っても一尺くら余るほどだったのでもう少し長いのを買って（5mとか）なにかのキャラのモチーフとか形作ってもかっこいいかもしれませんね。
それでは
おすすめの記事です。
一から作ってみた、アイデア投稿の投稿、閲覧を目的としたWebサービスを作りました。
ツイ廃によるツイ廃のツイ廃のためのtwitterリマインドbotを作りました。
ばいばい
[ この記事はブログ投稿者の憶測や考えによりつくられています。
よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]
nodeの勉強がてらツイ廃のためのくっっそ便利なリマインドbotをつくった
このまえ僕が作ったアイデアサイト「 HUKIDAME」にこんなアイデアの投稿がありました。
https://hukidame-idea.sakura.ne.jp/HUKIDAME/orig_idea/11538313222.cgi
僕の周りでも夜中のツイッタータイムラインで「明日〜〜やらないといけないの誰か言って」って中高生がつぶやいてるのをみるのは珍しくないですし、作ってみようと思いました。
つくりました。
ちょっとしたことをあなたの代わりに思い出してくれるTwitterbot、｢リマインドくん｣です。
— リマインドくん(試験中) (@reminder_fever) October 9, 2018
✌ pic.twitter.com/znGf9EpW8u
やったことはtwitterのAPIを利用してNode.jsでアレコレした感じです。
処理としてはタイムラインの"@reminder_fever"が含まれてあるツイートを監視してそのツイート内容を取得、取得時間とツイートに書いてある指示された時刻をUNIX時刻に変換して比較して何秒後にツイートで指定された時刻が来るか計算して、その間処理を止めているって感じです。（こういうのって説明すればするほどわけがわからなくなりますね）
処理の待機にsetTimeOut関数を利用しているのですが、この関数って待機時間は完全に他の処理を止めているって認識していたので誰かがリマインド機能を使用中は他の人が機能を使うのって無理...って思ってたんですけど、なんか上手くイケてますね。複数の依頼というかリマインダーを同時にこなせてます。公式のsetTimeout関数についてのやつを読んでもいまいち理解できず...って感じでした。
問題：サーバー環境について
普通に今問題が起こっています。サーバーのやつです。
Herokuでアレコレするといいよって教えてくれたので（そういうのさっぱりでそれ関係のQiitaとか読んでもイマイチピンとこない語句ばかりでだめですね。それらへんとか勉強する必要のやつがありそうです）じゃあそれで、ってかんじで友人に完全に手伝ってもらいながらHerokuで動かしてみたのですがsetTimeout関数が環境の相性に悪いのか一切動作しません。
とりあえず動作させておきたいと思っているので苦肉の策として僕のThinkPad上で動かしているのですが、やはり不安定です。
最悪無理そうだったらRasPiをもうサーバー代わりに使おうかなとか思っています。そこまでアクセスされることもないでしょうし負荷も大きいわけでもないのでイケるかな...なんて考えています。
このボットについて
これ最後に書くのはおかしいと思ったのですが、ふと「あれ、肝心のボットの説明してなくね？」って思ったのでもう最後に書いちゃおうかと思います。
このボットのやることは単純です。
ユーザがリプライで「あのね 10:11:20:00 洗濯物をとりこむ」(”あのね”と時間指定部分と要件はそれぞれ半角スペースで区切ってください。それと時間指定の数字は半角でお願いします)とかリプライを送ると
@reminder_fever あのね 10:11:6:20 洗濯物を取り込む
— E-10 (@ntenten_Q) October 10, 2018
ボットのほうがリマインド機能の依頼を受理したメッセージを返してきます。
「洗濯物を取り込む」って11日の6時20分くらいに送るね ;)
— リマインドくん(試験中) (@reminder_fever) October 10, 2018
そして指定した6時20分になることでボットから再度指定したメッセージが送信されてリマインド機能の完了って感じになっています。
洗濯物を取り込む
— リマインドくん(試験中) (@reminder_fever) October 10, 2018
随分朝の早い洗濯物の取り込みですが、朝の早いこの人はこれで洗濯物を取り込むのを忘れずに済んだことでしょう。
このボットのヘッダー画像にも書いていますが、皆さん忘れ物をすることはあってもtwitterを開くのは絶対に忘れないですよね。
だからこそツイッターのタイムライン上で「明日〜〜しなきゃいけないの私に言って」とか自分のTwitterでの名前を忘れてはいけないことの事柄にしたりして忘れないようにするのだと思います。
実際かなり有用な手だと思いますしだからこそ僕はこのボットを作りました。
忘れっぽいツイ廃のあなたに活用してほしいなと思っています。
まとめ
ボット作りたのじい〜〜〜〜って言いながら実装していました。ダラダラしたいつもの開発より結構スピーディに完成（幻滅にはまだ問題などがあり完成とは言えないかもしれませんが）したので、良いのではないかななんて思っています。
なにが良かったんだろ...ダラダラしてたのはしていたのでずっとやることにコミットしたのがよかった点です！とは言えないしなあ...。
ボットですが、とりあえずはこのサーバー問題の解決を急ぎたいです。
というかそれが目下のところ目の上のコブって感じですね。目下なのに目の上ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗはい
これが一段落ついたので次は久しぶりにハードの方に取り組みたいななんて思っています。PICやらマイコンのやつに手を出したい。
ちなみに一番最後なので告白するんですけど、HUKIDAMEに今回のボットのアイデアを投稿したのはもちろん僕です。
ばいばい
りまいんどくんのツイッターアカウントです。FF関係じゃないと反応できないのでフォローしたほうがいいです。
[ この記事はブログ投稿者の憶測や考えによりつくられています。
よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]
アイデアの投稿サイトを作りました
タイトルのとおりです。
作ったんですよ
何かサービスを作るときって「ニーズがあるか」つまりそのサービスを必要としている人がいるかってことを考えなきゃいけないと思うんですけど、その点に関してこのサービスは完全に「ニーズがあるか」の条件を満たしていますよね。
何か制作物を作っているときに他の制作物のいいアイデアが思いついちゃって、そっちのほうが魅力的に思えちゃって今やってることを投げ出したくなることってありませんか？
僕はあります。ヒト一人が作れるものって限界があると思いますしマルチタスクで結局作品が完成しないなんてこともあると思います。
そこでこのサイトを作りました。
HUKIDAMEの目指すこと
目指すこと...というか正直たくさんの人に作ってもらいたい〜〜！って強い願望は正直そこまでって感じです。もちろん使ってもらえたら嬉しいですしデザインやシステム含めてどんどん改善を重ねていくつもりです。
まあでも最悪誰にも使ってもらえなくても僕の画期的で面白い発案とかを置いておく場所にしておこうかな〜とか思ってます。
今、HUKIDAMEでできること
公開しているHUKIDAMEですが、まあ正直完成形だとは思ってないです。
でもまあこの世で一番このサービスを必要としてるのは僕自身だし早く使いたいので（実はこのサイトを作っている途中でも他にやりたいことが出てきてうずうずしていた）公開して様々な人に見てもらおうと思った次第です。
いまこのサイトに作られている機能は
が見てほしい機能たちです。
やったこと
僕が書いたコードの中では比較的規模の大きい成果物になっているんじゃないかなって思っています。
どういうサイトなのか
文字通りなんですけど「ふと思いついたアイデア」「こんなものを作ってみたい」とか「こんなものがあったらな」とかのアイデアを投稿してもらってみんなで共有しようって目的のサイトです。
もちろん実現できるかできないかとかは関係なしですし既出のアイデアだろうが誰かにこんなもの作って欲しいとかでも構わないです。
「なにか思いついたからHUKIDAMEでアウトプットしてみよう」「何か面白いアイデアないかな、HUKIDAMEを漁ってみよう」
こんな思いが交差して「アイデアの放出」と「アイデアの獲得」が行われるととても嬉しいです。
まとめ
別にこれを脆弱性だとか不完全なことの免罪符にするつもりはないんですけど、このHUKIDAMEはこれからも修繕だとか機能の追加をしていくつもりです。
あとボク自身もめちゃくちゃ投稿していこうとも思っています。
よかったらみんなにもこのサイト教えてあげてね〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜ばいばい
hukidame.com これがHUKIDAMEです。
[ この記事はブログ投稿者の憶測や考えによりつくられています。
よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]
使わなくなったタブレットを再利用してスマートミラーをつくる
使わなくなったタブレットがあるんですよ。
なのでこれを使ってスマートミラーを作ろうと思います。
使わなくなったのを使って〜って言うとなんだかエコっぽいですね。
いらなくなったタブレットはNexus７です。タブレットでマイコンのプログラミングができると聞いて中古品をアマゾンで4000円くらいで買ったやつなんですけど、あまりにもおもすぎて(あと、バッテリーが死んでて充電コードを挿しっぱにしないと2時間と保たない)ほったらかしてたんですよね。
これを使っていきます。
方法
ハーフミラーってあるじゃないですか。
暗いところから見ると向こうが見えて、明るいところから通してみると鏡のように光を反射して見えるので向こう側が見えないってかんじのやつです。
この特性を活かし、ガラスの内側に黒背景で白い明るい文字でタブレットに表示させると黒い部分は鏡になり、白い文字は表示されるのでマジックミラーになるらしいです。
ガラスに貼るタイプのシートがあるのでそれを活用します。
完成したミラーには
- 現在時刻
- 日時
- カレンダー
を表示させようとおもいます。
そのためにタブレットにはこれらを映さなければいけないですね。
Androidアプリを作ることも考えたのですが、下手に重くなっちゃうとこのタブレットでは起動すらできるかわからないのでWebページを全画面表示するってやり方でいきます。
作ります
Habitというブラウザ表示アプリがあるのですが、それを使うことで検索バー、ホームボタン、ページバックボタンなどを表示させることなく全画面でブラウザを映し出すことができるようになります。
適当に表示させてみました。右下に邪魔っけなのはありますが僕のアプリを駆使する能力ではこれの非表示の方法がわかりませんでした。
コードを書きました
よきですね。黒背景に白でいいかんじです。
HTMLのhead部分で5秒毎に更新するようにしてPerlのlocaltime関数で得たデータをもとに色々しています。
ミラー部分です
貼るだけでマジックミラーのあれです。これを額縁のガラスに貼ってやります。
台紙のダンボールにタブレットが収まるようにカット、充電のコードがさせるようにもカットしておきます。
いいでしょ
完成です
よいでしょー！シートを貼る才能がなかったせいで気泡が入りまくりなのは否めませんが正直気になるので業者に貼り直してもらうかマジックミラーだけ外注するか考えています。
でもちゃんと反射してます。
まとめ
機能の説明してませんでしたね。
上から順に、日、曜日、時刻、その月のカレンダーです。カレンダーはその日がマークされるようになってます。
これからですが、他にもその日の天気とか気温とか色々できるように今後はしていくつもりです。
もちろん動かすこともできるので未来感というか何というか
ミラーい感ってね
[ この記事はブログ投稿者の憶測や考えによりつくられています。
よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]
さくらインターネットのサーバーでcgi内のHTMLの文字化けを修正する
備忘録的なやつです。こんなことにハマるのはよっぽどの初学者か間抜けな人だと思うので僕は今からその間抜けのために記事を書きます。
文字化けするので直します。
それだけの話です。めちゃくちゃ短い記事になりそうでみんなハッピーですね。
print "Content-type: text/html; charset=utf-8\n\n";
これをいい感じの場所に置換するなり書き込むなりしてください。
先に結論を書くのとてもいいですね。いい人になった気持ちです。
ハマった話
僕がこれにハマった話です。
普通に考えたらcharsetの値を変えれば良いってのはわかるんですけど、僕はそれをさくらのファイルマネージャーからいじってたんですよ。ファイル読み込みの時点でファイル内に記述されているやつが適用されるっぽくてひたすら
これがでてきてました。あふぉですね〜〜。
記述されたとおりにすると
成功です。よきですね。
それにしても文字化け、なんとなくホラーチックですね。人は意味のわからないものに恐怖するって言いますが、それなのでしょうか。それかなんかの映画的なのに文字化けが出てきてそれがイメージになってるってのなんですかね。
ばいばい
[ この記事はブログ投稿者の憶測や考えによりつくられています。
よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]
さくらインターネットサーバーにてCGIの実行で詰まった話 [505 Internal Server Error]
いや、なんか2日くらい詰まった挙句、結構シンプルな解決法だったので覚書としても...
まあ題名のとおりです
そんな内容のない記事なんか書きたくねえ！なんてアホみたいなことを考えているのですが、少しでもアウトプットを習慣づけていったほうが自分の記憶にも定着するし他の困ってる人にたまたまこの記事が目に入って理解の一環になればいいなとか考えています（単に僕が字を書くのが好きってのもありますが）
505 Internal Server Error
ってのが出るんですよ、ファイルのパーミッションはあってるはずだし(755にしている)パスもきちんとさくらサーバー指定のものにしています。
これがさくら指定のPerlnoやつです。ファイルの頭につけます。
こんな感じです。うまく行けば「Perl Programming」が出るはず。
解決しました。
このファイルが入っているディレクトリのパーミッションも変えなければいけないんですね。僕はそれにハマってました。
ディレクトリのパーミッションを755に変えて（僕はさくらのファイルマネージャーから変えました）
やったー！！！！成功ですね〜
cgi完全に理解マンになるべく精進していこうと思います。
ばいばい
追記なんですけど（※18年8月26日すいか）
カレントディレクトリのパーミッション、777で行けへんかなあ（755も兼ねてるし...みたいな考えだった）みたいな感じだったんですけど間違いでした。
さくらのレンタルサーバで、Premature end of script headersが出る : mwSoft blog
エラーログ見ろやって感じだったんですけど、さくらサーバーでサーバーコントロールパネルから直接見ることができました。
左のメニューバーのアプリケーションの設定、アクセスログの設定からエラーログの表示で見れました。便利ですね。
参考にしたの
「500 Internal Server Error」の原因と解決方法 | すぐ使えるサポート情報
さくらのレンタルサーバで、Premature end of script headersが出る : mwSoft blog
[ この記事はブログ投稿者の憶測や考えによりつくられています。
よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]
