窓際BLOG

プログラミングの学習メモや書籍の感想等を公開していきます。

SIerのSEが自信無いけど初めてハッカソンに参加してみた

f:id:madogiwa0124:20170924074516p:plain

9/27に下記イベントに参加し、初めてハッカソンを体験してきました!
良いイベントで色々と学びがあったので、メモしておきますφ(..)
みなさんにもハッカソンの様子を感じて貰えれば幸いです。

hackathon.connpass.com

私について

まず前提として、私の仕事とスキルセットを記載しておきます。

今の仕事

SIerでSEをしています。今は異動しましたが、基幹業務パッケージシステムの導入をずっとやってました。
小規模チームのマネジメントや設計、顧客折衝、データ移行等が作業として多かったので、業務ではあまりプログラミングをしませんが、個人でWebサービスを公開したり、プログラミングスクールに通ったりしてますφ(..)

環境

3年くらい前に買った低スペックなMac Book Air 13インチを使っています(._.)

要素 スペック
CPU 1.4 GHz Intel Core i5
メモリ 4 GB 1600 MHz DDR3
グラフィック Intel HD Graphics 5000 1536 MB
HDD フラッシュストレージ 126GB

ハッカソンMACユーザーが非常に多いので、やはりMACを持っていると環境が揃えられるので、良いかも知れません。。。

スキルセット

技術的なスキルセットは下記のような感じだと思います・・・。

分野 スキル ランク 説明
フロント HTML & CSS Bootstrap、ノンフレームワークでシンプルなデザインのWebサイトを作成出来る
フロント JavaScript 生JS、jQueryを使って簡単なDOM操作が行える
バック Ruby ★★ Ruby on Railsを使って基礎的な機能(ログイン、登録、編集、削除)を持つWebサービスを作成出来る。Nokogiri、open-uriを使用した簡単なスクレイピングツールが作成出来る。
インフラ Heroku 作成したWebサービスをフリープランで何個かデプロイ、バックアップの取得等をした程度
インフラ postgresql SQLを実行して結果を取得する程度
インフラ SqlServer ★★ 業務で使用、運用保守でデータを見たり、利用状況モニターでパフォーマンスをチェックする程度
ツール Git ★★ 基本的なコマンドが使える。GithubFlowを使った開発が行える。

今まで作ってきたもの等は、下記を参照ください。 https://madogiwa0124.github.io/MyHP/

ハッカソンについて

参加する方法

当日の流れを書く前にハッカソンに参加する方法を記載しておきます。

connpass.com

www.doorkeeper.jp

上記のようなIT系のイベント検索サービスを使えば比較的簡単に見つけられると思います(/・ω・)/

当日の流れ

今回参加したハッカソンの簡単な流れは下記のような感じでした。

フェーズ 時間
イントロダクション 10:45 - 11:00
自己紹介 11:00 - 11:20
イデア出し 11:00 - 12:30
サービス検討 13:30 - 15:00
サービス開発 15:00 - 17:20
発表 17:20 - 17:45

自己紹介

アイスブレイクがてら、自分の普段の業務とスキルを説明しながら自己紹介をしました。

↓こんな感じ f:id:madogiwa0124:20170924003738p:plain

私のチームは、下記のような5人チームでした!
やはり普段Webサービスを作っているエンジニアが多かったですが、他のチームではITコンサルをやってる人等もいました(´・ω・`)

業界 人数
Web系のエンジニア 2人
スマートデバイス系のエンジニア 1人
ソーシャルゲーム系のエンジニア 1人
SIerのエンジニア 1人(私)

すごそうな人ばかりでガクブルでしたが、みんな優しくていい人で良かったです(´;ω;`)

イデア出し

グローバルというテーマで、単純なブレストではなくイノベーションカードを使ったアイデア出しを行いました。

イノベーションカードは、会議や話し合い、自分との対話など「思考」に使うツールとして開発しました。 6つのカテゴリに分かれたカードを組み合わせてあなたの新しい思考をデザインします。

www.dekir.co.jp

イデア出しの結果、言語を学ばなくても各国のユーザーとコミュニケーションするために「絵文字だけのコミュニケーションサービス」を作ることになりました(๑•̀ㅁ•́๑)✧

↓こんな感じ f:id:madogiwa0124:20170924003423j:plain

サービス検討

サービス検討では大きく分けて「機能一覧作成」と「技術検討」をおこないました。

機能一覧作成

機能一覧作成では、サービスの主要な機能の一覧を簡単なデザインと合わせて検討します。

