那覇市文化財をGoogleマイマップで公開してみた

の2023年5月12日の琉球新報に以下の記事が掲載され、興味があり実装してみました。

新ビジネスの種、あるかも 沖縄県がオープンデータサイト開設、
県内全41市町村と民間団体が掲載対象
https://ryukyushimpo.jp/news/entry-1708664.html

沖縄県は4月、県内全41市町村と民間団体が公開する
「オープンデータ」をまとめた
サイト「沖縄オープンデータプラットフォーム」を開設した。
2日現在、48種510個のデータが掲載されており、
それぞれダウンロードできる。
さらに、県内企業のデータ活用事例を紹介したり、
実際にデータを視覚化したりするツールの使い方も紹介している。

目次

  1. 前提条件
  2. 手順
  3. マイマップ公開

  1. 前提条件
    BODIKのAPIからJSON形式で取得
    GoogleAppsScrip(以下 GAS)tを使用するため、Googleアカウントが必要
  2. 手順
    1. Googleスプレッドシート(以下スプレッドシート)を作成
    2. データ取得API
      GASを使ってBODIKのAPIからデータを取得するために、データのリソースIDを把握しておく必要があります。
      今回は、那覇市文化財一覧のリソースIDは、以下の斜字部分です。
      https://data.bodik.jp/dataset/okinawa-dpf_naha_city/resource/889ddb57-cf16-438e-ad69-25be2c98ec3a
      上記のURLの情報をスプレッドシートに展開します。
    3. GAS編集
      Apps Scriptを開きます

      プログラムコードを記述します。

      function myFunction(){
       
      }

      と記載されている部分を、以下のコードに書き換えます。

function getFacility() { 
  // API request 
  var resource = '889ddb57-cf16-438e-ad69-25be2c98ec3a'; 
  var requestUrl = `https://data.bodik.jp/api/3/action/datastore_search?resource_id=${resource}`; 
  var response = UrlFetchApp.fetch(requestUrl); 
  var res = JSON.parse(response.getContentText()).result.records; 

  // データ項目のうち「名称」「住所」「緯度」「経度」のみを取得 
  var values = res.map((content) => { 
    return [content['名称'], content['住所'], content['緯度'], content['経度']]
  }); 

  // データの項目名をセット 
  var title = [['名称', '住所', '緯度', '経度']]; 
  // 項目名とデータを結合する 
  values = [...title, ...values]; 
  // 結合したデータをスプレッドシートに出力する 
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); 
  sheet.getRange(`A1:D${values.length}`).setValues(values); 
}

デプロイします。


実行します。

スプレッドシートを確認するとデータ取得されていることが確認できます。

  1. マイマップ公開
    1. Googleマイマップを開きます。
    2. インポートを選択します。
    3. インポートしたいスレッドシート(那覇市文化財一覧)を選択します。
    4. 指示に従い選択していきます。
      1. 目印を配置する列の選択
        緯度と経度を選択
      2. マーカーのタイトルとして知丗する列を選択します。
        名称を選択
      3. 公開!

自然言語からHTMLとCSS、JSまで生成してくれるAIツール

AIによってプログラムを生成するツールは色々あるのですが、HTML・CSS・JSを生成してくれる日本語対応のツールをご紹介します。

JIT.codes
※利用にはメールアドレスの登録が必要です。


『シンプルモダンなログインフォーム IDとパスワード入力 IDはメールアドレス パスワードは8文字まで』
というオーダーをしてみました。
背景が黒なので文字が見えにくいですが、必要な物は生成されています。

<div class="login-form">
  <h2>Login</h2>
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" placeholder="Enter email" required>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" placeholder="Enter password" maxlength="8" required>
    </div>
    <button type="submit">Login</button>
  </form>
</div>

生成されたHTMLのソースを見てみると、最初のinputはtypeがemailになっていますし、パスワードのinputはmaxlengthが8に設定され、オーダー通りとなっています。

