お久しぶりです。井出です。 前回の記事から１年経ちましたね。 今年もやってきましたアドベントカレンダー！ 昨日は若手のホープ、ダニエル・バレンボイムが大好きなダニーさんが記事を書いてくれました。 記事はこちら 中途で入ったイケイケ系の彼ですが、 サーバばりばり触れるようになってきていて将来有望です！ 入社してからの振り返り記事とのことで プラコレが気になる方は、ぜひ雰囲気を感じてもらえたらと思います！ ダニーさんの流れで、自分も今年の振り返りをしてみようと思います。 去年まで自分のメイン言語はPHPでしたが、今年からRubyをメインにシステム開発していました。 記載方法が独特で最初は苦しめられましたが、振り返ってみると凄い楽しい言語です。 まだまだ理解できていない部分もあるので、来年はより深く理解できるよう進めていきます！ そんなこんなで、rubyのFWであるRailsで有名なサーバアプリ

みなさまいかがお過ごしでしょうか。 あっという間に今日は12月25日、つまりクリスマス つまりアドベントカレンダー最終日です。 早かったような、遅かったような、そんな１年がもうすぐ終わろうとしています。 僕にとって入社して初めてのクリスマス＆年越しです。 そんな１年の最後は友達と呑んだくれて寝正月ならぬ飲正月を過ごそうと着々と計画をしております。 もちろんコードもたくさん書く予定です。 さて、僕がこのアドベントカレンダー最終日を選んだ理由、それは 「クリスマスが１年で一番好きな日だから」 です。 誕生日とかよりも全然好きです。 なのでしっかり祝いたいのです。 #どうやって祝うか さてどうやって祝いましょう。 クリスマス感も欲しいけど、なんかJSが書きたいな、なんとなく。 ##そうだ、クリスマスカードを書こう ということで個人的に、クリスマスといえばクリスマスカードなのでクリスマスカードを書

プラコレアドベントカレンダーもラストスパート！こんにちは、森です！ 仕組みをちゃんと理解するには実装してみることが一番！ということで、N-gramの中でも一番実装が簡単なuni-gramをjsで実装してみました！ 目次 全文検索とは uni-gram インデックスの作成 文章にdocument IDを振る 文字列の分割 文字位置付与 トークンごとに位置情報をまとめる トークンをキーに引けるように保存 インデックスから検索 検索文字列をトークンに分割 インデックスからトークンのデータを取得 取得したデータをつなぎ合わせる 実装 動かし方 インデックスの作成 インデックスから文字列を検索 コード 参考文献 最後に 全文検索とは まず最初に全文検索とはなにかってことですが、Wikipediaで調べてみました「コンピュータにおいて、複数の文書（ファイル）から特定の文字列を検索すること。「ファイル名

こんにちは！ アドベントカレンダー23日目（プラコレでは12日目)となりました！ 沖縄でデザインとフロントコーディングをやっています、しげまです。 しげまは漢字で書くと「志慶真」と書きます！ 文字だけ見ると角刈りのおじさんを想像するひともいるかもしれませんが ロン毛の女子ですー！ 趣味は飲酒です！ よろしくお願いします！ 自作PCを作る仕事→カートリッジに黒い粉を詰める仕事→事務→アパレル→キャバクラ→動画制作 と様々な職業を経由して、デザイナーになることができたあの日から早7年。 たくさんのクライアントさまに出会い、苦しくも楽しくおもしろおかしくデザイナー歴を積んできました！ 人生初のアドベントカレンダーは 今までの経験の中で私が困惑した依頼や、衝撃的な言葉についてまとめてみたいと思います！ デザインをされている方や同業の方などに「あるあるー！」と共感してもらえたらうれしいです☆ わたし

みなさまこんにちは！ アドベントカレンダー22日目（プラコレでは11日目)ですね！ 冒険法人プラコレの新卒デザイナーのたなべです！ アドベントカレンダーというとエンジニアさんのお祭りというイメージが強く、前々から存在は存じてはいたのですがまさか自分がそのアドベントカレンダーに参加することになるとは思わずビビリちらしております。 お手柔らかにお願いします！ 今回はSNS広告クリエイティブについてお話しようと思います。 私はプラコレに入社前からインターンとしてジョインしていたのですが、 当時からクライアント様の広告クリエイティブ作成を任せていただいておりました。 プラコレはSNSによって大きく成長してきた会社なので、 そのノウハウを教えていただきながら 入社して半年以上経った今でも クリエイティブ制作をさせていただいております。 そんな中で私がいつも悩んでいるのが、どのくらいユーザー目線の オ