今回は下記のような感じになりました。※実際はみんなで検討しその場で紙にメモ

  • アプリ名:Hello World
  • 概要:絵文字で世界とコミュニケーションするWebサービス
  • 機能一覧
    • 入室機能
      • 世界地図上の任意の場所をクリックし、自身の地域を選択する。
    • メッセージ送信機能(全体)
      • 全ユーザーに向けてメッセージを送信する。
      • メッセージは吹き出しで表示する。
      • 入力出来るのはユニコードの絵文字のみ
    • メッセージ送信機能(個別)
      • 個別のユーザーに向けてメッセージを送信する。
      • 送信する際は、対象のユーザーに向けて送信されていることがわかるようにアニメーションをつける。
      • メッセージをクリックすることによって、返信が行える。
    • アクティビティ機能
      • ユーザーからの返信や投稿、入室のような情報を表示

技術検討

技術検討では、先程考えた機能一覧を踏まえた言語選定、インフラ、要素技術と実装担当を検討します。

今回は下記のような形になりました。

要素 技術 内容 担当
フロント HTML、CSS、Bootstrap、JavaScript(ノンフレームワーク) 画面デザイン、イベント取得、WebSocket接続・パラメーター送信・結果取得、画面反映 Web系エンジニア、スマートデバイス系エンジニア、私
バック Go WebSocketの通信処理、パラメーター取得、返り値の作成 ソーシャルゲーム系エンジニア、Web系エンジニア
インフラ Heroku デプロイ先及びWebSocket用のサーバー構築 ソーシャルゲーム系エンジニア、Web系エンジニア
要素技術 WebSocket ブラウザで双方向通信をするための仕組み(URL) 全体

役割決めは、WebSocketの実装をネットで検索してみたところ結構出来そうという感じでバックエンドがGoに決まりGoを使ったことある2人がバックエンドを担当することになり、それ以外の人がフロントエンドを担当する形になりました。  

私はその中でも、画面デザイン、イベント取得、WebSocket接続を担当することになりましたφ(..)
「WebSocket・・・?」という感じだったので、正直ガクブルでした(´;ω;`)

サービス開発

サービス開発は役割毎にGoogleで調べながら実装していく感じです。
最終的な実装の完成具合は下記の通りです。
時間が無く最後までは実装出来ませんでしたが、WebSocketを使って通信した結果を表示するところまでは作ることが出来ましたφ(..)

  • 機能一覧
    • 入室機能:実装完了
      • 世界地図上の任意の場所をクリックし、自身の地域を選択する。
    • メッセージ送信機能(全体):実装完了
      • 全ユーザーに向けてメッセージを送信する。
      • メッセージは吹き出しで表示する。
      • 入力出来るのはユニコードの絵文字のみ
    • メッセージ送信機能(個別):未実装
      • 個別のユーザーに向けてメッセージを送信する。
      • 送信する際は、対象のユーザーに向けて送信されていることがわかるようにアニメーションをつける。
      • メッセージをクリックすることによって、返信が行える。
    • アクティビティ機能:未実装
      • ユーザーからの返信や投稿、入室のような情報を表示

私は画面デザイン・イベント取得とWebSocketの呼び出し側を担当したので、画面のID名、他の人が作ったJSのファイル名、WebSocket側の呼び出し仕様等を認識を合わせながら進めていきました。
少ない時間の中で、必要な情報を得ながら進めていく必要があるため、なかなか難しかったです。。。

それと開発作業と平行してプレゼン資料の作成も行います。

技術に自信が無い人は、プレゼン資料の作成を積極的に取り組むと良いかと思いました! 今回も最終的にあまり時間が取れなくてなぁなぁになってしまった部分があったので、時間を見て プレゼン資料(keynote,ptt,Googleスライド等)の準備を進めておくとチームメンバに喜ばれるのかなぁと思いましたφ(..)

特にGoogleスライドは共同編集も出来て便利だと思いました(/・ω・)/

ちなみに作ったサービスはこんな感じです。
f:id:madogiwa0124:20170924003452p:plain

発表

今回参加したハッカソンでは順位付けやビジネス的にどうなのかといったことは求められないゆるい感じだったので、和気あいあいな感じで良い雰囲気でした・ω・
発表内容は下記の通りでした。

  • チーム名
  • 役割分担
  • 作成したサービスの概要
  • デモ
  • 今後の展望
  • 質疑応答

おわりに

今回、ハッカソンに参加してみてすごく楽しかったし、学びとモチベーションになりました!
でももっと出来れば、もっと楽しかったのかなぁと感じました。。。

Railsは自分でサービスを作ったりしていたので、少しですが分かるつもりでしたが、実際にハッカソンで作成するサービスが自分の使っている言語やフレームワークで作られるという保証はありません。

下記のようなエンジニアとしての基礎力がもっと必要だなと感じました。

  • 普段から技術情報を拾って手を動かして身につけるような習慣
  • その場で調べながら実装していけるような、汎用的な基礎知識や考え方
  • などなど、、、

しかし、ハッカソンで必要なのは技術だけではなく、下記のような技術以外の面のスキルも大事だと感じました。

  • 光るアイデアを出す発想力
  • 少ない時間のなかでチームとして成果を出すためのマネジメントやチームワーク
  • 成果を伝えるためのプレゼンテーション

技術では、なかなかエンジニアの人たちには敵わないかも知れませんが発想力、マネジメントやチームワーク、プレゼンといったスキルは私みたいな普段実装を行わないSIerのSEが貢献できる部分だと感じましたφ(..)

また参加してみようと思います!(`・ω・´)シャキーン