次はJSも生成されるよう、下記の内容でオーダーしました。
『ハンバーガーメニュー クリックするとアイコンが×にアニメーションで変化する メニューが開いている場合はbodyのスクロールを止める』

ハンバーガーメニュー開閉のJSは動いたのですが、『アイコンが×にアニメーションで変化する』が理解できなかったようで、生成されませんでした。(記号の×をcorss markに変更して再度オーダーしましたが、結果は変わりませんでした。)

画面上部の「Explore」からは、誰かがオーダーしたものを見ることができます。(私が確認した時点では、生成されたはずのJSのコードがごっそり抜けていますのでご注意。)
https://jit.codes/explore

生成されるものは完璧ではありませんが、ベースとして使えば、イチからコーディングするより時間短縮になるかなと思います。

画像生成AI「Stable Diffusion」を使ってみる

「Stable Diffusion」って?

「Stable Diffusion(ステーブルディフュージョン)」とは、ユーザーから入力されたテキストをもとに画像を生成する「訓練済のAIモデル(Diffusion Model)」を搭載した画像生成AIです。ユーザーの生成したい画像イメージを、英単語で区切って入力することで、様々な画像を生成することができます。
(例:「夜の東京タワー」の場合→「Tokyo Tower at night」など)

どうやって利用するの?

Stable Diffusionの利用方法は、

①Webアプリケーション上の環境で生成する
②自身で作成した環境にStable Diffusionをインストール、またはプログラムコードを書き込んで生成

の二通りの方法があります。今回は、手軽に利用できる①の方法でStable Diffusionを利用してみます。

利用までの流れ

