paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

【解答コード公開】異世界を救う召喚プログラマ続出!その方法を解説


paizaで先月から公開しておりました、異世界転生ファンタジーRPGロジックサマナー~閃光の召喚プログラマ(略してロジサマ)にたくさんのご挑戦ありがとうございました!

今回はランキング問題の解法を解説いたします。(※解答コードはPythonで記述しています)

(ロジックサマナーの問題は、解答コードや解法など、ご自由にブログ等で公開していただいて構いません!また、プレゼント抽選の期間は終了しておりますが、問題には何度でも挑戦していただけます)

paiza.jp

ロジックサマナーランキング問題「魔法の呪文」 (封印レベルS)

あなたは魔法使いの見習いです。今日、あなたは修行のために魔法の呪文の練習をすることにしました。

H 行 W 列からなるブロックの集まりを使って、練習をしようとしています。

ブロックには赤・青・緑の 3 種類の色があります。以下は入力例 1 を図にしたものです。
f:id:paiza:20170622135826p:plain

今、このブロックの集まりに「モノケシ」の呪文を使っていきます。「モノケシ」の呪文は特定のブロックを指定して使います。

この呪文が使われたブロックは、縦横で隣接する同じ色のブロック同士がくっつき、その後消滅します。

消滅した後、消えたブロックの上にあった他のブロックは、下にある他のブロックにぶつかるまで、または最下段に到達するまで落下します。

以下は、入力例 1 で 3 列目の一番上のブロックを消したときの図です。
f:id:paiza:20170622135846p:plain

あなたはまだ見習いの魔法使いであるため、「モノケシ」の呪文を N 回までしか使うことができません。このとき、N 回以内にできるだけ多くブロックを消してください。

消したブロックの数が多く、呪文を使った回数が少ないほど良いスコアとなります。

ランキングで使われるスコアは (消したブロック数) + (呪文を使える回数 N - 呪文を使った回数) の式で計算され各ブロックの集まりごとのスコアの合計で計算されます。

f:id:paiza:20170622145056p:plain
f:id:paiza:20170622145101p:plain

問題ページはこちら

この問題は、正解を出すだけなら簡単です。どんな消し方でもよいので、出力形式に従って出力さえしていけば、正解にはなります。

まずは「上から消していくと、凸のような形になって隣接するブロックが減りそうだな」という最低限の考え方で書いたのが下記のコードです。とにかく下1行を消し続けます。この時、何もない場所で呪文を使ってしまわないよう、ブロックの状態をシミュレーションした結果を保持し、何もない場合はその列を無視するという処理を入れています。

このコードを提出すると、スコアは 819 となります。これだけでも結構いいスコアですね。

ただ、下から1行目よりも下から2行目や左右2列目などの方が、より他のブロックと隣接していてよさそうな気がしますよね。

少し方針を変えて、右下から1色ずつ消す方法で書いてみたコードがこちらです。

一見、ブロック同士がよりくっつきやすくなって、消えるブロックの数が増える…?という気がしますが、提出したところ、スコアは 533 とむしろ下がってしまいました。(ちなみに赤、緑、青のどれからチェックするかで少し点数が変わります)

なぜスコアが下がるのかですが、この解き方では、手数が最大で 100 で 最大 2500 の盤面にまんべんなく赤、緑、青が孤立した形で配置されていた場合に、各色約833ブロックずつ存在することになります(割り切れないので1ブロックどれかの色が多くなります)。たった100手しか使えないとなると、どれか1色を消している間に手数が尽きてしまいますので、あまり良いやり方とは言えませんよね。


入力例の図では、例えば青から消していった場合、3手だけだと青が全て消えただけで終了となってしまいます。一方で、緑→青→赤の順で消せば、緑が2つ、緑が3つ、青が5つと都合よく消えますね。小さい盤面である程度の手数があれば、都合よくたくさん消えてくれることもあります。

今度は、単純に消せる数を増やせそうな、できるだけ大きな塊を消していく方法で考えてみましょう。この解き方の場合、入力例で考えてみると、緑が3つ消え、次に青が5つ消え、緑が2つ消えます。