勉強して、次はチームに貢献出来るようになりたい…φ(..)!

以上です。 長文にも関わらず、最後まで読んで頂きありがとうございましたm( )m

Ruby on Rails:インスタンス変数等をjavascriptに受け渡す方法

はじめに

Railsで取得したデータを使ってChart.jsでグラフ描画する等、Railsで扱っている変数をjsに受け渡す方法をメモφ(..)

↓イメージはこんな感じ f:id:madogiwa0124:20170918142442p:plain

手順

概要

  1. 取得データをJSONに変換し、HTML要素のdata属性に設定(viewに埋め込む)
  2. jsで設定した要素のdata属性の値を取得

RailsでViewに埋め込んだJSONjavascript側でパースして受け取って、使用するイメージです(/・ω・)/

ソースコード

hoge.html.erb

<div id="tag_info" data-json="<%= current_user.favorite_tags_info.to_json %>" ></div>

hoge.js

tags = JSON.parse(document.getElementById('tag_info').dataset.json);

おまけ

gonというGemを使っても出来るらしいφ(..)

github.com

qiita.com

参考

qiita.com

Ruby on Rails:文字列の一部だけエスケープさせずにHTMLとして認識させる方法

はじめに

掲示板のアプリケーション等、特定の文字部分(>>3等)を<a></a>として認識させる方法をメモφ(..)

↓イメージはこういう感じ f:id:madogiwa0124:20170916104509p:plain

やりかた

今回は>>数字を返信用の文字列として扱い、<a></a>でページ内リンクを貼るケースを想定してますφ(..)

  1. 文字列全体をhメソッドを使ってエスケープ
  2. エスケープされた文字列の返信用文字列&gt;&gt;>>に置換
  3. >>数値部を抽出し、リンク用のHTMLを生成し本文に埋め込む
  4. 出力側のViewでhtml_safeで出力

実際のソースコード

