Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Arcana meetup#43

19 views

Published on

Arcana meetup#43

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Arcana meetup#43

  1. 1. 三郭 文系新卒社員が 片思い掲示板サイト 『かたこい!』 を作ってみた! Arcana Meetup #443 軽部 凌
  2. 2. 三郭 自己紹介 • 軽部 凌 • 今年の四月に入社 • 文系からIT業界へ! • HTML・CSS・PHPは大学教授に教えてもらった。 • Pythonは仮想通貨のZaifの自動売買ツール作りで勉強(失 敗)
  3. 3. 三郭 弊社に入社して初めてのサイト製作 使用言語 • HTML • CSS • PHP • Javascript フレームワーク • Laravel • Bootstrap
  4. 4. 三郭 片思い掲示板サイトにしたきっかけ 恋愛系サイト・掲示板は今でも廃れてない ↓ もしかしたら需要あるかも!?
  5. 5. 三郭 作業開始して約1ヶ月目の 試作品がこちら…!
  6. 6. 三郭 Javascript
  7. 7. 三郭 アルカナ内部からの感想 •サイト名が怖い (田尾さん) •なんかキモい (田尾さん) •メンヘラ掲示板かよwww (田尾さん)
  8. 8. 三郭 なんとかしなければ…
  9. 9. 三郭 修正点 • タイトルロゴの変更 • ナビゲーションバーの上部固定 • Bodyの背景に画像を挿入 • 全体的な配色の統一 • IFTTTでRSSを取得して自動でTwitterに記事を投稿 • Sitemap・サチコ・アナリティクス・metaタグの設 置 ◉アイキャッチ画像を動的に生成
  10. 10. 三郭 アイキャッチ画像を動的に生成したい!
  11. 11. 三郭 • 固定のアイキャッチ画像を設定 ↓ • 同じ画像の連続は鬱陶しい ↓ • 記事ごとの画像を動的に 生成すればいい
  12. 12. 三郭 • 右上の画像の濃いピンクの行に タイトル、白い3行に内容を 自動で挿入し 保存したい! タイトル 本文を 3行に分ける
  13. 13. 三郭
  14. 14. 三郭 • <meta name="twitter:image” content="@yield('ogp_image')"/> • 記事ごとにタイトルと内容が 自動で挿入されて画像が 保存されるようになった! • タイトル、本文にそれぞれ 文字数の出力制限をして、 改行コードと絵文字を消す ヘルパ関数を作った! • 記事ごとに変わった画像に なったことで見栄えがGood!
  15. 15. 三郭
  16. 16. 三郭 綺麗なサイトになりました!
  17. 17. 三郭 『かたこい!』サイト紹介 • 『かたこい!』 • https://katakoi.me • Twitterアカウント • @katakoi_me
  18. 18. 三郭 サイトで記事を投稿するとTwitterに アイキャッチ画像付きで自動投稿されるので ぜひ試してみてください!
  19. 19. 三郭

×