アドベントカレンダー初挑戦！21日目（プラコレ的には10日目） こんにちは！横田です。 不適切なところがありましたらご指摘いただけると幸いです。 よろしくお願いします！ 今一度見直したい「継承」 フロントをやっていて、そこまで日は浅くないのですが、これまであまりcssプロパティの「継承」について深く考えたことがありませんでした。 親要素からプロパティを指定していって、子要素で効いていなかったらまた指定しよう、ぐらいでした。 しかしたびたび思うのです。「またcolor: #555;って書くのか...」と。 そこで、継承についておさらいしてみました。 Sassなどでスマートに書ける今、変数や関数をつかってかっこよく書けるようになりましょう！ 継承とは 親要素のプロパティの値が、子要素に引き継がれることです。 プロパティによって継承されるものとされないものに分かれます。 継承されるプロパティ 使

はじめに 今回、はじめてアドベントカレンダーなるものに参加することになりました松原です。 よろしくお願いします！ まずは簡単に自己紹介 沖縄のIT企業でリゾートウェディングやマリンスポーツ＆アクティビティのポータルサイトの運用をしています。 色々とあって今年、約５年ぶりにエンジニアとして復帰したのですが周りについていくのに必死で、浦島太郎状態ですが、これをキッカケに学んだことをアウトプットしていきたいと思います！ ここからが本題 さて、今回はちょっと前から気になっていたコマンドラインからブラウザの動作確認ができる「Headless Chrome」に関して書いていこうと思います。 「Headless Chrome」とは まず「Headless Chrome」とは通常はGUIを通してChromeを実行しますが、Headless Chromeはコマンドラインを通して実行します。つまりGUIを持た

みなさま、こんにちは。 プラコレアドベントカレンダー2019も折り返して、8日目。 冒険法人プラコレのデザイナーzukaです。 （投稿が遅れてしまいました。本当に申し訳ございません。） なんだかんだとデザイナー歴３年目。 少しずつ社内で力になれることも増えて、毎日充実しております。 令和初のクリスマスも間近に迫り、 女性率の高いプラコレ社内は一層明るい会話も飛び交っておりますが、 先週、信じられない発言が私の耳をつんざきます。 “もう、自分でつくれちゃうから” えぇ…………。 私たちはDressy（ドレシー）というブライダル系メディアを運営しており、 多くの花嫁さまのハートをきゅんとつかむようなコンテンツを 365日毎日発信し、業界へ新しい価値を提供しております。 なかでもデザイナーの役割といえば、 良質なグラフィックを作り出し、企画を盛り上げること。 かつての広告バナー100000000

「完璧な検索エンジン最適化などといったものは存在しない、完璧な絶望が存在しないようにね」 村上春樹の処女作「風の歌を聞け」の始まりの一節を拝借して始まる。 書き初めに困ったらだいたいこの書き出し方をすれば良いとさえ思っている。 さて2019年も残すところ、わずかになり、世間の喧騒も賑わいと忙しなさにあふれていると思う今日この頃いかがお過ごしでしょうか。 私、プラコレのアドベントカレンダーに参加させていただいている高木と申します。 オッスンさんよりバトンを受け取り本日担当させていただきます！ありがとうございます。 サイト制作とか、検索エンジン周りのことを携わらせていただいた前職場、 現在は、フロントのエンジニアをメインに携わらせていただいております。 検索エンジン周りのことを少々書いていきたいと思います。 2019年、検索エンジン周りは久しく大きな変化を見せずともしっかり変わりつつも根本は変

またお会いしましたね また登場しました、オッスンです。 アドベントカレンダーも、もう直ぐ折り返し地点ですね。 後半も色んなクリエイターさんが投稿されるので期待しかなーい！ 私、基本的にサーバサイドをメインにお仕事しているのですが 最近フロントにも興味が出てきて、且つ仕事で触る機会も増えてきました。 フロント面白いですね。 まだまだ知るべき知識がたくさんありますが、 これから勉強して行こうと思います！ 今回はペーペーフロント技術の私が 開発する時に役に立ってるデベロッパーツールの機能をご紹介できればと思います。 network 後にも先にもnetworkタブ。 感謝しかない機能がモリモリです。 通信速度の調整 ・モバイル環境や通信速度が遅い環境で確認したい時、なんと通信速度の調整が可能に！ ヘッダ情報、リクエストデータの確認 ヘッダ情報やGETやPOSTのリクエストデータを確認する時に超役立