このコードを提出すると 3782 となかなか高いスコアをとることができました。

今回はこのような、大きな塊を消していく方法を最低限の模範解答として想定していました。

もちろんさらに踏み込んで考えると、 N手先まで試して消えた数が多い方を選ぶとか、同じサイズの塊があった場合にどちらを優先するのか…などなど、いろいろな最適化が考えられますので、ぜひ挑戦してみてください!


余談ですが……最も簡単かつ卑怯な解法です。

何も考えずに 0 手、つまり何も消さないという出力をするだけで、 310点が取れてしまいます。スコアの計算上、消した数は 0 ですが、使っていい手数の 310手分が点数となっています。

もちろん、このやり方をしてもpaizaランクS相当のスキルとは言えませんのであしからず…。


ロジックサマナー~閃光の召喚プログラマ』では、このほかにもさまざまな難易度のプログラミング問題が「封印」としてプレイヤーの前にたちはだかります。プログラミング初心者向けの問題も多数ございますので、「ランキング問題は難しくて無理……」という方もぜひ挑戦してみてください!
paiza.jp




paiza転職は、転職時のミスマッチをなくし、エンジニアがより技術面にフォーカスしたやりがいある仕事を探せる転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。
paiza.jp
まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。
paiza.jp

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

GitHubだけで超高機能なスライド資料が作れる「GitPitch」の使い方を徹底解説!

f:id:paiza:20170621143751j:plain
どうも、まさとらん(@0310lan)です!

今回は、ブラウザ上のGitHubMarkdown(マークダウン)ファイルを作成し、そのまま超高機能なスライド資料に変換してくれるサービスのご紹介です!

もちろん、自分でMarkdownファイルを用意してpushするだけでもOKなのですが、今回はコンソール画面などは使わずにすべてブラウザだけで完結できる方法をご紹介致します。

GitPitch

f:id:paiza:20170621143928j:plain

■「GitPitch」の基本的な使い方!

それでは、実際に簡単なスライド資料を作ってみましょう!

まず最初に、自分のGitHubアカウントでログインし、新規のリポジトリを作成しましょう!
f:id:paiza:20170621143946j:plain


「① リポジトリ名」は好きな名前を付けてください。
f:id:paiza:20170621143959j:plain
画面下にある「② チェックボックス」をONにしてから「③ Create repository」ボタンをクリックしましょう。


すると、自動的に「README.md」のMarkdownファイルが作成されているのでクリックします。
f:id:paiza:20170621144013j:plain


画面右側にある「編集」ボタンをクリック!
f:id:paiza:20170621144028j:plain


すると、Markdownファイルを直接編集できる「コードエディタ」が表示されるので、まずはファイル名を「PITCHME.md」に変更します!
f:id:paiza:20170621144038j:plain
このファイル名でないと上手くスライド資料に変換されないので注意しましょう。


あとは、次のようにMarkdown記法でスライドの中身を書いていくだけです!

### こんにちは!


これはサンプルのスライド資料です。


---


### 2枚目のスライド


---


### 3枚目のスライド


---


### おわり

各スライドは「---」で区切ることで、自動的にページが分割されるようになっています。


最後に、画面下にある「Commit changes」ボタンをクリックします。
f:id:paiza:20170621144304j:plain
たったこれだけの作業ですが、「スライド資料」はもう完成しています!


このまま次のURLにアクセスしてみましょう!

https://gitpitch.com/GitHubのユーザー名/リポジトリ名

例えば、GitHubのユーザー名が「webhacck」でリポジトリ名が「sampleslide」であれば、次のようなURLになります!(リンクをクリックして確認してみてください)

https://gitpitch.com/webhacck/sampleslide|GitPitchのサンプルスライド】
f:id:paiza:20170621144344j:plain
見事に「スライド資料」に変換されているのが分かりますね。
スマホにも最適化されています…)

■「GitPitch」のMarkdown記法について!

GitPitch」の基本的な使い方が分かったところで、Markdownの特殊な記法について見ていきましょう!

