IT omoe

ITのこと知らないんですけどIT関連のことを気ままに綴ります

【JavaScript】新年のサイトを作って悲しかったこと〜Tweetボタンで画像がツイートできない〜

こんにちは.はてなブログから「そろそろ記事投稿したら?」っていうメールが来たので軽く書きます.タイトルのまんまなんですけど(小声)

新年のサイト作った

冬休みなんか軽く作りたいな〜と思って新年のサイトを作りました.

f:id:ottosan84:20170113213229p:plain:w700

http://ottosan.github.io/newyear/

こんな感じで自分のサイトをちょっと変えました.「おみくじ」と「書き初め」ができます. 今回はこの「書き初め」をつくる際に手間取ったことを書き留めときます.

画像をツイートできない

結論から言うと,Tweetボタンでは画像がツイートできないということです.Tweetボタンというのはこういうやつです.

確かに,公式のDocumentにもURLやハッシュタグはツイートできると書いてありますが画像のことは一切かかれていません.

Tweet Button — Twitter Developers

色々調べてみると,まず画像をツイートしないことには画像のURL(pic.twitter.com/ZID4lRPtbR みたいなやつ)が取得できないらしくて...つむつむになりました.もちろん,サーバサイドを書いてたりしたらもっと打開策はあったと思うのですが,時間がなかったのと,フロントだけで済ましたかったので今回は妥協しました.書き初めしてもらった画像をツイートしてもらいたかったのですが,最終的にこうなりました.

f:id:ottosan84:20170113215639p:plain:w500