まずはStable Diffusionのページ(https://stablediffusionweb.com)にアクセスします。
URLにアクセスすると上記のページが表示されるので、下にスクロールしていくと「Stable Diffusion Playground」と書かれた見出しの下にテキストボックスがあります。そこにAIに画像生成を行ってもらうテキスト(呪文)を入力します。

※以下のようにうまく表示できない場合があるので、その際はページの再表示で解消することがあります。

早速画像を生成してみる

ページにアクセスして準備が整ったら、早速呪文を入力して画像を生成してもらいましょう。
最初は簡単なキーワードで生成してみます。「Tokyo Olympics(東京オリンピック)」と入力後、右の「Generate image」で画像を生成できます。
早ければ8~9秒、遅くても1分程度で画像が生成されるので、押下後、しばらく待ってみます。

生成されたら、4つの画像が表示されるので、生成結果を確認してみましょう。
オリンピックの象徴である五輪の画像をメインに生成したようです。

同じものが表示されないか、もう一度同じ呪文で生成をしてみます。
1回目の生成結果と比較すると、より五輪に近い画像が生成されました。このように、同じ呪文でも何回も生成してもらうことで、より自身のイメージに合った画像を見つけ出すことができます。(このように、呪文の試行錯誤や、画像の選定をする過程を「ガチャを回す」と呼ぶようです)

今度は、日本語で入力した呪文だとどのような生成結果になるかを試してみます。

結果は以下のようになりました。
オリンピック要素がなくなり、街並みのような画像や、地図のような画像が生成されてしまいました。
このように、日本語でも生成自体は可能ですが、英単語での生成に比べると、画像生成の精度は落ちるようです。自分のイメージ通りの画像を生成してもらいたい場合は、なるべく英単語で生成をかけるとよいでしょう。

今度は、有名人の名前を呪文にして生成してみます。
人の画像を生成してもらうので、ついでにその人の挙動も含めて生成してみましょう。
大多数に認知されている方がよいので、「タモリ(森田 一義)さんがスターバックスでコーヒーを飲んで休憩している写真」の画像を生成してもらいます。
(上記をDeepL翻訳ツールで翻訳すると、「Photo of Kazuyoshi Morita taking a coffee break at Starbucks.」となりました。)

生成結果は以下のようになりました。
私達が知るタモリさんとは異なる人物が生成されました。
個人名ではあまりうまく描写できていないようですが、右下画像のコーヒーカップに印刷されているロゴと、画像全体のカフェのような背景から、「スターバックス」そのものがどのようなものであるかは認識しているようです。

もしかすると、海外でも認知度の高い人物であれば、うまく生成してくれるかもしれません。
というわけで、今度はシュワちゃんにコーヒーを飲んでもらいましょう。
「シュワちゃんがスターバックスでコーヒーを飲んで休憩している写真」を翻訳して、「Photo of Schwarzenegger taking a coffee break at Starbucks.」を呪文として入力します。(地味に「シュワちゃん」を「シュワルツェネッガー」として翻訳していますね)

生成した結果は以下の通り。
どの画像もそこそこの精度で生成されています。右上の画像が一番シュワちゃんに近いですね。
この結果から、生成で人物やものを模倣できる範囲の基準としては、「世界的に知名度があるかどうか」が一つのラインとなっていそうです。

どんなときに使う?

3つの単語・シチュエーションで画像を生成してみましたが、AIの画像生成が利用できそうな場面を考えてみました。

1.イメージ通りの画像が見つからないとき
→プレゼンテーションなどで画像を利用したい時、自身の想像する画を自動生成してくれます。
2.普段起こり得ないシチュエーションを見てみたいとき
→有名人Aと有名人Bの共演など、自分の夢見たシチュエーションを生成してくれるかもしれません。

最初のうちは、中々イメージ通りの画像を生成してくれないかもしれませんが、一度コツを掴んでしまえば、いつでも好きなときに、自分が欲する画像を用意してくれる便利ツールになってくれるかもしれません。

イメージ通りの画像を生成してくれる点ではかなり便利なので、是非一度利用してみてください。

今回利用したサイト

「Stable Diffusion」:https://stablediffusionweb.com
「DeepL翻訳ツール」:https://www.deepl.com/translator

【Java】MapとListについて

【MapとListについて】

【Mapにつて】
Mapとは、連想配列のことであり、keyvalueをペアとして保持するクラスです。

valueを追加する時にキーを設定し、keyを使ってvalueを検索・取得が可能になります。

【Listについて】
Javaには、配列という、複数のオブジェクトを管理する仕組みがありますが、事前に要素数を決めなければならず、様々な処理がかかる要素に対しての管理には適してるとはいません。。。
そこでListです。

Listは、格納された要素を順番にインデックスを付けて管理することが特徴です。他にも、重複したデータでも格納できる、既存のインデックスを指定して割り込ませるようなデータ追加が可能です。

【MapとListの違い】

Mapはインデックスとなるkeyとそのデータとなるvalueの両方を定義することができます。keyには整数値のほかにString型などの変数なども指定することができます。keyに指定した変数から、valueを呼び出すことができます。

なお、Mapのキーは重複させることはできません。これに対して、Listは要素を格納した順に自動的に整数値のインデックスが生成され、値と紐づけされます。

Listの要素はインデックス番号を指定して、値を呼び出します。keyと関連付けて値を保持する必要がある場合はMapが適しています。

また、Listは要素の値で並び順を替えるソートができますが、Mapはそのままではできません。

【定義の仕方】
MapもListもインターフェースで、インスタンスを生成することができませんが、オブジェクトは宣言できます。
それぞれのインターフェースを実装したクラスのインスタンスをオブジェクトに格納していおり。
基本的に、MapはHashMapクラスを、ListはArrayListクラスといった、インターフェースを実装したクラスを使用しています。
Map<String, Integer> map = new HashMap<>();
List<String> list = new ArrayList<>();

今回は、MapとListの違いと、実装方法まで書いてみました。
応用としてMapのkeyやvalueをList化させたり、Listの値をMapのkeyやvalueにしたりと、いろいろ関連の深い機能なので、興味があったら是非使ってみて下さい。

巷で話題のChatGPTを使ってみました

chatGPTとは

OpenAIが開発した大規模な自然言語処理モデルの1つ。自然言語での対話や文章生成などのタスクに優れた能力を持っており、様々な用途に利用できると期待されています。

ただし、モデルの性質上、完全に正確な回答を生成できるわけではないため注意が必要だそうです。

早速使ってみた

chatGPTはコードの生成を行ってくれるらしく、早速試してみました。

HTMLでテンプレートとなる最もポピュラーなコードを教えて

image.png

なんとびっくり!コードの生成だけでなく、それぞれのタグの解説まで行ってくれるとは…
これは初心者の勉強ハードルがかなり低くなったのではないでしょうか。

次は少しだけ難しいことを聞いてみます。

HTML、CSSを使って右から左に移動する正方形のコードを教えて

image.png

image.png

image.png

上記のコードがたった数秒で作成されてしまいました。
やばい…!!と思いつつもついつい楽しくなってしまい、AIにできるのか?!というかなり難しい質問をしてみました。

番外編

2泊3日で回れるおすすめ観光スポットを教えて。電車の時間を考慮した移動スケジュール表もよろしく

image.png

image.png

回答が途中で切れてしまいましたね…

でもほとんど大丈夫!

image.png

途中で回答が途切れてしまった場合は「続き」と入力すると続きを送ってくれるそうです。
電車の時間も発→着まで書いてくれるとは…
chatGPT恐るべし!

みなさんも気になったら是非使ってみてください。

フレキシブルボックス(フレックスボックス)ー横幅と間隔ー

フレキシブルボックス(フレックスボックス)を利用すると、ボックスを横並び、横幅、高さをフレキシブルにコントロールすることができ、floatよりも柔軟にレイアウトを組むことができます。

使い方

displayプロパティを「display:flex」と指定して、フレックスコンテナを構成します。

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

レイアウトの調整

次のプロパティを利用してレイアウトを調整していきます。

プロパティ 説明
flex / gap フレックスアイテムの横幅と間隔を指定する
★当記事はこちらをご紹介★
order / flex-direction / flex-wrap フレックスアイテムの並び順・並べる方向を指定する
justify-content / align-items / align-self / align-content / margin フレックスアイテムの位置揃えを指定す

フレックスアイテムー横幅と間隔ー

フレックスアイテムの横幅をflexプロパティで、間隔をgapプロパティで調整します。

プロパティ 説明
flex フレックスアイテムの横幅を指定する
gap フレックスアイテムの間隔を指定する

 

flex

flexプロパティでは、伸長比、縮小比、フレックスコンテナのサイズ指定に応じてフレックスアイテムの横幅を決定します。

flexの伸長比

フレックスアイテムの横幅の合計よりもフレックスコンテナが大きい場合、フリースペースをフレックスアイテムに配分します。
例えば、フレックスコンテナの横幅を900pxに指定した場合、300pxのフリースペースができます、このとき、a~cの伸長比をそれぞれ「1」とした場合、フリースペースが「1:1:1」の比率で分割されます。
その結果、100pxずつ配分され、200px、300px、400pxになります。

(a) 適用後:200px(100px + 100px)
(b) 適用後:300px(200px + 100px)
(c) 適用後:400px(300px + 100px)

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

 

変化が分かりづらいので、伸長比率を「0」「4」「1」にした場合、フリースペース(300px)を0:4:1の比率で配分されます。

(a) 適用後:100px(100px + 0px)
(b) 適用後:440px(200px + (300px * 4/5))
(c) 適用後:360px(300px + (300px * 1/5))

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

問題です!伸長比率を「2」「1」「2」にした場合、フリースペースはどのように配分されるのでしょうか?

答え

(a) 適用後:220px(100px + (300px * 2/5))
(b) 適用後:260px(200px + (300px * 1/5))
(c) 適用後:4200px(300px + (300px * 2/5))

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

 

flexの縮小比

フレックスアイテムの横幅の合計よりもフレックスコンテナが小さい場合、フレックスコンテナ横幅サイズ値からフレックスアイテムの横幅の合計を差し引いた値を元に縮小します。

例えば、フレックスコンテナの横幅を480px指定した場合、120pxのフリースペースができます。このとき、a~cの縮小率を「1」とした場合、ベースとなるサイズに縮小率を掛け合わせた100:200:300の比率で分割され、(a)に-20px、(b)に-40px、(c)に-60px配分されます。
その結果、(a)に80px、(b)に160px、(c)に240pxになります。

(a) 適用後:80px(100px-(120px * 1/6))
(b) 適用後:160px(200px-(120px * 2/6))
(c) 適用後:240px(300px-(120px * 3/6))

 

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

これまた、変化が分かりづらいので、縮小比率を「3」「2」「1」にした場合、フリースペース(120px)をベースとなるサイズに縮小率を掛け合わせた300:400:300の比率で分割されます。

その比率(3 00 :4 00 :3 00)の結果、それぞれの横幅は、(a)に64px、(b)に152px、(c)に264px配分されます。
(a) 適用後:64px(100px-(120px * 3/10))
(b) 適用後:152px(200px-(120px * 4/10))
(c) 適用後:264px(300px-(120px * 3/10))

 

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

gap

gapプロパティを利用すると、フレックスアイテムの間に余白を挿入して、間隔を調整することができます。
たとえば、gap:30pxと指定すると、30pxの余白が入ります。

コード例

See the Pen
Untitled
by abridge (@abridge_okinawa)
on CodePen.

おわり

いかがでしょうか。
分かりづらい点があったかと思いますが、訪問頂いた皆さんのお役になっていれば幸いです。

PANTONE COLOR OF THE YEAR 2023はViva Magenta(ビバマゼンタ)

PANTONEからカラーオブザイヤー2023が発表されました。
PANTONE COLOR OF THE YEAR 2023

2023年のトレンドカラーは「PANTONE 18-750 Viva Magenta(ビバマゼンタ)」。
青味がかった彩度の低い、自然な赤色ですね。

PANTONEのCOLOR OF THE YEAR、Viva Magenta 18-750 は、鮮やかで活力に満ちています。赤系の自然に根ざし、新たな力強さを表現する色合いです。ビバ マゼンタは勇敢で恐れを知らず、脈動する色であり、その活気が喜びに満ちた楽観的なお祝いを促進し、新しい物語を書きます。
今年のCOLOR OF THE YEARはパワフルで力を与えてくれます。それは、純粋な喜びに満ちた生き生きとした赤であり、抑制のない実験と自己表現を奨励し、刺激的で、際立ったステートメントとして現れる無限の色合いです。PANTONE 18-1750 Viva Magenta は、同じ生命力と反骨精神を持つすべての人を歓迎します。大胆で機知に富み、すべてを包括する色です。

カラーデータ

HEX #BE3455
sRGB 190 52 85
LAB 46.05, 58.95, 17.38

Photoshopのカラーピッカーではこんな感じです。

PANTONE CONNECT

PANTONE CONEECTではAdobe系のカラースウォッチで使えるASEファイルがダウンロードできます。
また、Viva Magentaを元にしたカラーパレットやシェードも用意されています。
PANTONE CONNECT(要会員登録)

CSSグリッドレイアウトについて

前提知識

・ブロックレベル要素
・インライン要素

グリッドレイアウトを理解するためには、上記2つの理解が必須です。

CSSグリッドとは

CSSグリッドについて説明します。
CSSグリッドとは、CSSでレイアウトを組む際によく使用される方法の1つで
縦横の格子状に分割してレイアウトを構成する手法です。


縦(赤線)がcolumn(列)、横(青線)がrow(行)です。
コーディングの際にこの「column」と「row」が出てきます。

今回はグリッドを使用して、2枚目の画像のようにレイアウトを整えていきます。


HTMLのみの状態


CSSでレイアウトを整えた状態
レイアウト調整後

コーディングにあたり、今回はCodePenというサイトを使用します。
グリッドレイアウトの仕組みを理解することが目的なので、環境構築などは行わずブラウザ上で動作させます。

CodePenにてコーディングを行なっていきましょう。
試しに以下ソースをCodePenのHTMLエディタに入力してみてください。
レイアウト調整前の背景色のみが装飾された結果が出力されます。

HTML

<div id="container"> <!-- コンテナ -->
  <div id="boxA">boxA</div> <!-- アイテム -->
  <div id="boxB">boxB</div> <!-- アイテム -->
  <div id="boxC">boxC</div> <!-- アイテム -->
  <div id="boxD">boxD</div> <!-- アイテム -->
</div>

CSS

#boxA {
  background-color: #ff7f7f;
}
#boxB {
  background-color: #7fbfff;
}
#boxC {
  background-color: #7fff7f;
}
#boxD {
  background-color: #ffff7f;
}