hoge_helper.rb

  def format_comment(content)
    # 返信用の文字列を定義
    reply = { char: '>>', escaped: '&gt;&gt;' }
    # コメント本文のHTMLをエスケープ後、返信用の文字列のみをHTMLとして再定義
    content = h(content).gsub(reply[:escaped], reply[:char])
    # 返信先リンク部の取得
    content_arry = content.split(" ")
    target = content_arry.select{ |c| c.include?(reply[:char]) }
    target.each do |t|
      # 返信先リンクHTMLの生成
      to = t.match(/#{reply[:char]}\d+/).to_s
      link_html = link_to to, "#comment_#{to.gsub(reply[:char], '')}"
      # 本文の返信部を返信先リンクHTMLで置換
      content = content.gsub(to, link_html)
    end
    content
  end

index.html.erb

<p><%= format_comment(comment.content).html_safe %></p>

以上

参考

www.rubylife.jp

qiita.com

Ruby:複数の区切り文字で文字列を分割する方法(String.split)

はじめに

英語の文章を".“、”!“、”?“等の複数の区切り文字で分割する方法を調べたのでメモφ(..)

複数の区切り文字で分割する方法

区切り文字を統一後、分割する

String.splitを呼び出す前に、区切り文字を置換し統一してあげればOK!(/・ω・)/
今回のケースでは、?!.に置換後にString.splitを呼び出しています。

str = "I have a pen. I have an apple. I have a pen? I have an apple!"
key = "pen"
str = str.gsub("!",".").gsub("?",".")
p str.split(".")
# result : ["I have a pen", " I have an apple", " I have a pen", " I have an apple"]

正規表現を引数に渡す

String.split正規表現を引数として渡してあげればOK!(/・ω・)/
今回のケースでは/\.|\?|!/という正規表現を与えて、.?!で分割されるようにしました。
.?は、正規表現予約語のため、エスケープしています。

str = "I have a pen. I have an apple. I have a pen? I have an apple!"
key = "pen"
p str.split(/\.|\?|!/)
# result : ["I have a pen", " I have an apple", " I have a pen", " I have an apple"]

おまけ

区切り文字で文章を分割後、再度区切り文字を付与する書き方を載せてみましたφ(..)

str = "I have a pen. I have an apple. I have a pen? I have an apple!"
key = "pen"
spliter = /\.|\?|!/
# 区切り文字を出現順に保存
split_chars = str.split("").select{ |s| s.match(spliter) }
# 区切り文字で文章を分割後、区切り文字を再度付与
str_array = str.split(spliter).zip(split_chars).map{|s| s.join }
# 結果出力
p str_array
# result : ["I have a pen.", " I have an apple.", " I have a pen?", " I have an apple!"]

以上

参考

qiita.com

qiita.com

RubyonRails:herokuのDBを開発環境(ローカル)へリストア(復元)する。

はじめに

herokuで運営しているサービス(いつもの更新、いつでも確認 | Moook)の本番環境のデータを開発環境に反映させたときの手順をメモφ(..)

前提

環境

今回の手順を行った環境は下記の通りです。

title memo
Production環境 heroku
Rails ver 5.1.2
DB postgresql

手順

herokuでDBのバックアップを実行

herokuにログインした状態で下記コマンドを実行します。

rem バックアップ取得コマンド
$ heroku pg:backups:capture

Starting backup of postgresql-asymmetrical-20043... done

Use Ctrl-C at any time to stop monitoring progress; the backup will continue running.
Use heroku pg:backups:info to check progress.
Stop a running backup with heroku pg:backups:cancel.

Backing up DATABASE to b002... done

最後の行にある'b002'という文言が、バックアップの目印になります。

バックアップファイルをダウンロードする。

rem 先程取得したバックアップのURLを取得
$ heroku pg:backups:url b002

https://xfrtu.s3.amazonaws.com/6026beb4-c189-4732-b78b...

取得したURLにブラウザからアクセスするとバックアップファイルをダウンロード出来ます。

バックアップを開発環境のDBにリストア

下記コマンドを使って開発環境に本番環境DBのバックアップをリストアします。
下記のような実行結果になればOK。

$ pg_restore --verbose --clean --no-acl --no-owner -h localhost -U user_name -d db_name backup_file_path
省略
pg_restore: setting owner and privileges for INDEX "public.taggings_idx"
pg_restore: setting owner and privileges for INDEX "public.taggings_idy"
pg_restore: setting owner and privileges for FK CONSTRAINT "public.favorites fk_rails_72d9d9e5bf"
pg_restore: setting owner and privileges for FK CONSTRAINT "public.favorites fk_rails_d15744e438"
title memo
user_name DBのユーザー名※1
db_name 対象のDB名※2
backup_file_path バックアップファイルのパス

※1:DBのユーザー名の確認方法 rails dbコマンドを実行し、posgresqlから下記コマンドを実行して確認

$ rails db
$ db_name=# SELECT usename FROM pg_user;
 usename
---------
 UserName
(1 row)

※2:DB名の確認方法 database.ymldatabaseの項目を確認

database.yml

development:
  <<: *default
  database: appname_development

参考

www.workabroad.jp

以上

Ruby on Rails:ファビコン(タイトルアイコン)の設定方法

はじめに

Ruby on Railsで作成したWebアプリケーションにファビコンを設定する方法をメモφ(..)

設定方法

app/assets/imagesフォルダにファビコン用の画像を配置し、application.html.erb内に下記を記述します。

application.html.erb

# favicon.pngは任意のファイル名に変更
<%= favicon_link_tag 'favicon.png'%>

ブラウザのタグにファビコンが設定されます。

f:id:madogiwa0124:20170903113906p:plain

以上

Googleの検索結果にページが表示されない場合の対処法

はじめに

最近作ったWebサービスが、全然googleの検索結果に乗らなくて悲しかったので、対処法をメモφ(..)

Google検索の仕組み

Google では、「ウェブ クローラ」と呼ばれるソフトウェアを使用して、公開されているウェブページをクロール(情報を取得)します。最もよく知られているクローラは「Googlebot」です。クローラは、ユーザーがウェブ上でコンテンツを閲覧する場合と同じように、ウェブページを見て、ページ上のリンクをたどります。リンクからリンクに移動し、これらのウェブページに関するデータを Google のサーバーに蓄積していきます。

クロールとインデックス – 検索サービス – Google

通常では、GoogleのWebクローラーがWebページを自動的に検知し、サーバー上に蓄積していくが、リンク等が貼られていない段階では中々見つけて貰えないようです。。。

Googleへ登録リクエストを送信

下記のページからgoogleへWebページの登録リクエストを送ることが出来ます。
私の場合は、登録リクエストの送信後、5分かからずに検索結果に反映されました…!゚゚( ゚д゚ )クワッ!!

www.google.com

Googleへの登録有無の確認

対象のWebページがGoogleに登録されているかどうかは、site:Wenbページのurlで検索すれば確認できます。

f:id:madogiwa0124:20170903104754p:plain

検索結果にWebページが表示されてればOKです。

参考

officehit.biz