結果,自分以外にツイートしてくれる人がおらず,悲しい感じになりました(´;ω;`)

来年はもっと良いサイトを作れるようにしたいものです...(そもそも作るのかわからないですが)

エンジニアのカレシがつおいので紹介します

これはQiitaのアドカレ2016カノジョできてるエンジニア の9日目の記事です.

qiita.com

※この記事はこれから出てくる迫くんを必要以上に持ち上げて楽しむ自己満なネタ記事です.本人に確認してないので内容は筆者の妄想がほとんどです.若干惚気成分も配合されているかと思いますので,気分を害する可能性のある方はそっとブラウザバック願います.

はじめに

このアドカレを作った張本人でもあるカノジョできてるエンジニアの迫くん.1日目の記事を読んでこんな風になりたいなーと思った人もいるのではないでしょうか.知る人ぞ知る迫くん.恐らく色々な人に色々な認識をされているのではないでしょうか. 「雑食日記の人」「モザイクの人」「機械学習の人」「学生フリーエンジニア」「LiTメンター」...などなど.そう,彼は時としてブロガーであり,エンジニアであり,そして彼女とイチャつくどこにでもいそうな大学生なのです.そんな彼のどこに人は惹きつけられるのか.彼の本当の凄さとは...?そこらのインタビュー記事では知ることのできない魅力をカノジョの目線から徹底解剖していきたいと思います!!

Who is 迫くん?

f:id:ottosan84:20161205112350j:plain:w300
そもそも迫くんって誰?という人もこの記事を読んでいるひとの中にはいるでしょう. 彼のホームページに記されている自己紹介はこうです.

立命館大学理工学部機械システム系ロボティクス学科2回生の迫 佑樹です. Webプログラミング,iOSプログラミングが好きです. 面白いことを発見するとどんどん首を突っ込んでしまう性格をしており,様々なことに手を付けています.

ほむほむ.ついでに彼のブログのプロフィールはこう.

立命館大学理工学部ロボティクス学科在学中

TechAcademyやTECH::CAMPなどのスクールに通いプログラミングを学びました.

Life is Techでメンターとして中高生にプログラミングを教えながら,自分でもプログラミング講座を開いたり,学生フリーランスエンジニアとして受託開発を行ったりしています.

iPhoneアプリWebサービス,ロボット,VR,IoT,LINEスタンプ作成に興味があります.

こっちの方が少し詳しいですね.まあ,これで少しは彼がどんな人かわかったのではないでしょうか.「なんかすごそう」ってのを感じていただければ十分だと思います.

ひと目で分かる凄さ

さて,なんとなくすごそうな人だなというのはわかったのですが具体的にどうすごいの?っていうのを見ていきたいと思います.まずはひと目で分かる凄さから.これらに関しては私が特に書かなくても他の人が書いてたりするんで引用大会になります.

数々の受賞歴

昨年に作ったWebアプリ「たのみあげ」で2つの賞をもらっていたり
techacademy.jp

ハッカソンで優勝してたり

be-ars.colopl.co.jp

今年11月に開催されたソフトウェアコンテスト「あいちゃれ 2016」では3つも受賞しています.

www.yukisako.xyz

学生でありながらエンジニアとして働いている

デート代を稼いでくれてます
www.yukisako.xyz

まあ専門的な技術がいるバイトは時給3000円くらいしますよね.

www.ryukke.com

プログラミングを教えている

自分でやるだけじゃなくて色んな人にプログラミングを教えています.
中高生に教えていたり

www.yukisako.xyz

自分でプログラミング教室を開講しちゃったり

www.yukisako.xyz

プログラミングだけじゃなくても基本的に教えるのがうまいですし,話がわかりやすいです.

ブログでも稼ぐ

彼のブログも結構読まれており,何回も複数のニュースアプリに載っています.こういうのとか.

www.yukisako.xyz

f:id:ottosan84:20161205150200p:plain:w400

彼の記事を楽しみにしている人は結構いるみたいですよ.

学校の成績もトップ

f:id:ottosan84:20161201214956p:plain:w500

プログラミングはできるけど学校の成績が...とかいう人,よくいませんか?迫くんは学校の成績も優秀なんです.去年は学科で1位でした.今年の前期も1科目がA,それ以外全てが最高評価のA+でGPA4.88という脅威.

A嫌やん.AやとGPA下る.

というのが最近の名言.複数の人から睨まれそう.ちなみにうちの大学はA+,A,B,C,Fの5段階評価.A+を5,Aを4,Bを3…として単位数分かけあわせていった合計を全単位数で割った平均がGPAです.参考に言うと,私みたいな凡人はGPA4.48とかです.

何でそんなに強いの?

ここから彼を1年以上近くで見続けてきた私が私なりの考察を述べていきたいと思います.

何でも根本から理解している

www.yukisako.xyz

彼は絶対に公式を覚えません.覚えているものもあるでしょうが,それは最低限のもの,または何度も使っているうちに覚えたものです.公式を覚えている時間があれば,その時間を根本的な理解をするのに使います.恐らく,根本的理解をすることは公式を覚えるよりも時間がかかることが多いでしょう.しかし,一度暗記してしまうと,特に理系科目では積み重ねが大事ですから次々と意味もわからず暗記することが多くなっていき,いつかは破産します.逆に,一度根本から理解したことはいくらでも応用が効きますし,忘れることはありません.ですから,暗記するより根本的な理解をした方がいい,少し察しのいい人なら誰もがそれに気付いているはずです.でも頭わかっていてもそれをなかなか実践できないのが現状だと思います.根本的なところから理解させてくれる先生なんて一握りですし,公式の導出なんてそうテストに出るものでもありません.目先の利益にとらわれて暗記に走ってしまう人が多いのではないでしょうか.そんな時に,目先の利益にとらわれず,先のことを考えてきちんと理解するのが彼の偉大なところだと思います.というか,わからないまま覚えさせられるというのが嫌だという性分であるというのもあると思います.

そういった根本からの理解が,高成績や高い技術力を支えているのだと思います.

仕事が速い

一般的には,こんなことが言われます.

大学生活で両立できるのは授業、サークル(部活)、バイト、恋愛のどれか2つだけ

しかし先述したように,彼はどれをとっても完璧にこなしています.その実体を追ってみました.

  • 超効率的

超効率的です.といういか,めんどくさいことは速く済ませて,自分のやりたいことや興味のあることに時間を割きます. 例えばこれ.英語のプレゼンとスポーツとサイエンス(一般教養)で出すアイディアを使いまわして両方で高評価をもらっちゃってます. f:id:ottosan84:20161201170823p:plain:w600
これ以外にも使いまわしの前科はたくさんあります.別に使いまわしが良いとは言いませんが,確かにこれだと労力が半減されますよね.

このように,とにかく無駄なことを嫌がります.でも,物事を効率的に進めるための努力は惜しみません.例えばこんなものを作っちゃったりしてます.Markdownで書いたレポートをそのままTeXに変換してくれるツールです.

www.yukisako.xyz

TeXって最終的にはきれいに書けるけど色々ごちゃごちゃ書くのがめんどくさいですよね.そんな時に役立つのがこのツールです.毎回毎回「めんどくさいな〜」と思いながらTeXを書くより,時間はとられるかもしれませんが一度このようなツールを作ってしまった方が後々楽ですね.

そんな感じで面倒なことや重要じゃないことはぱぱっと終わらしちゃいます.

でも,物事を効率的に進めるための努力っていうのはエンジニアとして大事なことだと思います.だってエンジニアの役目そのものがそういうものじゃないですか?私たちの生活の中で面倒なことや不便なことをより便利にするためのシステムを考え,つくるというのがエンジニアの仕事の内の1つだと思います.普段からそういった意識がないと,良いエンジニアにはなれないのではないでしょうか.

  • 時間の使い方がうまい

「忙しい忙しい」「タスクに潰されそう」「今日は3時間しか寝てない」

そんなことを言っている人,よく見かけますよね(特にツイッター上で).でも,迫くんは絶対にそんなことは言いません.そういうことを言わないというポリシーなのもありますが,基本的に時間に使い方が上手いのです.

忙しい人でも,工夫次第で気軽に勉強ができます!! 忙しいこと,時間がないことを言い訳にして,学ぶことを放棄するのはもったいないです.

効率最重視!! 現役大学生オススメの5種類の勉強法 - ロボット・IT雑食日記

その場でできることは後まわしにせずに一瞬で終わらせます.それから,授業では内職します☆通学時間も無駄にしません.

みんなが通学通勤時間ってどう過ごしてるのかなーって思ったことがあります. 寝たり,だらだらLINEしたりボーっとしたりする人も多いと思うんですが,ちょっともったいない気もしますよね. 僕の場合,通学に片道1時間半,そのうち1時間は電車の中. 往復2時間×学校に行く日200日とすると約4000時間,一年間で電車に乗っていると. 4000時間あればなんかすごいスキルつけれそう. ってことで,最近やってるんですが,PDFファイルをダウンロードして読んでいます. PDFビューアアプリさえ携帯やタブレットに入れておけば,ネットで無料で転がってるPDFが読み放題. 実際の本とかだと座りながらじゃないと読めませんが,PDFなら立っていても,多少電車が混んでいても読めます.

満員電車でもできるはず,PDF読んで知識つけてみよう?(個人的に読みたいエンジニア向けPDFまとめ) - ロボット・IT雑食日記

このような時間の使い方をしてくれているおかげでカノジョとの時間もたくさん確保できるってわけです☆

  • 理解が速い

何か新しいことを学び始めたときの理解の速さ,飲み込みの速さはすごいです.「なにこれわかんない〜」っていうLINEが来て,しばらくしたら「すごい!これめっちゃ便利!!!」って感じのLINEが飛んで来るんですよね.こっちからしたらほえぇって感じです.このようにしてどんどん新しい技術を身に着けていくわけですね.

努力を惜しまない

先程,めんどうなことや無駄なことはやらないという話をしましたが,努力するべきところや時間を割くべきところには割きます.テスト前に何回も問題を解き直したり,こんなのを作ったり

www.yukisako.xyz

ちゃんと自分なりの勉強法を確立しているんですよね.

www.yukisako.xyz

それから,大事な発表の前はプレゼンの練習を何回もしたり...
f:id:ottosan84:20161201172505p:plain:w500
(※この写真を撮る前は真面目にやってました)

あの高成績や技術力の裏には地味な努力があったんですね!ちゃんと努力できるというのは1つの才能だと思いますよ.やればできるのになかなかやらない(やれない?)という人はたくさんいますからね.

後,投資するべきところには投資します.

www.yukisako.xyz

このように,無駄なこと,興味のないことは最低限の労力で終わらせ,重要なこと,興味のあることには十分な時間と労力,ときにはお金も投資する.そのメリハリの積み重ねが今の彼を形作っているわけです!

逆に興味のないことに関しては全くの無関心です.一番わかり易いのはファッションですね. f:id:ottosan84:20161208113803j:plain:w400
これ,全部違う日の写真なんですけど,なんかところところ服被ってますよね.まあだいたいジャージです.デートでもジャージです.ALWAYSジャージです.

失敗を恐れない行動力

冒頭にもあったように,迫くんは少しでも興味を持ったことにはすぐに首を突っ込みます.こういうのとか

これはちょっと前にWebサイトにVRが埋め込めることを知って感動した勢いで作ったやつですね.「あ,これやりたいな」って思っても実行に移すのってなかなか難しいですよね.こんな感じに忙しくても一瞬でものを作っちゃう行動力ってすごいと思います.ですから,私がなんとなく「ここいきたいな〜」って言ったらすぐに調べて「次の◯曜日にここ行こー!」って言ってくれてよいよいって感じです.
それから失敗を恐れないっていうのもいいところだと思います.どうしようどうしようと考える前にとりあえず行動.文法とか考える前にとりあえず思いついた英単語を発してみる.そこに知り合い(?)がいたらとりあえず絡んでみる.そういうところは私には真似出来ないなと思います.

楽しむ

なんやかんや,性格で得してのかなってところはあります.超ポジティブなとことか.
忙しくてもどんなにタスクに追われていても彼はそれを否定的には捉えません.むしろ楽しんでやってます.

エンジニアのカノジョであれば,納期前の忙しさには理解があります. そのため,エンジニア同士カップルならばおしゃれなカフェ・バーでのプログラミングデートなんてのもできちゃうわけです. やることいっぱいあったり,追われてると気分も沈みますが,2人でやればそれも楽しく!

カノジョできてるエンジニアAdvent Calendar 1日目 - ロボット・IT雑食日記

また,ただ楽しむだけでなく,こういうことをしたら嫌になるから,こうしたら楽しくできるんじゃないかという客観的分析をもとに楽しむ工夫もしてるわけです.

私は,おもしろくない仕事はしたくないという主義なので,自分が楽しいと思うことかつ成長できるアルバイトを選んで行ってきました.

大学生がフリーエンジニアとして働いてみた話 - ロボット・IT雑食日記

さいごに

長々と書きましたが,まだまだ紹介しきれてない部分がたくさんあると思います.でもまあとりあえず「迫くんみたいになりたい」とか「迫くんと同じ景色を見たい」という人は少し参考にしてみたらいいかなーと思います! 最後まで読んで下さりありがとうございました!!

エンジニアのカレシはよいぞ

この記事はカノジョできてるエンジニア Advent Calendar 2016の5日目の記事です.

qiita.com

はじめに

このアドカレも最初はスカスカでしたが,随分と埋まってきました.
せっかくだから全部埋めてやろうってことで埋まってない日を埋めるために無理やり記事を書きます.

※この記事はネタ記事です.若干惚気っぽい何かも含まれていますのでそういうものに耐性のない方は気をつけて下さい.

何を隠そう,私のカレシはこのアドカレを作った張本人であり,1日目に割りとハードルの高いネタ記事を書いた人です.

www.yukisako.xyz

そういやこの記事の中でこんなことを言ってましたね.

こっちも誕生日には動画を作ったりしましたが,鬼恥ずかしいので載せません.

カノジョできてるエンジニアAdvent Calendar 1日目 - ロボット・IT雑食日記

気になる人のため(そんな人は居るのか?)にこのことについてちょっとだけ紹介しますね.

エンジニアのカレシが誕生日に素敵なサイトを作ってくれた話

誕プレもらって嬉しがってる私に追い打ちをかけるように,ある1つのリンクだけが置いてあるノーパソのデスクトップが突き出されたんですね.で,そのリンクをポチッとしてみると

f:id:ottosan84:20161205232138p:plain:w600

こういうサイトが出てきまして.一見普通のサイトに見えますよね.

yukisako.github.io

こちらが普段のサイト.そう,なにやら不審なリンクが出現していますよね.それをポチッとすると...

f:id:ottosan84:20161205232656p:plain:w600

でんっ.こんなサイトがっ.画像ではわかりませんが風船がふわふわ動いてて,その下の星座みたいなのも動いてるんですよ.で,カーソルを近づけるとカーソルを避けるっていう.地味にこってます.で,ちょっと切れてますけどこの下に動画が貼り付けてあるんですね.その動画もめっちゃ良くて載せちゃいたいくらいなんですけど,多分製作者が恥ずかしすぎて死んでしまうと思うのでやめときます.ってことでこのサイトのリンクも載せられないんです.ごめんなさい.

エンジニアのカレシはよいぞ

実際これを作ってもらって身としてはめっちゃ嬉しかったですし,感動しました!!!
てことで,そこのカノジョいないエンジニアさん!こんなサイトをちょちょいとつくるだけでその辺の女の子を喜ばすことができます!これはとても大きな武器です!!頑張ってください!笑

そして,この記事を読んでいるカレシいないあなた!エンジニアのカレシという選択肢も考えてみて下さいね!その辺にいる冴えない感じのエンジニアさんでも,もしかしたらこのような形であなたを幸せにしてくれる可能性を秘めているかもしれません!!

ということで,よいクリスマスを!($・・)/~~~

1dayインターンに参加しました!

本日、立命館大学BKCで行われた株式会社みんなのウェディングさんの1dayインターンに参加させていただきました!その感想とかいろいろを簡単にまとめておきたいと思います。インターンってよく聞くけど、実際どんな感じなの?と思っている人はこの記事を読んで少しでもインターンのことを知ってもらえたらと思います。

www.mwed.jp

 きっかけ

私はインターンというものに参加するのはこれが初めてでした。別にインターンに関してアンテナを張ってた訳ではないのにどうしてこのインターンを知ったのかというと、前回の記事で書いたあいちゃれにみんなのウェディングの方が来ておられていて、その方から連絡があって知り、特に用事もなかったので参加させていただくことになりました。

 

ottosan84.hatenablog.com

 

内容

内容としては

をについて学びました。他にも良いコードの書き方や実際のサービス開発環境で行われている実践的な手法についてのレクチャーをいただきました。それとは別に簡単なお疲れ様会で軽食をいただきながら社員さんや一緒にインターンに参加した方とお話をしました。

 

実際にインターンに参加した感想

先述したように、インターンに参加したのは初めてだったので少し緊張気味で会場に向かったのですが、実際行ってみると机にお菓子が!(そこじゃない)

f:id:ottosan84:20161204163258j:image

インターンが始まると和やかな雰囲気で楽しかったです。ハンズオンではCTOの方が丁寧に教えてくださりました。Rubyは元々少し触ったことがあったので最初の方は簡単でしたが、ユニットテスト機械学習のところでは新しい知識を得ることができました。また、実践的な手法を学ぶことで実際の開発環境について少しだけイメージをつかむことができました。

 

お疲れ様会ではジュースとピザが用意されていて、それらを頂きながら1時間ほど談笑しました。

f:id:ottosan84:20161204174254j:plain

2回生は私だけで私以外はみんな3,4回生や院生だったのですが、とても楽しく色んなお話させていただくことができました。先輩や社員さんのお話は進路を考える上でとても参考になりました。

 

さいごに

インターンといえばもっと堅苦しいイメージがあったのですが、今回はとても和やかな雰囲気で楽しむことができました。(企業さんやインターンの種類によってまた色々あると思いますが)

新しい技術を身につけるだけでなく、先輩や企業さんの生の声を聞けるというのがインターンのいいところだと思います。インターンに行ったとこがないという人は是非一度参加してみて下さい。私もこれを機に積極的に色々なインターンに参加していけたらなと思います!

 

「あいちゃれ」で受賞しました!

今回,立命館大学主催のソフトウェアコンテスト「あいちゃれ」こと,ICT Challenge+Rに迫くんと共にファイナリストとして参加させていただきました.

f:id:ottosan84:20161128105329j:plain:w500

発表したもの

発表したのは「Safitem」という物資支援サービスです.簡単に言うと,避難所と支援者を結ぶWebアプリケーションです.詳しくは以下の紹介動画をご覧ください.


あいちゃれ2016 Safitem紹介ビデオ

あいちゃれ当日

当日は7組の高校生と6組の大学生がステージ発表を行い,5組の高校生と9組の大学生がブース発表を行いました.素晴らしい発表やアイディアをたくさん聞くことができ,とても良い刺激になりました!特に,高校生版であいちゃれ史上初の中学生が発表していたのが印象的でした.ステージ発表のグループも任意でブース発表ができるのですが,今年は全員ブース発表を行っていました.

f:id:ottosan84:20161128105235j:plain:w300

また,あいちゃれは多くの企業から協賛を得ており,その企業の方々と交流することができます.

f:id:ottosan84:20161128105745p:plain:w600
f:id:ottosan84:20161128105803p:plain:w600

最終結果

結果として「テーマ賞」「ワークスアプリケーションズ賞」「メンバーズ賞」3つの賞をいただくことができました!

テーマ賞

受賞理由を聞いていないのでわかりませんが,恐らく今回のあいちゃれのテーマが「安全・安心,社会の役に立つツール」であり,Safitemのコンセプトがそれによく合致していたということで賞をいただけたのではないかと思います.

ワークスアプリケーションズ

株式会社ワークスアプリケーションズさんからの賞です.最近のワークスアプリケーションズさんの製品のコンセプトの1つとして「クラウドネイティヴ」というものがあり,それにピッタリだということ,また当日来ておられた社員さんが学生時代に災害に関する研究を行っておられたことから賞をいただきました.また,

・理想を考え抜いている企画であること

・ 人々の抱える作業を圧倒的に効率化/自動化できる機能が搭載されていること

あいちゃれー協賛企業賞より

という期待にも沿えられたのではないかと思います.副賞としてAmazon Fire HD 10 タブレットAmazonギフトカードをいただきました.
f:id:ottosan84:20161128112306j:plain:w500

メンバーズ賞

f:id:ottosan84:20161128112818j:plain:w500
株式会社メンバーズさんからの賞です.メンバーズさんの理念である「社会貢献」のイメージにあっていることや,同じくRubyを使っているということで賞をいただきました.また,

実際に利用するユーザーをきちんと想定できており、この機能、便利!欲しかった!と思わせることが出来ているもの

あいちゃれー協賛企業賞より

という期待にも沿えられたのではないかと思います.副賞にはぐるなび食事券をいただきました.

f:id:ottosan84:20161128112342j:plain:w500

最後に

最後になりましたが,当日見に来てくださった方や応援してくださった方,受賞を祝ってくださった方,ありがとうございました!
f:id:ottosan84:20161128114724j:plain:w300

今回の経験を活かしてこれからも精進していけたらなと思います.

そして,当日発表を見ていただいた企業の方々,また何かあれば気軽にご連絡いただけたらと思います.今後もよろしくお願いいたします!

【Webアプリ】簡単な記事投稿アプリを作った

こんにちは. Sinatraを用いた簡単な記事投稿アプリを作ったので紹介したいと思います.

f:id:ottosan84:20161126180645p:plain
気軽に楽しむ茶道教室

きっかけ

母が地元のカルチャーセンターで茶道を教えることになりました.そこで,その教室の生徒さんだけが見れるブログのようなものがないかと聞かれ,考えたところ,アカウントを持っていなくても誰でも簡単にそういった記事を見れるというサービスがぱっと思いつかなかった(はてなのなぞなぞとか知らなかった)のと,自分で作ったものを一度公開して誰かに使ってもらいたいという思いから,作ることになりました.

機能紹介

先程も述べたように,このアプリケーションではパスワードを知っている人だけが記事を見ることができるというものです.また,管理者は記事の投稿や管理ができます.以下で詳しく見ていきます.

ユーザ(生徒さん)ができること

ログイン

f:id:ottosan84:20161126182749p:plain:w600
トップページのログインボタンを押すと,このようにモーダルが出現するのでそこにパスワードを入力し,ログインします.アカウントの作成などなく,パスワードを入力するだけなのでとても簡単です.
ログインすると,このように記事一覧が出ます.
f:id:ottosan84:20161126182920p:plain:w600

記事閲覧

f:id:ottosan84:20161126183116p:plain:w600
記事を選択すると
f:id:ottosan84:20161126183225p:plain:w600
このように記事の内容が表示されます.
上のナビで前の記事や次の記事に移動でき,記事一覧にも戻れます.このナビは上に固定されているので,いつでも記事から離れることができます.

管理者(先生)ができること

ログイン

ユーザと同じようにログインができます.ユーザとパスワードは違うものになります.
ログインするとこのような画面が出ます. f:id:ottosan84:20161126190814p:plain:w600

記事の管理

新規記事作成

上部のナビから「新規記事」をクリックするとこのような画面になり,記事を投稿することができます.
f:id:ottosan84:20161126192031p:plain:w400
普通に書いてもいいですし,HTMLで書くとそのまま記事に反映されます.見出しタグや改行,太字,リスト,aタグくらいは母親に教えておこうと思います.「ファイルを選択」で写真を投稿できます.

記事の編集

編集ボタンを押すとこのような画面になり,記事の編集ができます.
f:id:ottosan84:20161127213417p:plain:w400

記事の削除

削除ボタンを押すと記事を削除できます.

パスワードの管理

上部のナビの「管理」からユーザと管理者のパスワードの変更ができます.

その他

一応スマホからも見れます.
f:id:ottosan84:20161127214234p:plain:w200

今後の改善点

以上のような機能がありますが,これらは本当に最低限の機能だけなので時間がある時により良くなるよう改善していきたいです.今のところ考えている改善点は以下のような感じです.

  • 削除機能の改善
    • 削除ボタンを押すとそのまま消えてしまうので,一度確認する画面を出すようにしたい.
  • 画像投稿機能の拡張
    • 現在,各記事につき写真が1枚しか投稿できない仕様なので,複数枚投稿できるようにしたい.
  • 記事のプレビュー機能の追加
    • 記事を書いたらそのまま投稿という形なので,プレビューが見れるようにしたい.
  • パスワード管理機能の改善
    • 現在はパスワードを変える時に1度だけ入力したらそのまま変更されるという感じで,しかも何を打ったのか分からない入力画面になっているのでタイプミスをしたら悲しいことになります.なので,よくある2度入力させるやつとかボタン押したらパスワードが見えるようになる機能とかつけれたらなと思います.
  • フォントの追加
    • 現在は游ゴシック体しかなくて,スマホから見ると字が見えづらい状態になっているのでスマホに対応していてかつ見やすいフォントを追加したい.
  • デザインの改善
    • トップページの見出しがウィンドウ幅によっては変なところで改行しちゃうのでそれを直したい.

ざっとこんな感じでしょうか.今後このアプリが使われていってユーザの意見,要望などがあればそれもどんどん取り入れていけたらなと思います.

大学の課題を自分のPC環境でやる際に立ちはだかってきた3つの障害

こんにちは.PCの環境って何かとめんどくさいですよね.今回は学校(Linux)の課題を自分のPC(Mac)でやろうとしたときに起こった困ったことを備忘録も兼ねて書いておきたいと思います.
3つの障害とは,以下のようなものです.

  1. 学校で実行できるプログラムが自分のPCで実行できない
  2. displayコマンドが使えない
  3. OSアップデートしたらライブラリーが消えた

ここから順にその原因と対処法を紹介していきたいと思います.

学校で実行できるプログラムが自分のPCで実行できない

経緯

課題にはサンプルコードがあり,それを改変して課題を進めていくという形式でした.で,学校でもらってきたプログラムを自分のPCで実行してみるとエラーが出るんです.しかも改変していない部分で.エラーを見てみると,

「関数内関数なんて使えないよ」

っていう内容でした.学校ではコンパイル通るのに,自分のPCで通らないって...もしかして私のコンパイラ古い?
ってことでgcc -vgccのバージョンを確認.すると,学校のは4.4.7なのに自分のは4.2.1でした.Xcodeを入れたときにデフォで入るバージョンがこれみたいです.調べてみると,4.3くらいで関数内関数が使えるようになったみたいで,予想は当たってたみたい!てことでgccのバージョンをあげることに.

gccのバージョンをあげよう

  1. なんか普通にアップデートしようとしたらエラー出たのでbrewをアップデート
    brew update
  2. tap コマンドで homebrew/versions を追加
    brew tap homebrew/versions
  3. gccのバージョンを検索
    brew search gcc
  4. 入れたいバージョンをインストール(今回は4.9).これは結構時間かかる.
    brew install gcc49
  5. gccのリンクを設定
    sudo ln -s /usr/local/bin/gcc-4.9 /usr/local/bin/gcc
    sudo ln -s /usr/local/bin/g++-4.9 /usr/local/bin/g++

これでできたはず!wgcc -vで確認してみませう.そして,バージョンをあげたらコンパイル通りました.めでたし.
この辺のサイトを参考にしました.

displayコマンドが使えない

経緯

画像処理の課題だったので,できた画像を見たい!って思ったときにdisplayコマンドが使えないってなって悲しい感じになりました.なんかこんなエラーが出るんです.

display: delegate library support not built-in `' (X11) @ error/display.c/DisplayImageCommand/1893.

しかも,よりによってPGMとかPPMとかよくわからないファイル形式なので表示できるアプリケーションが他にないんですね.とりあえずImageMagickは入っているので,新しいアプリを入れるよりImageMagickがちゃんと動くようにした方がいいかな〜と思ってdisplayコマンドがちゃんと機能するように頑張ることにしました.後,コマンドラインから操作できるっていうのがいいですよね.

ImageMagickが動くようにしよう

  1. とりあえずImageMagickをアンインストールしときます.
    brew uninstall imagemagick
  2. Xquartzを入れます.
    brew cask install xquartz
  3. Xquartzを起動して
    export DISPLAY=':0.0'
    brew install imagemagick --with-x11

以上でいけるはずです.display (画像名) & で確認してみましょう.この辺を参考にしました.

OSアップデートしたらライブラリーが消えた

経緯

これは学校のパソコンが云々と言うより,OSをアップデートしてしまったのが悪いのですが,それまでちゃんとコンパイルできていたプログラムがいきなりエラーをはいたんです.何かと思えばstdio.hがないっていうんです.

fatal error: stdio.h: no such file or directory  

確かに,どこを探してもないんです.stdioだけでなく,stdlibなどの基本的なライブラリが消えてしまっていました.

stdio.hを入れよう

  1. 最新のXcodeを入れる
    これは関係あったのかなかったのかわかりませんがとりあえず最新のXcodeをアプリストアから入れました.
  2. Command Line Toolを入れる
    Xcodeを起動し,新規プロジェクトで「Mac OSプログラム>Command Line Tool」
    言語タイプ→「C」
    C言語のテンプレートを使ったプロジェクトが開く→そのままビルド
    「実行するにはCommand Line Toolをインストールする必要があります.インストールしますか?」→「OK」

無事コンパイルできるようになりました.これを参考にしました.

さいごに

そんなこんなで,環境関係のことで色々ごちゃごちゃしてたせいで課題がなかなか進みませんでした.そもそも,なぜこのようなことが起こったのかというと.

  1. gccが古かった
  2. ImageMagickが入っているだけで使える状態ではなかった
  3. むやみにOSをアップデートした

みたいな原因があったわけで,これらの問題は別に学校の環境が云々とかいう前に普段から自分のPCの環境をきちんと管理しておけば済む話だったのではと思いました.具体的には

  1. コンパイラはある程度新しいのにしとこうね
  2. ソフトウェアを入れたときはちゃんと使えるように設定しとこうね
  3. むやみにOSアップデートしないようにね

って感じでしょうか.まあなかなか難しいですけれどもね.