スキプラ@元エンジニア

ベンチャーでweb系エンジニア → 大手IT企業でプロダクトマネージャー(副業エンジニア) 元エンジニアとしての知識と、UXを意識したデザイン思考で、 副業エンジニアさんたちの稼ぐ力をブチ上げる情報を発信しまくります!

スキプラ@元エンジニア

ベンチャーでweb系エンジニア → 大手IT企業でプロダクトマネージャー(副業エンジニア) 元エンジニアとしての知識と、UXを意識したデザイン思考で、 副業エンジニアさんたちの稼ぐ力をブチ上げる情報を発信しまくります!

マガジン

  • JavaScript徹底入門編

    JavaScriptを基礎からきっちりと学ぶことで、なぁなぁでjQueryを理解しちゃって後々バグを引き起こした時やうまく動かない時にこまる。ということを防ぐ形式のマガジンです。 (ちなみにそれは過去の僕。笑 徹底的に基礎から学んで、ECサイトの構築に必要なjQueryもしっかり学んでいける構図にしています。

  • 【全部無料】レスポンシブデザイン徹底入門【初級編】

    Progateを卒業して基礎は学んだけど、実践になると模写ができない。。 とお悩みの方へ。 実際にProgateの模写を通してレスポンシブデザインの基礎がすべて学べるマガジンです。

  • コーディング徹底練習note 〜HPを作ってみる〜

    Progateを卒業して基礎は学んだけど、いざサイト作成・模写となると中々うまく一歩目が踏み出せないあなたへ。 まずはサイト全体を箱の塊で捉えて、徐々に形にしていくスタイルで1つのサイトをスラスラと作り上げていく工程を、実際にぶち当たる悩みなどを一緒に体験しながら解決していくnoteです。 ぜひ読みながらでも、感想を@riman_skillplusにください。

最近の記事

  • 固定された記事

【無料公開】コーディング徹底練習note ①スピリチュアル系HP【ヘッダー編】

この記事の対象読者皆さんどうもこんにちは! スキプラ@riman_skillplusです! Progateを卒業して、いざサイト模写に取り組んでるけど、中々1つのサイトを完成させたことが無い。 模写をしてるとき、ヘッダーメニューで早速躓く。挫折。。な人。 とにかくポートフォリオとして1サイトを完成させたい。 高速でポートフォリオサイトを作るコツを学びたい人。 完成形のイメージこれから、約4-5回に分けて、コーディング徹底練習noteと称して、このようなHPを作ってい

    • flexをマスターする【justify-content編】

      こんにちはスキプラです。 いつもは元エンジニアとしての経験に基づいて【超わかりやすく】基礎的かつ実践で使える情報を発信しています。興味があればフォローお願いします。 今回は、flexをマスターして、webサイトの制作をグッと楽にしちゃおうぜ!という趣旨です。 今日のゴールflexのjustify-contentを駆使して、このような企業HPのヘッダーを作るのをゴールにします。 慣れれば5分程度で作れます。楽しみながらやっていきましょう! justify-contentと

      ¥100
      • 【GAS超実践】TwitterのAPIを叩いてチャネルの情報を自動取得する - ⑤スプレッドシートに書いたチャンネルIDをもとに自動でチャンネルの動画情報一覧を取得&書き込みする!

        ゴールイメージさて、今回はいよいよ最終章です!今回ご紹介する「Youtubeの動画情報をスプレッドシートに自動更新する」という案件は、クラウドソーシング系やココナラなどのサービスで5000円〜50,000円でやり取りされてる美味しい案件です。 ゴールのイメージとしては、このように、自動取得したいチャンネルIDの一覧を記載したシートを用意して。 ここで実行すると、まずチャンネルの詳細な情報が自動で更新されます。(登録者や動画数・総視聴数が一発でわかるのは有益ですよね) そ

        ¥4,980
        残り2/5
        • 【GAS超実践】TwitterのAPIを叩いてチャネルの情報を自動取得する - ④ 動画の詳細情報を取得してみよう!

          今日のゴール前回と似たような、チャンネル情報が記載されているページで、「動画情報自動取得」ボタンをクリックすると... チャンネル名のシートを自動で作成して、動画の詳細(動画名・公開日時・視聴回数・高評価数・低評価数・コメント数)を自動で取得してシートに書き込みます。 これができるだけでもだいぶテンション上がりますね😍😍 1. videosメソッドの仕様を調べるさて、毎度おなじみとなってきましたAPIのドキュメントを読む時間です。APIのドキュメントを読むコツは段々分か

        • 固定された記事

        【無料公開】コーディング徹底練習note ①スピリチュアル系HP【ヘッダー編】

        マガジン

        • JavaScript徹底入門編
          6本
        • 【全部無料】レスポンシブデザイン徹底入門【初級編】
          6本
        • コーディング徹底練習note 〜HPを作ってみる〜
          5本

        記事

          【GAS超実践】TwitterのAPIを叩いてチャネルの情報を自動取得する - ③ チャンネルの動画一覧を取得してみる

          今日のゴールTwitterAPIのsearchメソッドを使って、「森内チャンネル」の動画一覧を取得して、「森内チャンネル」のシートを作ってそこに自動的に書き込んでいきます。 1. 予め用意した「チャンネル情報取得」というボタンをクリックすると... 2. 森内チャンネルのシートが作成されて、全動画のID/名前/公開日時を自動的に書き込んで行きます はじめにまず、TwitterAPIを使うにはAPIキーが必要となりますので、この発行がまだの方は、以下のnoteを参考に取得

          【GAS超実践】TwitterのAPIを叩いてチャネルの情報を自動取得する - ③ チャンネルの動画一覧を取得してみる

          【GAS超実践】TwitterのAPIを叩いてチャネルの情報を自動取得する - ②Twitter APIでチャンネル情報を取得してみる

          ゴール今回は将棋の森内さんの森内チャンネルのデータを引っ張ってこようと思います。 ↓このようなシートを用意してスクリプトを実行すると... ↓ 自動でチャンネルの情報を持ってきて埋めてくれます! ってところまでやってみましょう!ワクワクしますね! 1. 準備まず、実行にはAPIキーが必要なので、前回のAPIキー発行がまだの方はこちらの記事をご覧になって、APIキーを用意してください。 さて、準備は良いですか!?やっていきましょう! 2. APIのドキュメントの読み

          【GAS超実践】TwitterのAPIを叩いてチャネルの情報を自動取得する - ②Twitter APIでチャンネル情報を取得してみる

          【GAS超実践】TwitterのAPIを叩いてチャネルの情報を自動取得する - ①Twitter APIの利用設定編

          ゴールさて、今回はGASを使ってTwitterAPIを叩いてチャンネルの【チャンネル名】【登録者数】【総再生数】【投稿開始日】【投稿動画数】を取得します。 さらに、チャンネルごとにシートを作って、そのチャンネルの動画一覧を取得して【公開日】【再生数】【高評価数】【低評価数】【コメント数】を取得していきます。 ↓ こんな感じでチャネルのIDだけ入れたシートを用意して、スクリプトを実行すると、、 ↓ チャンネルの詳細情報を自動的に更新してシートを埋めてくれます! ↓ しかも

          【GAS超実践】TwitterのAPIを叩いてチャネルの情報を自動取得する - ①Twitter APIの利用設定編

          GAS超実践編① - 複数のメールアドレスに一斉送信

          はじめに「営業メールを1通1通手動で送信してる」「送信先ごとにメアドと会社名を変えて送信してる」 こんな面倒な処理に時間を取られてませんか? 職場の営業が新規営業でまさにこれをしてました。1日4時間くらい...w 昼飯を食べながらその話を聞いて、午後1時間くらいで一括送信のGASを作ってあげたらめちゃくちゃ感謝され、「作業時間が4時間 → 5分」に。部署の必須ツールとなっていました。笑 このような、一括送信もGASで簡単にできちゃいます。 ※ ただし、GASからメールを

          GAS超実践編① - 複数のメールアドレスに一斉送信

          GAS超入門⑦ - LINEに通知してみる

          はじめに「LINEでバイトのシフトを通知する」「今日の予定を朝9時に送信する」など、身近なLINEを使うと便利な生活を実現できます。 さらに、webhookを使うことで、LINEから出社したよー、退勤したよーとつぶやくだけで自動的に勤怠システムを作れたりもします。 (これだけで3-5万円くらいで受注できると思います) 今回はまず、LINEに通知するところまでやってみましょう。 LINEのトークンを取得するトークンを取得するには以下のLINE Notifyのページへ行っ

          GAS超入門⑦ - LINEに通知してみる

          GAS超入門⑥ - chatworkに通知してみる

          はじめに「昨日の売上を毎日スプレッドシートで集計してChatworkにコピペして通知してる」 「残業時間が45時間を超えそうな人を抽出してChatworkに通知してる」 こんな面倒な仕事してませんか? それ、全てGASで自動化しましょう! という訳で今回はGASでChatworkに通知する方法を学んでいきます。これでスプレッドシートと連携して、上記のような面倒な処理を自動化して、業務効率化したり、これらの案件を30,000円で受注したりと、金を稼ぐ力を手に入れましょう!

          GAS超入門⑥ - chatworkに通知してみる

          【2020年最新版】chatworkの始め方【画像付きで解説】

          はじめにテレワークも浸透してきた2020年夏。企業から「Slackやってます?」「chatwork使ってます?」と、聞かれることも多いでしょう。 「え、ちゃ・・ちゃっとわーく・・?」とならないように使い方を覚えておきましょう! アカウントを登録するまずはchatworkの製品ページへ行って新規登録を行います。 製品ページから、「新規登録(無料)」のボタンをクリックすると、メールアドレスを入力する欄が出てきますので、利用したいメールアドレスを入れて登録します。 このよう

          【2020年最新版】chatworkの始め方【画像付きで解説】

          GAS超入門⑤ - Slackに通知してみよう

          はじめに今回は、GASを使ってSlackへの通知方法を学びます。これを覚えておくだけで以下のようなことが簡単にできるようになります。 ・ 月曜日の朝9時に営業状況をまとめてSlackに通知 ・ 今日の予定を自分のSlackに通知する秘書botの作成 ・ 残業時間が45時間を超えそうな社員のリストを通知 ・ Twitterのフォロワーの増減数をSlackに通知 どうですか?夢が広がりますね! では早速やっていきましょう! SlackのIncoming Webhooks登録

          GAS超入門⑤ - Slackに通知してみよう

          【2020年最新版】Slackの始め方を画像付きで解説

          まだSlackを使ったこと無い人向けに、Slackの始め方を丁寧に解説していきます。 1. 以下のリンクから、自分のメールアドレスを入力して、「次へ」をクリック2. メールに届いた6桁のコードを入力 3. ワークスペースの名前を入れます僕は「スキプラ」にしてみました。 4. 最初にやり取りするチャンネル名を入れます今回は「GAS連携テスト」という名前にしました。 5. 一緒にやり取りするユーザーを招待する今回は実験用で1人で利用するので、「後で」をクリックしてこの過程

          【2020年最新版】Slackの始め方を画像付きで解説

          GAS超入門④ - メールを送ってみよう

          はじめにこのGAS超入門シリーズで、最初はスプレッドシートの操作方法を学んできました。 スプレッドシートを操作できるようになるだけで、クラウドワークスやLancersで5000円~50,000円の案件を受注できるようになります。 さらに、実際の案件では「結果をメールで送信したい」とか「Slackへ定期的に送信したい」「chatworkに送りたい」などの要件が追加されることが多いです。 そこで今回からはGmail/Slack/Chatworkへ送信する方法について学び、より

          GAS超入門④ - メールを送ってみよう

          GAS超入門③ - 計算結果を別のシートに書き出してみよう

          はじめにこれまで、2回に渡ってGASを使ってスプレッドシートを扱う方法を学んできました。 今回は、GASを使って特定のシートの値を計算して計算結果を別のシートに書き出す方法を学んで行きます。 これができるようになると「学校で、クラスごとの平均点数を出してランキング出したり」「会社で担当部署ごとの営業成績を一括で計算して、目標が未達の部署のみアラートを出したり」などが簡単にできるようになります。 スプレッドシートを用意するまずはスプレッドシートを用意しましょう。今回はこのよう

          GAS超入門③ - 計算結果を別のシートに書き出してみよう

          【保存版】JavaScriptのオブジェクトのループの方法を全て覚えとこう

          はじめにJavaScriptで連想配列を使う際にオブジェクトを使いますが、オブジェクトをループ処理するには、配列とは異なり、forやforEachが使えません。 JavaScriptのオブジェクトの特徴を学びながら、ループする方法をマスターしていきましょう! 今回も理解度チェック付きなのでぜひチャレンジしてみてくださいね。 オブジェクトの宣言の方法オブジェクトの宣言には3つの特徴があります。 ① オブジェクトは{}で囲って宣言 ② keyとvalueのセットは:(コロ

          【保存版】JavaScriptのオブジェクトのループの方法を全て覚えとこう