恐らくこちらの画像のような表示になったかと思います。

レイアウトを整える

早速今回の本題であるグリッドレイアウトでレイアウトを整えていきます。
CSSを以下ソースに置き換えてください。

#container {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    "boxA boxB boxB"
    "boxA boxC boxC"
    "boxA boxD boxD";
}

#boxA {
  background-color: #ff7f7f;
  grid-area: boxA;
}
#boxB {
  background-color: #7fbfff;
  grid-area: boxB;
}
#boxC {
  background-color: #7fff7f;
  grid-area: boxC;
}
#boxD {
  background-color: #ffff7f;
  grid-area: boxD;
}

以下画像のような表示になりましたか?

では一つずつ説明していきます。
グリッドレイアウトで使用するプロパティは全部で6つ。

親要素(コンテナ)で指定するプロパティ

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas

子要素(アイテム)で指定するプロパティ

  • grid-area

各プロパティの説明

display

要素の表示形式を指定します。
今回の場合グリッドレイアウトなので「grid」を指定します。

display: grid;

他にもブロックレベル要素と指定する「block」や
フレックスボックスを指定する「flex」が存在します。

grid-template-columns

グリッドレイアウトの横幅を指定します。

grid-template-columns: 400px 1fr;

値400pxはboxAの横幅を指定しています。
値1frは閲覧しているPCの横幅を自動的に算出し指定しています。
今回は先に400pxを指定しているため、画面最大幅-400pxで算出された横幅が指定されます。