会社のアドベント用です 最近アイコンなどでよくみかけるSVG画像。 ラスターのpng/gifと違い、ベクターなのでどんな拡大縮小にも耐えることができます。Retina対応が当たり前な今どきのWEB製作時に、１つのファイルのみで対応できるので大変ありがたいです。 ※写真等色と形が複雑なものは引き続きjpg（最近はWebPという選択肢も）が優秀です。 各要素のお役目をメモっておきました。svgアニメをかけるとき理解しておくと便利＆イラレ等編集ソフトを使わずエディター内で画像編集を終わらせることができて結構便利。 軽量化 SVGOMG – SVGO’s Missing GUI Svgの時点でよほどのことがない限りpngより軽くなっているとは思うのですが、上記ツールで不要箇所を削除できます。 ちなみに手動でするときはタグに下記4点があればOKだと思っています。 viewBox= xmlns="ht

みなさん、アドベント楽しんでますかー！？ どうもオッスンこと、井出です。「で」は手ではなく、出の井出です。 私も記事を書くのが初めてなので 内容があっちこっち行ってるかと思いますが どうぞお手柔らかに。 記事を書くに辺り、2019年を振り返っていたのですが ほぼ毎日LINEの事やってたなーって思ったので 題材にすることにしました。 ただ、基本的な仕様はLINEが提供してる仕様書（こちら）が分かりやすく また、分かりやすい記事も色々あるので 自分は少しコアな部分を書こうかなって思います。 個人的にはこちらの記事で凄い詳しく書かれています。 記事内容 基本的な仕様を説明。その後 レスポンスデータの内容を踏まえて、さらに取得できるデータがあるよ！ という部分。これは解析に少し時間が掛かった部分なので 今後開発するエンジニアさんに少しでも役立てばと思います まずはMessaging APIを使うた

こんにちは。 みなさんハッピーアドベント！ 楽しんでいらっしゃるでしょうか？？ 冒険法人プラコレ新卒エンジニアの澤岻（タクシ）です。 我らがプラコレはアドベントカレンダー初参加です！ もちろん僕自身も初参加。 どうぞ、どうぞ、お手柔らかにお願いいたします！ 今回はズバリdropzone.jsについて。 今年、とあるアプリケーションの開発の機会があり、 その際アップロード機能を作る必要があったのですが、 ボタンアップロードでは味気ないので、よく見かけるドラッグ&ドロップ式にすることにしました。 その際、導入も比較的しやすい　＋　UI UX的にも良さそうなdropzone.jsを使うことにしました。 dropzone.jsとは 導入 dropzone.jsをダウンロード ファイルを読み込ませる アップロードしてみる 動的に生成する オプション・イベント 最後に dropzone.jsとは dr

こんにちは。 みなさんハッピーアドベント！ 楽しんでいらっしゃるでしょうか？？ 冒険法人プラコレ新卒エンジニアの澤岻（タクシ）です。 我らがプラコレはアドベントカレンダー初参加です！ もちろん僕自身も初参加。 どうぞ、どうぞ、お手柔らかにお願いいたします！ 今回はズバリdropzone.jsについて。 今年、とあるアプリケーションの開発の機会があり、 その際アップロード機能を作る必要があったのですが、 ボタンアップロードでは味気ないので、よく見かけるドラッグ&ドロップ式にすることにしました。 その際、導入も比較的しやすい　＋　UI UX的にも良さそうなdropzone.jsを使うことにしました。 dropzone.jsとは 導入 dropzone.jsをダウンロード ファイルを読み込ませる アップロードしてみる 動的に生成する オプション・イベント 最後に dropzone.jsとは dr

はじめに こんにちは！プラコレのアドベントカレンダー2日目です！！ 10月からプラコレでお世話になっている森下です。 私は9月まで看護師をしていました 日々業務を行いながら勉強という感じですが、 今回は最近教えていただいたcssでのアニメーションについてお話しようと思います〜！ どうかお手柔らかにお願い致します CSSだけでアニメーションを作る方法って？ アニメーションというと、JavaScriptやjQueryを思い浮かべ、 難しそうというイメージを持つ方もいるかと思います。 ここではCSSで簡単にアニメーションを実装させる方法をサンプルを一緒にご紹介しようと思います CSS3 でアニメーションを実装する方法は大きく分けて以下の2種類があります。 ・ transition プロパティでの定義 ・ animation プロパティでの定義 【Transition】 ・始めと終わりのみ指定可能

Lambda関数の作成 関数は別ファイルにしても良いですが、今回は簡略化のためにすべて同じファイルに作成することとしています。 まずは共通で読み込むライブラリの読み込みをします。日付の処理でdayjsを使用しているため事前にnpm install dayjsをしておいてください。 コードの途中にコメントを入れているような感じで書いているので以下現れるコードをつなぎ合わせるとすべてのLambda関数が完成します。 'use strict'; const AWS = require('aws-sdk') const docClient = new AWS.DynamoDB.DocumentClient({region: 'ap-northeast-1'}) const dayjs = require('dayjs') アクセスを日毎に記録する関数 アクセスを記録するためにaccessという関数