もちろん、一般的なMarkdown記法が使えるのですが、スライド資料を作成するうえで便利な記法がいくつかあるので解説しておきます。


例えば、区切り文字の「---」「+++」を記述すること、複数のスライドを構成することが出来ます!

### 1枚目のスライド


---


### 2枚目のスライド


+++


### 3枚目のスライド


---


### 4枚目のスライド


スライドに変換するとこんな感じになります!
f:id:paiza:20170621144519j:plain
「---」で区切ると左右に画面遷移でき、「+++」で区切ると上下に遷移することができます。(この場合、下方向へ遷移すると3枚目のスライドが表示されます…)


また、Markdownで直接コードを記述しなくても、「区切り文字」に続けて次のようにファイルを指定することでソースコードを読み込むことも可能です。

---?code=sample.js


リポジトリ内の「sample.js」を読み込んで表示してます


---


スライドはこのようになります!
f:id:paiza:20170621144604j:plain
見事にファイルを読み込んで表示できているのが分かりますね。
(「+++?code=」も利用できます…)


同じ要領で、gistに公開したソースコードを読み込むことも可能です!

---?gist=1f39d3baae495652ac52609cce31aaed

gistに公開したソースコードを読み込んで表示しています

---


スライドにするとこうなります!
f:id:paiza:20170621144628j:plain


さらに、ソースコード内で任意の箇所だけハイライトする機能も搭載されており、例えば2行目だけに注目して欲しい場合は次のようになります。

---


### 指定したコードだけハイライト表示


```
var str1 = 'hello world';
var flag = true;
var result = 10 + 20;


console.log( str1 );
console.log( str2 );
console.log( str3 );
```
@[2](flagに「true」を代入)


---

コードのすぐ下に「@[2]」と記述するだけで2行目だけハイライトになり、続けて「( )」を付けることでコメントも表示可能です。


スライドにするとこうなります!
f:id:paiza:20170621144703j:plain
2行目だけハイライトになり、コメントも同時に表示されていますね。

複数の箇所をハイライトすることも可能で、ページ送りする毎に次々と表示されるのでコードを解説する時にとても便利な機能だと思います。

また、読み込んだソースコードが長い場合に、特定の箇所を一瞬で表示できるのも特徴の1つです。


スライドでよく使う機能として、1つずつ順番にアニメーション表示させるというのがありますが、「GitPitch」の場合は文末に「 | 」を付与するだけで実現可能です。

---


### 順番にアニメーション表示


- Java
- JavaScript |
- Kotlin |
- Go |
- Scala |


---


たったこれだけで、「ページ送り」する度に表示されるようになります!
f:id:paiza:20170621144739g:plain


「Chart.js」をベースにしたグラフやチャートを描画する機能も搭載されています。

例えば、「レーダーチャート」を作って表示する場合は次のようになります。

---


### グラフやチャートの表示


<canvas data-chart="radar">


    Month, 1月, 2月, 3月, 4月, 5月, 6月, 7月
    1980, 65, 59, 80, 81, 56, 55, 40
    2017, 28, 48, 40, 19, 86, 27, 90


</canvas>


---


スライドにするとこうなります!
f:id:paiza:20170621144818j:plain
(この機能は、後述する詳細設定で機能をONにしましょう…)

他にも、HTML記述ができたり、画像・動画などを埋め込んだり、難しい数式を美しく表示する機能…など、非常に多彩な機能が盛りだくさんなのが魅力的です。

公式のWikiには、さらに詳細な解説があるのでご興味ある方はぜひチェックしてみてください!

■詳細設定のカスタマイズについて!

GitPitch」は、デフォルトのままでも素敵なスライドが作成できるのですが、自分の好みに合わせて細かくカスタマイズできる機能も搭載されています。

方法は簡単で、同じリポジトリ内に「PITCHME.yaml」ファイルを作成するだけです!
f:id:paiza:20170621144845j:plain
(新しいファイルの作成は「Create new file」ボタンをクリックすれば作れます…)