grid-template-rows

グリッドレイアウトの縦幅を指定します。
今回は3行あるため値を3つ指定しています。

grid-template-rows: 100px 100px 100px;

100pxを各行の縦幅として指定しています。

grid-template-areas

各アイテムの配置を行うプロパティです。
「”」で囲うことで、画面に表示させたいレイアウトを簡単に可視化できます。
以下で指定している「boxA」や「boxB」は後ほど紹介するgrid-areaを使用して指定します。

“boxA boxB boxB”

例えばこちらのソースを書くと

     grid-template-areas:
    "boxA boxB boxB"
    "boxA boxC boxC"
    "boxA boxD boxD";

1列目は全てboxA
1行目の2列目〜3列目はboxB
2行目の2列目〜3列目はboxC
3行目の2列目〜3列目はboxD
という感じでこちらの結果が表示されます。

同じく、こちらを入力すると

    grid-template-areas:
    "boxA boxB boxB"
    "boxC boxC boxC"
    "boxD boxD boxD";

こちらの結果が表示されます。

このように、列(行)単位で「”」で囲い、その中にgrid-areaで指定した名前を
スペース区切りで入力することで簡単にレイアウトを整えることが可能です。

grid-area

grid-template-areasで指定する際の名前をつけるプロパティです。
このプロパティで指定した名前とgrid-template-areasで指定した名前が一致していれば任意の名前をつけることが可能です。
cssで各要素に対して指定してあげます。