あとは、指定された項目にしたがってテキストを記述するだけなので、非常にお手軽なカスタマイズ方法と言えるでしょう。


実際の記述例は次のようになります!

#テーマの設定
theme : sky


#ロゴアイコンの設定
logo : logo.png


#フットノートの設定
footnote : "© 2017 sample Inc."


#スライドのページ数表示の設定
slide-number: true

たったこれだけの記述で、自分好みのスライド資料を作成できるわけです!(#行はコメントなので無くてもOKです…)


このカスタマイズでは、「①テーマの変更」「②ロゴアイコンの追加」「③フットノートの追加」「④ページ数の表示」を行っています。
f:id:paiza:20170621144921j:plain
他にも、カスタムCSSを設定することも可能で、やり方次第でまったく異なるデザインを作ることも可能なのが面白いところです。


カスタマイズの設定項目は非常にたくさん用意されており、特に便利だと思う設定例を掲載しておきます!

#コードのシンタックスハイライトの設定
highlight : monokai


#スライド自動再生の設定
autoslide : 5000


#スライドのループ設定
loop : true


#トランジションの設定
transition : fade


#チャート / グラフ機能の設定
charts : true

このように、スライドを自動再生できたり、画面遷移のトランジションを好みのアニメーションに変更したり出来るわけです。

また、チャートやグラフを利用する場合は「true」を設定するのを忘れないようにしましょう。

さらに、リモートコントロールに対応させたり、Googleアナリティクスを設定するなど、高度な使い方にも柔軟に対応できるポテンシャルも秘めています。


今回ご紹介した「GitPitch」の機能を使ったサンプルのスライド資料を作成しているので、以下のURLから体験してみてください!

GitPitchを使ったスライド資料|GitHub

■「GitPitch」の便利な機能紹介!

GitPitch」には、デフォルトの状態で利用できる便利な機能がいくつか用意されています。

この機能は、スライドを表示した時に出現する「フッターメニュー」から利用することが可能です!
f:id:paiza:20170621145024j:plain


例えば、「GitPitch」のヘッダー/フッターを排除して、フルスクリーンモードで表示できる機能や…
f:id:paiza:20170621145037j:plain


スライドの全体像をまとめて表示したりもできます。
f:id:paiza:20170621145047j:plain


さらに、「Print」メニューから現在表示しているスライドをPDFに変換する機能もあります。
f:id:paiza:20170621145057j:plain


この機能を使うと、新規タブでPDFとして表示されるのが分かりますね。
f:id:paiza:20170621145109j:plain
もちろん、このままPDFファイルとしてダウンロードすることも可能です。


「Embed」メニューを利用すると、埋め込み用のタグを生成することも出来ます!
f:id:paiza:20170621145121j:plain
これにより、自分のWebサイトやブログなどにスライド資料を簡単に埋め込むことができるので非常に便利でしょう。

他にも、SNSでシェアしたり「テーマ」を変更することも可能で、ローカルサーバー上でスライドを表示できる機能もあります。

■まとめ

今回は「GitPitch」の機能について駆け足でご紹介しました。

Markdownでサクサク文書を書くだけで、すぐにスライド資料として公開できるのは非常に便利で、実際に使ってみるともう手放せなくなりそうです。

特にエンジニア系職種の人であれば、「GitPitch」だけでスライド資料の作成は十分なのではないかと感じてます。

今後スライドを作成する機会のある人は、ぜひ一度トライしてみてください!


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

現在、普段有料公開しているPHP、DB/SQL、Webアプリ開発入門(PHP+MySQL編)のレッスンを、期間限定で連続無料公開中ですのでぜひごらんください。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

【すべてうまくいく 第3回】寝る直前のプログラミングはいい眠りの大敵。効果的な休息とは

f:id:paiza:20170524121044j:plain

エンジニアの皆さん、今、健康ですか?

一般的に、肉体的にも精神的にもタフな仕事のイメージがあるエンジニア。特にメンタル面の管理で苦労されている人を多く見かけます。スキルアップだけでなく、健康維持もエンジニアを続けるために不可欠なポイントです。

この連載は「すべてうまくいく:エンジニアを続けていくための心得」と題して、元エンジニアで現在はライターの加山恵美さんが、自らの経験や数多くのエンジニアへの取材経験をもとに、健康で充実した日々を送るためのヒントをお伝えしていきます。仕事に疲れたときやキャリアに迷ったときに、ちょっと一息入れるつもりで読んでみてください。(バックナンバーはこちらから)

第3回となる今回は、いい休息をとるための「自律訓練法」について解説します。

こんにちは、ライターの加山恵美です。

時間を忘れるほどにプログラミングや業務に没頭することはありませんか?

数日間くらいならできるかもしれませんが、ちゃんと休まないとどこかに支障が出てしまいます。休むといっても、睡眠の時間を確保すればいいだけではありません。頭と体を休める時間を持つことも大事です。

言い換えれば、交感神経と副交感神経のバランスを保つということです。

交感神経とは活動している時に働きます。運動したり、緊張したり、思考を働かせたり、ばりばり動ける状態です。一方、副交感神経は休息している時に働きます。睡眠時や食事中、休憩中でぼーっとしている状態です。休息は疲れを回復するのに必要です。

昼間に運動や仕事で交感神経を働かせたら、夜は副交感神経が働くようにリラックスした状態にしてから寝るほうがいいです。寝る直前までプログラミングしていたら、交感神経が働いている状態で寝ることになりますから、いい眠りになりません。私は「気絶に近い」と冗談で言います。

寝る数時間前には運動や仕事をやめ、できれば興奮するようなテレビは見ず、リラックスした時間を持つことが大事です。ぬるめのお風呂にゆっくり入るのもいいでしょう。

リラックスのための手法の1つに自律訓練法があります。1930年代にドイツの医学者が確立しました。自律神経のバランスを保つ効果があります。「自律訓練法」で探せばWebサイトや書籍で解説がたくさん見つかります。簡単に触れておきましょう。

まず椅子に座るか横になり、気持ちを落ち着かせます。続いて6つの公式を心の中で唱えます。まずは「手足が重たい(重感)」と唱えてみます。体が唱えた通りになったと感じたら次に進みましょう。以下、順に「手足が温かい(温感)」、「静かに心臓が打っている(心臓調整)」、「楽に呼吸している(呼吸調整)」、「おなかが温かい(腹部温感)」、「おでこが涼しい(額涼感)」と進んでいきます。最後に消去動作として背伸びしたり、手を握ったり開いたりして目を覚まします。

体の各部位ごとに順に意識を向け、リラックスする。そのための練習方法です。6つめの「おでこが涼しい」はちょっと難しいです。

最初は順番を覚えるのが難しいかと思います。リラックスしていくので頭が働かず、すぐに順番が出てきません。「次なんだっけ?」と思い出そうとすると、リラックスが浅くなってしまいます。

疲れていると、途中で寝てしまうこともあります。眠りにつけないなら、逆にこれで眠りやすくするのもありです。就寝前なら最後の消去動作は不要です。そのまま寝てしまいましょう。

順番を覚える方法として、順番ごとの指示を自分の声で録音しておくのもいいでしょう。スマホのレコーダー機能を使えば簡単です。決まった時間に終わらせることができます。

練習を重ねて上手になれば、効率的で効果が高まります。自律神経が乱れている、ストレスが高まっていると思ったら、一度試してみることをおすすめします。
慣れないうちは、できれば医師や専門家に指導してもらうといいでしょう。
(つづく)


※参考
自律訓練法 - Wikipedia


著者プロフィール

加山恵美
フリーランスライター。茨城大学理学部卒。金融機関の子会社でシステムエンジニアを経験した後にIT系のライターとして独立。エンジニア視点で記事を提供していきたい。
Twitter@emiekayama
site:http://emiekayama.net

「すべてうまくいく」バックナンバーはこちらから



paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

paiza転職」は、自分のプログラミング力が他社で通用するか(こっそり)腕試しができる、IT/Webエンジニアのための転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。
paiza.jp
まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。
paiza.jp

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編