#boxA {
  grid-area: boxA;
}
#boxB {
  grid-area: boxB;
}
#boxC {
  grid-area: boxC;
}
#boxD {
  grid-area: boxD;
}

おわり

CSSグリッドに関する説明は以上です。
floatプロパティを勉強した人はとても簡単に感じませんでしたか?
私がこのグリッドレイアウトの存在を知った時はもう衝撃すぎて体が震えました…(floatは難しすぎる)
ぜひこちらの記事で少しでもCSSレイアウトに対する興味が湧いていただけると嬉しいです!

パクることは決して悪いことではない

新人教育で伝えていること。

「パクることは決して悪いことではない」

TTP(徹底的にパクる)

某企業で受け継がれるTTPという言葉。

  • T
    徹底
  • T
    的に
  • P
    パクる

営業やマーケティングなどビジネス用語として使われる言葉ですが、エンジニア初心者の方に知ってほしいため、この言葉を伝えております。

パクるって良いの?

パクる
決して良い言葉として捉えることができませんが、グーグル検索・先輩からのアドバイス、これ全てパクる(=真似る)と考えます。
もちろん、著作権的な問題はNGですけどね。

分からないことは、

真似る⇒真似ぶ⇒学ぶ

「学ぶ」の語源は「真似ぶ」であるという説があることから、パクることは決して悪いことでないと考えています。

パクるから進化

パクった情報を、InputしてOutputすることで、自身のスキルとなります。
例えば、Outputとして、誰かに教えた際に、相手の理解度が低い際には、自身の理解度が低いのか?もう少し分かりやすい説明は無いのか?と自問自答して解決することで、自身のスキルアップに繋がります。

おわり

分からないことは、決して、恥ずべきことではなく、当たり前のことです。

先ずは真似ることです:v:

真似たら、InputしてOutputしましょう。

私が考えるInputは・・・

  1. パクって良いコードはデバッグして流れを掴む単純に真似ると意味ないです。
  2. パクって良いコードを少し変えてみる。(例えば、条件式を変えてみる)

私が考えるOutputは・・・

  1. 誰かに説明する。(ブログではなく、直接!)

Output少ない^^

【未経験OK】【応募資格見て欲しい!】Webサイト制作チームでの制作運用業務 

ホームページ制作にかかる運用業務に携わっていただきます。


時給:1,100円~
勤務時間:9:30~18:00
※沖縄は、渋滞多いからうれしい時間♪
※状況によっては時短OKのため、まずは弊社にお問い合わせくださいね!


お仕事内容

ホームページの数値などデータをPowerPointに貼るなど簡単なお仕事です。IT分からないけど、PowerPointやExcelはショートカットキーくらいなら知っている方であれば、すぐに活躍できるようしっかりとした研修制度、サポート制度が備わっております。

もし、今後、Webコーダー、Webディレクターへのキャリアアップを目指しているのではあれば、おすすめしたい環境なんです♪


実際にIT未経験の方が3名配属されました。

そして・・・

前職から給与UPを実現しております!

 


ほんとに??
応募お待ちしております。(^^♪

 

募集要項

職種

【未経験OK】【教育制度完備】Webサイト制作チームでの制作運用業務 B02

給与

時給1,100円〜
基本時給:1000円 手当を時給は別に支給 業務手当:50円~100円/時間あたり スキルアップ手当:50円~200円/時間あたり

試用・研修

試用期間あり (3か月)

雇用条件は本採用時と同じ

待遇・福利厚生

  • 社会保険あり
  • 資格取得支援制度
  • 残業手当
  • 休日手当
正社員登用制度あり

交通費

規定支給(1日支給上限 567円)

勤務地

うるま市

応募資格

パソコン基本操作 エクセルやワード、パワーポイントの利用

勤務時間

9:30~18:00

勤務曜日

月・火・水・木・金

休日休暇

有給休暇

土日祝休み 平均月1度の有給休暇利用

勤務期間

最低勤務期間:3ヵ月更新